01 — Design Tokens

Color Palette

Base

background

#ffffff

foreground

#0a0a0a

card

#ffffff

card-foreground

#0a0a0a

popover

#ffffff

popover-foreground

#0a0a0a

primary

#171717

primary-foreground

#fafafa

secondary

#f5f5f5

secondary-foreground

#171717

muted

#f5f5f5

muted-foreground

#737373

accent

#f5f5f5

accent-foreground

#171717

destructive

#e7000b

destructive-foreground

#e7000b

border

#e5e5e5

input

#e5e5e5

ring

#a1a1a1

Chart

chart-1

#f54900

chart-2

#009689

chart-3

#104e64

chart-4

#ffb900

chart-5

#fe9a00

Sidebar

sidebar

#fafafa

sidebar-foreground

#0a0a0a

sidebar-primary

#171717

sidebar-primary-foreground

#fafafa

sidebar-accent

#f5f5f5

sidebar-accent-foreground

#171717

sidebar-border

#e5e5e5

sidebar-ring

#a1a1a1

01 — Design Tokens

Typography Scale

Font family: Geist Sans · Geist Mono

heading/3xl

30px / 700 / lh 1.2

@type/heading/3xl

Restaurant Name

heading/2xl

24px / 700 / lh 1.3

@type/heading/2xl

Page Title

heading/xl

20px / 600 / lh 1.3

@type/heading/xl

Section Heading

heading/lg

18px / 600 / lh 1.4

@type/heading/lg

Card Title

body/base

16px / 400 / lh 1.5

@type/body/base

Body text, general content

body/sm

14px / 400 / lh 1.5

@type/body/sm

Secondary text, descriptions

label/sm

12px / 500 / lh 1.4

@type/label/sm

Label / Caption text

label/xs

10px / 500 / lh 1.4

@type/label/xs

MICRO LABEL · UPPERCASE

mono/sm

12px / 400 / lh 1.6

@type/mono/sm

console.log("code")

01 — Design Tokens

Spacing & Border Radius

Spacing Scale (4px base unit)

4px

gap-1 · p-1

8px

gap-2 · p-2

12px

gap-3 · p-3

16px

gap-4 · p-4

20px

gap-5 · p-5

24px

gap-6 · p-6

32px

gap-8 · p-8

40px

gap-10 · p-10

48px

gap-12 · p-12

64px

gap-16 · p-16

80px

gap-20 · p-20

96px

gap-24 · p-24

Border Radius

sm

6px

$radius/sm

rounded-sm

md

8px

$radius/md

rounded-md

lg

0.625rem

$radius/lg

rounded-lg

xl

14px

$radius/xl

rounded-xl

full

9999px

$radius/full

rounded-full

02 — Components

Button

components/ui/button.tsx

Variants

#Button/Primary/Default

#Button/Outline/Default

#Button/Secondary/Default

#Button/Ghost/Default

#Button/Link/Default

States

#Button/Primary/Default

#Button/Primary/Hover

#Button/Primary/Disabled

Sizes

#Button/Size/Small

#Button/Size/Default

#Button/Size/Large

#Button/Icon/Default

#Button/Avatar/Default

04 — Form Inputs

Input Fields

Placeholder text

#Input/Default

Input value

#Input/Focused

Alex Chen

#Input/WithValue

US +1

#Input/Dropdown

1234 5678 9012 3456

#Input/CreditCard

03/28

#Input/Expiry

•••

#Input/CVV