Foundations

Design tokens

The neutral token palette, type scale, spacing/radius, iconography, and brand marks shared across every tier of the platform. Everything below renders from live Tailwind classes and CSS variables — toggle the theme in the sidebar to see it respond.

Color tokens

Tailwind/shadcn semantic tokens plus the FAAR brand tokens — reference these classes, never hardcode hex/oklch.

Surfaces

Default app chrome (both tiers).

background
bg-background
foreground
bg-foreground
card
bg-card
muted
bg-muted
border
bg-border
ring
bg-ring

Semantic

Intent colors.

primary
bg-primary
secondary
bg-secondary
accent
bg-accent
destructive
bg-destructive

Brand — FAAR identity

signal = accent (CTA/focus/the “F”); chassis = the dark branded surface (auth/hero).

signal
bg-signal
chassis
bg-chassis
chassis-muted
text-chassis-muted
chassis-border
bg-chassis border border-chassis-border

These swatches are the dark-mode reference too — there is no separate dark grid. Use the theme toggle in the sidebar to see the neutral and semantic tokens (Surfaces, Semantic) resolve to their `.dark` value live.

The brand tokens (signal, chassis) are intentionally theme-invariant — they have no `.dark` override, since they’re fixed brand surfaces (the “F” accent, the branded auth/hero panel) rather than adaptive UI chrome.

Typography

Three families: Geist (sans, default body/UI), Space Grotesk (display/heading — font-display), Geist Mono (font-mono — code, identifiers, eyebrows).

Display — Space GroteskFAAR
H1 — 2xl semiboldHeading 1
H2 — xl semiboldHeading 2
H3 — lg semiboldHeading 3
Body — smThe quick brown fox jumps over the lazy dog.
Muted — smSecondary descriptive copy.
Mono — Geist Mono118RG · uuid · code
Eyebrow — mono uppercase trackedSection kicker

Spacing & radius

Live radius scale and the gap rhythm used across layout.

Radius scale

rounded-sm
rounded-md
rounded-lg
rounded-xl
rounded-2xl
rounded-3xl
rounded-4xl

Spacing rhythm

gap-1
gap-2
gap-3
gap-4
gap-6
gap-8

Iconography

lucide-react, stroke-based, 2px stroke default. size-4 is the standard inline/button size; size-5 for section headers and emphasis.

size-4 (default)

Gauge
Car
Truck
Fuel
ShieldCheck
Users
Building2
CreditCard
MapPin
Bot
Wrench
Tag

size-5

Gauge
Car
Truck
Fuel
ShieldCheck
Users
Building2
CreditCard
MapPin
Bot
Wrench
Tag

Brand

The FAAR mark is typographic — there is no SVG logo. The canonical mark is the letter “F” set in font-display, colored with the signal token.

Type mark

F

Wordmark lockups

On light surfaces and on the `bg-chassis` branded panel (auth screens, hero sections).

FAAR

FaarBUSINESS

FAAR Driver

FAAR

FaarBUSINESS

FAAR Driver

Voice & tone

How FAAR copy reads across surfaces.

Sentence case everywhere — headings, labels, buttons, empty states. Never Title Case, never ALL CAPS in running copy.

Micro-labels (section kickers, badges, table column groups) are the one exception: set them in mono, uppercase, tracked wide — the eyebrow style from the type scale above.

Register shifts by surface: auth and invite emails are formal, addressed in Croatian (HR) — they represent the company to people outside the product. The EN console is direct and plain — operators are inside the tool, working fast.

Error copy is friendly and specific: say what happened and what to do next, never a bare status code or stack trace. Prefer “Couldn’t save — check the VIN and try again” over “Error 422”.