Brand Book — v1.0

Ultraviolet
Observatory

A cosmic design system for Find Events Today. Aurora is the primitive — every live event a small bioluminescence on a turning planet.

01

Color

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

02

Signature Gradients

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

03

Typography

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)

Hero · 88pxAurora over Zagreb
Display · 64pxAurora over Zagreb
4XL · 46pxAurora over Zagreb
3XL · 36pxAurora over Zagreb
2XL · 28pxAurora over Zagreb
XL · 22pxAurora over Zagreb
Base · 16pxAurora over Zagreb
SM · 14pxAurora over Zagreb
XS · 12pxAurora over Zagreb
04

Icons

Tabler · outline · 1.75 stroke width

calendar
map-pin
search
ticket
world
star
heart
bookmark
share
clock
music
masks-theater
ball-football
camera
arrow-left
arrow-right
arrow-up
arrow-down
filter
language
user
settings

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} />
05

Spacing

0.25rem base, deliberate rhythm

space-1
0.25rem
space-2
0.5rem
space-3
0.75rem
space-4
1rem
space-6
1.5rem
space-8
2rem
space-12
3rem
space-16
4rem
space-24
6rem
06

Motion

cubic-bezier easing, drift over linear

--duration-instant100ms

Tap response

--duration-fast200ms

Hover, focus

--duration-normal350ms

Layout shifts

--duration-slow600ms

Page transitions

--duration-drift12s

Aurora background

07

Signature Element

The thing no template has

Aurora Pulse

Layered radial gradients drifting in OKLCH — every live event sends a pulse across the sky.

08

CTAs

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

Vienna Philharmonic — Beethoven Night

48.2082° N · 16.3738° E

Musikverein Wien · 20 Jun · 19:30

Details