Overview

Brand Guide

Locked palette, typography, gradients, and component previews.

Palette

Background
#0B1020 · var(--brand-bg)
Foreground
#E6F2FF · var(--brand-fg)
Accent 1
#6366F1 · var(--brand-accent)
Accent 2
#22D3EE · var(--brand-accent-2)
Muted Text
#94A3B8 · var(--brand-muted)
Surface Card
rgba(255,255,255,.8)

Typography

Scale

H1 — Display headline

H2 — Section headline

H3 — Subheadline

Body — Use for regular content. Aim for comfortable line length (~60–80 chars).

Muted — Use sparingly for helper text and less important details.

Guidelines
  • h1: text-4xl md:text-5xl · font-extrabold
  • h2: text-3xl · font-bold
  • h3: text-2xl · font-semibold
  • body: default size · text-white/80
  • muted: text-[var(--brand-muted)]
  • Links: underline underline-offset-4 hover:no-underline

Gradients

Primary Gradient
linear 90° · var(--brand-accent) → var(--brand-accent-2)
Tilted Gradient
linear 135° · accent → accent-2
Radial Glow
radial · accent center glow

Components

Buttons
Primary Secondary Ghost Link
Cards
Surface
Standard Card

Use for content blocks and previews.

Action
Glass
Glass Card

Lower emphasis, higher transparency.

Inputs
Section Layout

Hero Block

Use accent gradients for emphasis and clear call-to-action.

Primary CTA Secondary