Style Guide

Monochromatic base — Grayscale foundation with a single accent. Leica Brass (#C9A962) is used sparingly for CTAs, hero elements, and key metrics. Soft dark default (#2D2D2D), readable contrast (soft white #ECECEC), generous white space, and bold typography. No blues, greens, or pure black/white in dark mode.

Dark mode (default) and light mode are defined in app/globals.css.

Inter for body and headings, JetBrains Mono for code. Section headlines use text-3xl sm:text-4xl md:text-5xl lg:text-6xl, with line-clamp-2 for two-line max. Body: text-base md:text-lg, leading-relaxed. Section labels: text-sm font-semibold uppercase tracking-[0.2em] text-foreground-tertiary.

Section padding: py-20 md:py-32. Container: max-w-6xl (or max-w-4xl for hero text). Card padding: p-10 md:p-12, gaps gap-12 md:gap-16. Generous space between sections and cards.

Primary CTA (Brass)

className="rounded-full bg-primary px-6 py-2.5 text-sm font-medium text-primary-foreground hover:bg-primary-hover"

Standard card

className="rounded-xl border border-border bg-surface-elevated p-4"

Section label

className="text-sm font-semibold uppercase tracking-[0.2em] text-foreground-tertiary"

Use brass for: primary CTAs, hero accent text, hero badge, key metrics, hover/focus on primary actions. Do not use for: body text, secondary buttons, borders (except brass buttons), backgrounds, or multiple elements in one view.

Text/background contrast minimum 4.5:1 (WCAG AA). All interactive elements have visible focus: focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2. Semantic HTML (heading hierarchy, section/article/nav), ARIA where needed, keyboard navigation. Body text at least 16px desktop, line-height 1.6.

• bg-background, bg-surface, bg-surface-elevated
• text-foreground, text-foreground-secondary, text-foreground-tertiary
• text-primary, bg-primary (use sparingly)
• border-border