# FRANKY'S

> FRANKY'S — Style Reference

## Prompt Content

```
# FRANKY'S — Style Reference
> Retro arcade kiosk trên quầy skate-shop.

**Theme:** light

Franky's là một ngôn ngữ thị giác retro arcade kết hợp skate-shop: nền canvas màu kem ấm (#f3e5df) được bọc trong viền pixel-art cứng, bàn cờ đen-trắng xuất hiện khắp nơi, và một font Arcade pixel duy nhất mang mọi chữ trên site. Bảng màu được cố tình làm nghèo nàn — chỉ có hai màu sắc tồn tại (signal-orange #faa21f cho thanh marquee và một màu xanh nổi bật #128e44 cho nút mua hàng), toàn bộ hệ thống phân cấp được thể hiện qua sự chuyển đổi weight của font Arcade từ 400 lên 700 và qua độ tương phản đen-trên-kem. Các bề mặt luôn phẳng và nguyên khối; chiều sâu chỉ đến từ đường viền inset 1px màu kem trên nút và sự chơi tông màu của bàn cờ. Các component trông như sprite shopfront thập niên 1990: viền đen dày, border-radius 6–12px chặt chẽ, internal padding 4–8px gọn gàng, và các toggle 3D/AR trông như pixel icon thay vì chrome. Các trang mới nên giữ nguyên cảm giác arcade cabinet: không gradient ngoại trừ thanh marquee màu cam, không soft shadow, không typography trang trí — chỉ có giấy kem, pixel rule đen, và một màu cam ấm làm điểm nhấn.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|------|
| Arcade Cream | `#f3e5df` | `--color-arcade-cream` | Nền trang, bề mặt product card, inset highlight trên nút |
| Ink Black | `#000000` | `--color-ink-black` | Text chính, ô bàn cờ, toàn bộ viền UI, đường viền card, icon stroke |
| Pixel Gray | `#e5e7eb` | `--color-pixel-gray` | Viền mảnh, đường phân cách card, structural rule giữa các ô grid |
| Charcoal | `#333333` | `--color-charcoal` | Tông bề mặt phụ, ô bóng của bàn cờ, màu shadow |
| Carbon | `#151515` | `--color-carbon` | Màu trung tính đậm cho illustration fill và các ô bàn cờ dày nhất |
| Muted Gray | `#737373` | `--color-muted-gray` | Text disabled/muted trên nút và body copy |
| Marquee Orange | `#faa21f` | `--color-marquee-orange` | Thanh thông báo trên cùng, điểm nhấn marquee, chữ ký thương hiệu |
| Buy Green | `#128e44` | `--color-buy-green` | Nút ADD TO CART đã được fill — hành động mua hàng màu xanh duy nhất |

## Tokens — Typography

### Arcade — Font duy nhất trên toàn bộ giao diện — mọi heading, label, price, button, body và icon đều được đặt bằng Arcade. Sự chuyển đổi weight 400/700 là công cụ phân cấp duy nhất; dùng font thứ hai sẽ phá vỡ ảo giác kiosk. · `--font-arcade`
- **Thay thế:** VT323, Press Start 2P (bộ font pixel Google Fonts) — giống phong cách 8-bit, thiên về all-caps
- **Weights:** 400, 700
- **Cỡ chữ:** 10px, 14px, 16px, 18px
- **Line height:** 1.25, 1.43, 1.50, 1.56
- **Letter spacing:** normal ở mọi cỡ — bitmap grid của font là nhịp điệu, không phải tracking
- **Vai trò:** Font duy nhất trên toàn bộ giao diện — mọi heading, label, price, button, body và icon đều được đặt bằng Arcade. Sự chuyển đổi weight 400/700 là công cụ phân cấp duy nhất; dùng font thứ hai sẽ phá vỡ ảo giác kiosk.

### Type Scale

| Vai trò | Cỡ chữ | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 10px | 1.5 | — | `--text-caption` |
| body-sm | 14px | 1.43 | — | `--text-body-sm` |
| body | 16px | 1.5 | — | `--text-body` |
| subheading | 18px | 1.56 | — | `--text-subheading` |

## Tokens — Spacing & Shapes

**Base unit:** 4px

**Density:** compact

### Spacing Scale

| Tên | Giá trị | Token |
|------|-------|-------|
| 4 | 4px | `--spacing-4` |
| 8 | 8px | `--spacing-8` |
| 12 | 12px | `--spacing-12` |
| 24 | 24px | `--spacing-24` |
| 44 | 44px | `--spacing-44` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| tags | 9999px |
| cards | 12px |
| buttons | 6px |

### Shadows

| Tên | Giá trị | Token |
|------|-------|-------|
| subtle | `rgb(243, 229, 223) 0px 1px 0px 0px inset` | `--shadow-subtle` |

