Brand System

Luxury modern and dark premium palette.

Option A is the default. To enable Option B, add theme-dark-premium to the body element.

Main Colors

Background (A)

#F3F0E8

Main Text (A)

#1E1E1C

Primary (A)

#1E1E1C

On Primary (A)

#FAF9F6

Accent

#D8A24A

Secondary Accent

#A97B50

Section Contrast (B)

#2A2B29

Spacing System

Use these sizes everywhere

Small UI details use `2-4`, card and section spacing usually uses `6-12`, and big hero areas can use `16`.

space-2

p-2 / gap-2

8px

space-3

p-3 / gap-3

12px

space-4

p-4 / gap-4

16px

space-6

p-6 / gap-6

24px

space-8

p-8 / gap-8

32px

space-10

p-10 / gap-10

40px

space-12

p-12 / gap-12

48px

space-16

p-16 / gap-16

64px

Simple Rule

Use `gap-4` for tight rows, `gap-6` for normal cards, `gap-8` or `gap-10` for larger sections, and `py-12` or more for page blocks.

Navbar Spacing

Header height

h-20

80px

Left/right padding

px-6

24px mobile

Tablet padding

sm:px-8

32px tablet

Desktop padding

lg:px-12

48px desktop

Logo height

h-8

32px

For this navbar, the easiest rule is: `h-20` for the bar, `px-6` on mobile, `px-8` on tablet, `px-12` on desktop, and keep the logo at `h-8`.