Style guide

Single source of truth: src/styles/theme.ts (Plus Jakarta Sans, warm dark surfaces, gold accent) plus shared surfaces in surfaceStyles.ts. Layout applies mainBackdrop to the page shell. Component variants and stories also live in Storybook.

Typography

theme.fontFamily is Plus Jakarta Sans with Inter/system fallbacks. Sizes and line heights pair via theme.fontSizes and theme.lineHeights. The Text component applies weights and tracking per variant (e.g. semibold headings, tight tracking on h1 / h2).

xs12pxlh 1.4
The quick brown fox jumps over the lazy dog
sm14pxlh 1.5
The quick brown fox jumps over the lazy dog
base16pxlh 1.5
The quick brown fox jumps over the lazy dog
lg18pxlh 1.6
The quick brown fox jumps over the lazy dog
xl20pxlh 1.6
The quick brown fox jumps over the lazy dog
2xl24pxlh 1.45
The quick brown fox jumps over the lazy dog
3xl30pxlh 1.35
The quick brown fox jumps over the lazy dog
4xl36pxlh 1.2
The quick brown fox jumps over the lazy dog
5xl48pxlh 1.08
The quick brown fox jumps over the lazy dog
6xl56pxlh 1.05
The quick brown fox jumps over the lazy dog

Text component variants

Heading levels, body, and caption styles from the shared Text component (variant prop).

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Body paragraph, default copy style.

Caption / secondary

Eyebrow

Marketing label for heroes and sections. The component applies text-transform: uppercase, letter-spacing, and color. Use variant="accent" or neutral (src/components/Eyebrow.tsx), matching the homepage.

Accent eyebrow

Section title

Supporting line.

Neutral eyebrow

Another block

Muted label + heading + body.

Color

Semantic UI colors from theme.colors: cream primary text, warm dark surfaces, border, and gold accent / blue[500-700] for buttons, links, and focus. Tints in surfaceStyles use the same family.

primary#f7f1ec
secondary#9a8f8a
muted#7a706c
background#1a1210
surface#241c1a
borderrgba(255, 255, 255, 0.1)
success#34c759
error#e85a4f
warning#f5c042
ink#1a1210
accent#f5c042
coral#e85a4f
blue.500#f5c042
blue.600#e0ab30
blue.700#c99520
gray.600#7a706c
white#ffffff

Spacing

theme.spacing covers padding, gaps, and layout rhythm.

xs4px
sm8px
md16px
lg24px
xl32px
2xl48px
3xl64px

Shadows

theme.shadows backs cards, nav, and elevated panels.

sm
0 1px 2px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.25)
md
0 4px 12px rgba(0, 0, 0, 0.28), 0 2px 4px rgba(0, 0, 0, 0.2)
lg
0 12px 40px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.22)
nav
0 1px 0 rgba(255, 255, 255, 0.06), 0 4px 24px rgba(0, 0, 0, 0.25)

Border radius

Corner radii from theme.borderRadius for cards, inputs, and panels.

sm8px
md14px
lg20px
xl28px
full9999px

Buttons

Shared Button variants: primary, secondary, outline, ghost, muted, and pagination. Sizes are small, medium, and large.

Text input

Shared TextInput uses the theme border, radius, and focus ring (accent). Pair with Button in a flex row for search-style UIs.