### Layout

- **Page max-width:** 1200px
- **Section gap:** 43-61px
- **Card padding:** 12px
- **Element gap:** 4-8px

## Components

### Marquee Announcement Bar
**Vai trò:** Dải trên cùng của trang

Dải full-width được fill bằng gradient Marquee Sheen (cam → kem → cam). Arcade 14px/400, letter-spacing normal, text màu đen hoặc nâu đậm. Chiều cao ~36px, sát với mép trên của viewport. Đây là bề mặt màu sắc trang trí duy nhất trên trang.

### Header Bar
**Vai trò:** Navigation chính

Nền màu kem (#f3e5df), viền dưới 1px solid #000000. Wordmark 'franky's' được đặt bằng Arcade 18px/700 màu #000000 kèm pixel-icon hình chữ thập đen nhỏ. Menu hamburger bên phải (ba đường kẻ đen 2px, cách nhau 16px). Không drop shadow, không sticky elevation — nó nằm phẳng trên canvas kem.

### Product Showcase Panel (3D/AR)
**Vai trò:** Hero product viewer

Panel lớn bên trái (khoảng 55% chiều rộng viewport) với sàn bàn cờ đen-và-kem lùi dần theo phối cảnh. Một chiếc cap màu charcoal (#333333) nổi ở giữa với shadow #333333 phẳng. Ở dưới cùng-trung tâm có hai pill toggle: '3D' và 'AR', mỗi cái radius 6px, inset highlight màu kem 1px (#f3e5df 0px 1px 0px 0px inset), padding 2px 8px, Arcade 14px/400.

### Product Card
**Vai trò:** Ô grid cho một SKU

Nền màu kem (#f3e5df), radius 12px, viền 1px solid #e5e7eb. Internal padding 12px. Ảnh sản phẩm lấp đầy khoảng 70% phía trên của card trên nền kem thuần. Tiêu đề (ví dụ 'FRANKY'S GREEN 665') bằng Arcade 14px/700 #000000 ở góc dưới-bên trái, giá bằng Arcade 14px/400 #000000 ở góc dưới-bên phải. Hai control xếp chồng bên dưới vùng tiêu đề: nút ghost 'TRY IN AR' và nút 'ADD TO CART' đã fill hoặc 'OUT OF STOCK' dạng ghost.

### Try In AR Button (Ghost)
**Vai trò:** Trigger xem trước 3D/AR

Radius 6px, fill trong suốt, viền 1px solid #000000, Arcade 14px/400 #000000. Padding 4px 12px. Hậu tố 'AR' được bọc trong một pill nhỏ (9999px) để trông như badge.

### Add To Cart Button (Filled Green)
**Vai trò:** Hành động mua hàng chính

Radius 6px, nền #128e44, Arcade 14px/700 #ffffff (trắng), hoàn toàn uppercase. Padding 8px 12px. Tùy chọn inset highlight màu kem 1px (#f3e5df 0px 1px 0px 0px inset) để giữ cảm giác arcade-button. Đây là bề mặt màu xanh duy nhất trong hệ thống.

### Out Of Stock Button (Disabled Ghost)
**Vai trò:** Trạng thái SKU hết hàng

Radius 6px, fill trong suốt, viền 1px solid #737373, Arcade 14px/400 #737373 text. Cùng kích thước với nút Add-To-Cart đang hoạt động để grid luôn đồng nhất.

### Marquee Tag (Pill Badge)
**Vai trò:** Label nội dòng trong nút và card

Radius 9999px, viền 1px solid #000000, Arcade 10px/400 #000000, padding 2px 8px. Dùng cho hậu tố như 'AR' hoặc sub-tags bên trong card.

### Footer Strip
**Vai trò:** Thanh thông tin cuối trang

Viền trên 1px solid #e5e7eb trên nền kem. Bên trái: '© FRANKY'S AMSTERDAM 2023' bằng Arcade 14px/400 #000000. Bên phải: 'SUBSCRIBE' và 'SHIPPING' bằng Arcade 14px/700 #000000 hoạt động như ghost link.

### Checkerboard Surface
**Vai trò:** Texture hero / pattern thương hiệu

Grid ô vuông hai tông màu lặp lại bằng #f3e5df và #000000 (hoặc #333333 cho các biến thể có bóng). Kích thước ô ~48px. Dùng làm nền cho hero panel và làm dải trang trí; không bao giờ dùng làm bề mặt UI chức năng.

## Do's and Don'ts

### Do
- Dùng Arcade 400 cho body, labels, prices và captions; chuyển lên Arcade 700 chỉ cho titles, nav items và footer link — sự thay đổi weight là toàn bộ hệ thống phân cấp.
- Đặt mọi CTA, tag và toggle với radius 6px (hoặc 9999px cho pill 'AR' nội dòng) và thêm inset highlight màu kem 1px (#f3e5df 0px 1px 0px 0px inset) để giữ bevel arcade-button.
- Dùng Buy Green (#128e44) chỉ cho nút Add-To-Cart đã fill; không bao giờ dùng lại cho link, border hay hover state.
- Neo trang vào Arcade Cream (#f3e5df); dùng Pixel Gray (#e5e7eb) cho structural rule 1px và card border, Ink Black (#000000) cho text và độ tương phản bàn cờ.
- Dành Marquee Orange (#faa21f) cho thanh thông báo trên cùng và gradient Marquee Sheen tùy chọn — nó không bao giờ xuất hiện dưới dạng button fill hoặc màu text lớn.
- Giữ nhịp dọc theo bội số của 4px; element gap ở 4–8px, card padding ở 12px, section gap ở 43–61px.
- Ghép mỗi product card với một nút ghost Try-In-AR xếp trên nút Add-To-Cart (hoặc Out-Of-Stock) để grid bên phải luôn đồng nhất.

### Don't
- Đừng đưa font thứ hai vào — không system font, không sans-serif, không display script. Arcade là thương hiệu.
- Đừng dùng soft drop shadow; shadow duy nhất được phép là inset highlight màu kem 1px trên nút và shadow #333333 phẳng dưới chiếc cap nổi.
- Đừng bo tròn card quá 12px hoặc nút dưới 6px — bộ ba 6/12/9999px là vốn từ vựng radius duy nhất được phép.
- Đừng đặt Buy Green (#128e44) lên element không phải mua hàng, và đừng ghép nó với gradient Marquee Sheen trong cùng một component.
- Đừng làm loãng bàn cờ — nó phải đọc là #000000 thuần trên #f3e5df (hoặc #333333 cho tông bóng), không bao giờ là tinted gray hay blurred pattern.
- Đừng dùng nền dark-mode; canvas luôn là Arcade Cream, kể cả bên trong card và modal.
- Đừng vượt quá 18px trên bất kỳ text nào hoặc xuống dưới 10px — bitmap grid của font Arcade bị vỡ ngoài khoảng đó.

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|-------|------|-------|---------|
| 1 | Arcade Cream | `#f3e5df` | Canvas trang — màu trắng kem ấm giúp pixel font thở |
| 2 | Pixel Gray | `#e5e7eb` | Tông gutter grid và biến thể nền product card |
| 3 | Charcoal | `#333333` | Ô bóng bàn cờ và bề mặt cấp ba |
| 4 | Carbon | `#151515` | Tông bàn cờ sâu nhất, fill illustration gần đen |

## Elevation

- **Add To Cart / Ghost buttons:** `inset 0 1px 0 0 #f3e5df — pixel-highlight màu kem 1px ở cạnh trên`
- **Floating product cap trong hero:** `drop #333333 phẳng, không blur, nằm trực tiếp dưới sản phẩm`

## Imagery

Ảnh chụp cap trên nền kem thuần, căn giữa và crop chặt, với shadow tiếp xúc màu charcoal mềm bên dưới. Không lifestyle, không người mẫu, không bối cảnh — chiếc cap là hero. Bàn cờ phía sau hero đóng vai trò là bề mặt đồ họa. Không illustration, không 3D render ngoài AR toggle, không icon trang trí ngoài pixel cross trong wordmark.

## Layout

Full-bleed single-screen product page trên desktop, max-width 1200px căn giữa. Nhịp từ trên xuống dưới: thanh marquee cam → header kem với rule đen → chia hai cột (55% hero checkerboard / 45% product card grid 2 cột) → footer strip kem. Trên mobile, hero thu gọn thành checkerboard full-width và grid chuyển thành một cột. Các card được phân bố đều trong grid 2 cột với đường kẻ mảnh Pixel Gray (#e5e7eb) giữa chúng. Section gap chặt (43–61px) và giao diện không bao giờ dùng dải tối full-bleed — canvas kem chạy liên tục.

## Agent Prompt Guide

Quick Color Reference:
- text: #000000 trên #f3e5df
- background: #f3e5df (Arcade Cream)
- border: #e5e7eb hairline, #000000 cho structural rule
- accent: #faa21f (Marquee Orange — chỉ thanh trên cùng)
- primary action: #128e44 (filled action)
- disabled/muted: #737373 text trên ghost button

Example Component Prompts:
1. Product Card — Nền kem (#f3e5df), radius 12px, viền 1px solid #e5e7eb, padding 12px. Tiêu đề 'FRANKY'S GREEN 665' bằng Arcade 14px/700 #000000 ở góc dưới-bên trái, giá '€65' bằng Arcade 14px/400 #000000 ở góc dưới-bên phải. Các control xếp chồng: nút ghost 'TRY IN AR' (radius 6px, fill trong suốt, viền 1px #000000, Arcade 14px/400, padding 4px 12px) với hậu tố 'AR' trong pill 9999px, phía trên nút Add-To-Cart đã fill (#128e44, Arcade 14px/700 trắng, radius 6px, padding 8px 12px, inset highlight 1px #f3e5df).
2. Marquee Announcement Bar — Dải full-width, cao 36px, fill bằng linear-gradient(to right, #faa21f, #fef3c7, #faa21f). Text 'KIN. STORE. COUPONS' bằng Arcade 14px/400 #000000, căn giữa.
3. Header Bar — Nền kem (#f3e5df), viền dưới 1px solid #000000, cao 44px. Wordmark 'franky's' với pixel-cross icon bằng Arcade 18px/700 #000000 căn trái, ba đường kẻ ngang đen 2px (cách nhau 16px) căn phải làm hamburger.
4. 3D/AR Hero Panel — Rộng 55% viewport, fill bằng bàn cờ 48px lặp lại #f3e5df / #000000. Một chiếc cap màu charcoal (#333333) căn giữa với shadow tiếp xúc #333333 phẳng. Hai pill toggle '3D' và 'AR' căn giữa ở dưới cùng: radius 6px, fill trong suốt, viền 1px #000000, Arcade 14px/400, inset highlight 1px #f3e5df, padding 2px 8px.
5. Footer Strip — Viền trên 1px solid #e5e7eb trên #f3e5df, cao 32px. Bên trái: '© FRANKY'S AMSTERDAM 2023' bằng Arcade 14px/400 #000000. Bên phải: 'SUBSCRIBE' và 'SHIPPING' bằng Arcade 14px/700 #000000 với gap 24px giữa chúng.

## Similar Brands

- **Polar Skate Co.** — Cùng canvas kem phẳng, product card viền đen đậm, và một điểm nhấn ấm duy nhất (đỏ của Polar, cam của Franky) trên thanh marquee
- **Palace Skateboards** — Hệ thống type chịu ảnh hưởng pixel/bitmap, khung sản phẩm bàn cờ, và phong cách nút bevel radius 6px
- **Stüssy** — Product grid kem-đen gọn gàng với padding chặt và một màu CTA sắc độ duy nhất
- **Aimé Leon Dore** — Bề mặt trắng kem ấm, label monospaced/gần pixel, và card radius tối thiểu nhưng chính xác

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-arcade-cream: #f3e5df;
  --color-ink-black: #000000;
  --color-pixel-gray: #e5e7eb;
  --color-charcoal: #333333;
  --color-carbon: #151515;
  --color-muted-gray: #737373;
  --color-marquee-orange: #faa21f;
  --color-buy-green: #128e44;

  /* Typography — Font Families */
  --font-arcade: 'Arcade', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 10px;
  --leading-caption: 1.5;
  --text-body-sm: 14px;
  --leading-body-sm: 1.43;
  --text-body: 16px;
  --leading-body: 1.5;
  --text-subheading: 18px;
  --leading-subheading: 1.56;

  /* Typography — Weights */
  --font-weight-regular: 400;
  --font-weight-bold: 700;

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-24: 24px;
  --spacing-44: 44px;

  /* Layout */
  --page-max-width: 1200px;
  --section-gap: 43-61px;
  --card-padding: 12px;
  --element-gap: 4-8px;

  /* Border Radius */
  --radius-md: 6px;
  --radius-xl: 12px;
  --radius-full: 9999px;

  /* Named Radii */
  --radius-tags: 9999px;
  --radius-cards: 12px;
  --radius-buttons: 6px;

  /* Shadows */
  --shadow-subtle: rgb(243, 229, 223) 0px 1px 0px 0px inset;

  /* Surfaces */
  --surface-arcade-cream: #f3e5df;
  --surface-pixel-gray: #e5e7eb;
  --surface-charcoal: #333333;
  --surface-carbon: #151515;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-arcade-cream: #f3e5df;
  --color-ink-black: #000000;
  --color-pixel-gray: #e5e7eb;
  --color-charcoal: #333333;
  --color-carbon: #151515;
  --color-muted-gray: #737373;
  --color-marquee-orange: #faa21f;
  --color-buy-green: #128e44;

  /* Typography */
  --font-arcade: 'Arcade', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 10px;
  --leading-caption: 1.5;
  --text-body-sm: 14px;
  --leading-body-sm: 1.43;
  --text-body: 16px;
  --leading-body: 1.5;
  --text-subheading: 18px;
  --leading-subheading: 1.56;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-24: 24px;
  --spacing-44: 44px;

  /* Border Radius */
  --radius-md: 6px;
  --radius-xl: 12px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-subtle: rgb(243, 229, 223) 0px 1px 0px 0px inset;
}
```