Brand Book — v1.0
A cosmic design system for Find Events Today. Aurora is the primitive — every live event a small bioluminescence on a turning planet.
OKLCH perceptually uniform tokens
surfaces
Background
--color-bg
Page canvas, void indigo
Surface
--color-surface
Cards, raised UI
Elevated
--color-surface-elevated
Modals, popovers
Border
--color-border
Dividers, outlines
Border subtle
--color-border-subtle
Faint separations
text
Text primary
--color-text
Body, headings, glacial white
Text secondary
--color-text-sub
Captions, supporting
Text muted
--color-text-muted
Disabled, placeholder
brand
Accent — Aurora
--color-accent
Primary CTA, live events, focus
Secondary — UV
--color-secondary
Tags, secondary actions
Highlight — Ice
--color-highlight
Trending, special states
semantic
Warning
--color-warning
Solar warning
Error
--color-error
Coral error
Layered radials, the brand's emotional core
Aurora
--g-aurora
Hero backgrounds — slow drift animated
Nebula
--g-nebula
CTA buttons, featured states
Dot Glow
--g-dot
Globe event markers, pulse
Fraunces · Sora · Manrope · JetBrains Mono
Display — Fraunces
The world is happening
Body — Sora
Discover events, festivals, theatres, and cultural venues from every corner of the globe. Aurora dots pulse on a rotating planet — each one a happening somewhere right now.
Detail — Manrope
Featured · Tonight only
Used for badges, chips, micro-captions, table headers, breadcrumbs, button labels, and any moment where Sora is too heavy and Mono is too technical.
Mono — JetBrains Mono
45.8150° N · 15.9819° E — 15.07.2026 · 20:00 CEST
Type scale (1.25 ratio)
Tabler · outline · 1.75 stroke width
Library
@tabler/icons-react
Stroke
1.75 (fixed, brand)
Default size
20px (16, 24, 32 also valid)
Usage
import Icon from "@/components/Icon";
import { IconCalendar } from "@tabler/icons-react";
<Icon icon={IconCalendar} size={20} />0.25rem base, deliberate rhythm
cubic-bezier easing, drift over linear
Tap response
Hover, focus
Layout shifts
Page transitions
Aurora background
The thing no template has
Aurora Pulse
Stroke-first. Hover reveals. No gradient noise.
Stroke Pill
.cta-stroke · fills on hover from bottom
Stroke Accent
.cta-stroke-accent · radial scale fill
Arrow Link
.cta-arrow · underline + arrow slide
Underline Reveal
.cta-underline · L→R sweep
Glow Stroke
.cta-glow · aurora bloom on hover
Magnetic
.cta-magnetic · subtle scale, large gesture
Solid Mint
.cta-solid · for primary single actions
Icon Circle
.cta-icon · for nav, share, settings
Live tonight
48.2082° N · 16.3738° E
Musikverein Wien · 20 Jun · 19:30