---
version: alpha
name: Ticker Cerulean
description: "Retro-modern fintech UI: teletext-era cerulean, hard-offset shadows and chunky grotesque headlines on true-neutral surfaces with modern spacing."
colors:
  background: "#fafafa"
  foreground: "#121212"
  card: "#ffffff"
  card-foreground: "#121212"
  popover: "#ffffff"
  popover-foreground: "#121212"
  primary: "#0f6d98"
  primary-foreground: "#ffffff"
  secondary: "#f2f2f2"
  secondary-foreground: "#222222"
  muted: "#f2f2f2"
  muted-foreground: "#666666"
  accent: "#d8eef8"
  accent-foreground: "#0f3649"
  destructive: "#bf2535"
  destructive-foreground: "#ffffff"
  success: "#176640"
  success-foreground: "#ffffff"
  warning: "#fbdf85"
  warning-foreground: "#433000"
  border: "#e2e2e2"
  input: "#a8a8a8"
  ring: "#1c88b8"
  dark-background: "#121212"
  dark-foreground: "#fafafa"
  dark-card: "#222222"
  dark-card-foreground: "#fafafa"
  dark-popover: "#222222"
  dark-popover-foreground: "#fafafa"
  dark-primary: "#46a6d3"
  dark-primary-foreground: "#0a2330"
  dark-secondary: "#363636"
  dark-secondary-foreground: "#f2f2f2"
  dark-muted: "#363636"
  dark-muted-foreground: "#a8a8a8"
  dark-accent: "#0f3649"
  dark-accent-foreground: "#d8eef8"
  dark-destructive: "#f66269"
  dark-destructive-foreground: "#36050b"
  dark-success: "#4cb97d"
  dark-success-foreground: "#062315"
  dark-warning: "#dcae1f"
  dark-warning-foreground: "#2a1d00"
  dark-border: "#4d4d4d"
  dark-input: "#666666"
  dark-ring: "#46a6d3"
typography:
  display-lg:
    fontFamily: Bricolage Grotesque
    fontSize: 56px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -0.03em
  display-md:
    fontFamily: Bricolage Grotesque
    fontSize: 40px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -0.025em
  heading-lg:
    fontFamily: Bricolage Grotesque
    fontSize: 28px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -0.015em
  heading-md:
    fontFamily: Bricolage Grotesque
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: -0.01em
  heading-sm:
    fontFamily: Figtree
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.4
  body-lg:
    fontFamily: Figtree
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.6
  body-md:
    fontFamily: Figtree
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.55
  body-sm:
    fontFamily: Figtree
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
  label:
    fontFamily: Figtree
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: 0.005em
  caption:
    fontFamily: Figtree
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.02em
  code:
    fontFamily: JetBrains Mono
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  sm: 4px
  md: 8px
  lg: 12px
  xl: 16px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 20px
    height: 44px
  button-secondary:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.secondary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 20px
    height: 44px
  button-destructive:
    backgroundColor: "{colors.destructive}"
    textColor: "{colors.destructive-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 20px
    height: 44px
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.foreground}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: 0 12px
    height: 44px
  card:
    backgroundColor: "{colors.card}"
    textColor: "{colors.card-foreground}"
    rounded: "{rounded.lg}"
    padding: 24px
  popover:
    backgroundColor: "{colors.popover}"
    textColor: "{colors.popover-foreground}"
    rounded: "{rounded.lg}"
    padding: 12px
  helper-text:
    backgroundColor: "{colors.background}"
    textColor: "{colors.muted-foreground}"
    typography: "{typography.body-sm}"
  table-row-alt:
    backgroundColor: "{colors.muted}"
    textColor: "{colors.muted-foreground}"
    typography: "{typography.body-sm}"
    height: 44px
  badge:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.accent-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
  badge-success:
    backgroundColor: "{colors.success}"
    textColor: "{colors.success-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
  badge-warning:
    backgroundColor: "{colors.warning}"
    textColor: "{colors.warning-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
  badge-destructive:
    backgroundColor: "{colors.destructive}"
    textColor: "{colors.destructive-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
  button-primary-dark:
    backgroundColor: "{colors.dark-primary}"
    textColor: "{colors.dark-primary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 20px
    height: 44px
  button-secondary-dark:
    backgroundColor: "{colors.dark-secondary}"
    textColor: "{colors.dark-secondary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 20px
    height: 44px
  button-destructive-dark:
    backgroundColor: "{colors.dark-destructive}"
    textColor: "{colors.dark-destructive-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 20px
    height: 44px
  input-dark:
    backgroundColor: "{colors.dark-background}"
    textColor: "{colors.dark-foreground}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: 0 12px
    height: 44px
  card-dark:
    backgroundColor: "{colors.dark-card}"
    textColor: "{colors.dark-card-foreground}"
    rounded: "{rounded.lg}"
    padding: 24px
  popover-dark:
    backgroundColor: "{colors.dark-popover}"
    textColor: "{colors.dark-popover-foreground}"
    rounded: "{rounded.lg}"
    padding: 12px
  helper-text-dark:
    backgroundColor: "{colors.dark-background}"
    textColor: "{colors.dark-muted-foreground}"
    typography: "{typography.body-sm}"
  table-row-alt-dark:
    backgroundColor: "{colors.dark-muted}"
    textColor: "{colors.dark-muted-foreground}"
    typography: "{typography.body-sm}"
    height: 44px
  badge-dark:
    backgroundColor: "{colors.dark-accent}"
    textColor: "{colors.dark-accent-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
  badge-success-dark:
    backgroundColor: "{colors.dark-success}"
    textColor: "{colors.dark-success-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
  badge-warning-dark:
    backgroundColor: "{colors.dark-warning}"
    textColor: "{colors.dark-warning-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
  badge-destructive-dark:
    backgroundColor: "{colors.dark-destructive}"
    textColor: "{colors.dark-destructive-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
---

# Ticker Cerulean

## Overview

Ticker Cerulean is for money apps that want personality and still need to read as trustworthy. It borrows three cues from 70s/80s print and early terminal software: one saturated cerulean, grotesque display headlines, and zero-blur offset shadows. Spacing, contrast and type sizes follow current practice. Text pairs hold at least 4.5:1 in both modes, and most hold 5:1 or more, so the retro cues never compete with reading balances and amounts.

Moods: retro, confident, playful, clear. Built for: fintech, banking, payments. Density: comfortable.

Every color has a light value and a dark value. Tokens named `dark-*` are the dark-mode counterparts of the token with the same role name.

## Colors

Cerulean (OKLCH hue about 230) is the only action color. It is used for primary, links, ring and selected states. Primary is brand.600 #0f6d98 in light mode: 5.7:1 with white text and 5.5:1 against background. In dark mode primary is brand.400 #46a6d3: 6.8:1 against background and 5.9:1 with brand.950 text. Neutrals are deliberately untinted grey, so cerulean stays the only chromatic voice. Status hues sit far from the brand. Danger is a clear red, more than 40 CIEDE2000 units from primary in both modes. Success is a deep emerald (success.700 in light mode, 7:1 with white). Warning is a 70s mustard fill (warning.200 light, warning.400 dark) with warning.900 or warning.950 text. Both status hues hold their chroma at steps 400–700 like the brand ramp, so the five ramps read as one family. muted-foreground is neutral.600 in light mode (5.5:1 on background, 5.1:1 on muted). In dark mode it is neutral.400 #a8a8a8 (7.4:1 on background, 5.1:1 on muted).

- **Primary** `#0f6d98` / dark `#46a6d3`: the single action color. Primary buttons, links, focus ring.
- **Background / Foreground** `#fafafa` / dark `#121212` on `#121212` / dark `#fafafa`: page surface and body text.
- **Card** `#ffffff` / dark `#222222`: raised surfaces.
- **Secondary** `#f2f2f2` / dark `#363636`: secondary buttons and quiet controls.
- **Muted** `#f2f2f2` / dark `#363636` with **muted-foreground** `#666666` / dark `#a8a8a8`: helper text, table stripes, disabled-looking surfaces.
- **Accent** `#d8eef8` / dark `#0f3649`: highlights, selected rows, badges.
- **Destructive** `#bf2535` / dark `#f66269`, **Success** `#176640` / dark `#4cb97d`, **Warning** `#fbdf85` / dark `#dcae1f`: status only, always paired with an icon or label.
- **Border** `#e2e2e2` / dark `#4d4d4d`, **Input** `#a8a8a8` / dark `#666666`, **Ring** `#1c88b8` / dark `#46a6d3`.

All text/background pairs above pass WCAG AA (4.5:1) in both modes; this is checked automatically at build time.

## Typography

The scale uses a 1.4 ratio for display and headings: 20, 28, 40, 56px. Text sizes step 12, 14, 16, 18px. Bricolage Grotesque (600/700) sets display-lg, display-md, heading-lg and heading-md, at 20px and above only. Tracking tightens as size grows: -0.01em at 20px, -0.015em at 28px, -0.025em at 40px, -0.03em at 56px. Figtree (400–700) sets heading-sm, body, label and caption. body-md is 16px with 1.55 line height. JetBrains Mono (400/500) sets the code style at 14px for account numbers, IBANs and transaction IDs.

- Display: **Bricolage Grotesque** (fallback system-ui, sans-serif)
- Interface: **Figtree** (fallback system-ui, sans-serif)
- Mono: **JetBrains Mono** (fallback ui-monospace, monospace)

| Token | Font | Size | Line height | Weight |
|---|---|---|---|---|
| display-lg | Bricolage Grotesque | 56px | 1.05 | 700 |
| display-md | Bricolage Grotesque | 40px | 1.1 | 700 |
| heading-lg | Bricolage Grotesque | 28px | 1.2 | 600 |
| heading-md | Bricolage Grotesque | 20px | 1.3 | 600 |
| heading-sm | Figtree | 16px | 1.4 | 700 |
| body-lg | Figtree | 18px | 1.6 | 400 |
| body-md | Figtree | 16px | 1.55 | 400 |
| body-sm | Figtree | 14px | 1.5 | 400 |
| label | Figtree | 14px | 1.3 | 600 |
| caption | Figtree | 12px | 1.4 | 500 |
| code | JetBrains Mono | 14px | 1.5 | 400 |

## Layout

Comfortable density on a 4px grid. Content max-width is 1200px. Cards use space.6 (24px) padding. Buttons and inputs are 44px tall. Page sections are separated by space.12–space.16 (48–64px) gaps instead of rules.

Spacing uses a 4px base: xs = 4px, sm = 8px, md = 16px, lg = 24px, xl = 32px, 2xl = 48px, 3xl = 64px.

## Elevation & Depth

Elevation is graphic: hard offsets with 0 blur, like print misregistration. shadow.sm (2px offset) plus a 1px border is used on cards and buttons. shadow.md (3px) is for menus and popovers, and shadow.lg (6px) is for dialogs. Dark surfaces absorb the offset shadow, so in dark mode separation comes from card neutral.900 on background neutral.950 and from the neutral.700 border.

- sm: `2px 2px 0 rgba(18, 18, 18, 0.16)`
- md: `3px 3px 0 rgba(18, 18, 18, 0.2)`
- lg: `6px 6px 0 rgba(18, 18, 18, 0.24)`

## Shapes

Moderate rounding: radius.md (8px) on buttons and inputs, radius.lg (12px) on cards. This is an 80s software window softened for today. radius.full is used only for badges and status chips.

Radius scale: sm 4px, md 8px, lg 12px, xl 16px, full 9999px.

## Components

Components ending in `-dark` are the dark-mode versions. Button: 44px tall, 20px horizontal padding, label type. Input: 44px tall with a 1px input-colored border; focus shows a 2px ring in the ring color. Card: 24px padding, 1px border, sm shadow. Badge: pill, caption type.

## Do's and Don'ts

- **Do:** Use one primary button per view: brand.600 with white text in light mode, brand.400 with brand.950 text in dark mode. Make other actions secondary or ghost.
- **Do:** Show focus with a 2px ring (brand.500 light, brand.400 dark) offset 2px from the control on every button, input and badge link.
- **Do:** Use Bricolage Grotesque only for display-lg, display-md, heading-lg and heading-md (20px and above). Use Figtree for heading-sm, body, label and caption, including all buttons and table cells.
- **Do:** Build elevation from zero-blur offsets plus a 1px border: shadow.sm for cards and buttons, shadow.md for menus and popovers, shadow.lg for dialogs. In dark mode, rely on the card (neutral.900) and border (neutral.700) for separation.
- **Do:** Set currency amounts in Figtree with font-feature-settings 'tnum' and right-align them in tables. Use the code style (JetBrains Mono 14px) for account numbers, IBANs and transaction IDs.
- **Do:** Pair every success, warning and destructive fill with an icon or text label so status never relies on color alone.
- **Do:** Keep buttons and inputs at 44px height, and separate page sections with space.12 (48px) or space.16 (64px).
- **Don't:** Don't add blur to shadows. Every shadow token keeps a 0 blur radius; soft ambient shadows remove the print-offset cue.
- **Don't:** Don't introduce warm or cool greys. Surfaces, borders and muted text use only the untinted neutral ramp.
- **Don't:** Don't use brand blue for errors or danger red for primary actions. Destructive is danger.600 in light mode and danger.400 in dark mode.
- **Don't:** Don't set Bricolage Grotesque below 20px, in body copy, or in all caps.
- **Don't:** Don't exceed radius.lg (12px) on cards or radius.md (8px) on buttons and inputs. Use radius.full only on badges.
- **Don't:** Don't use muted-foreground for text below 12px or inside accent surfaces. Accent (brand.100 light, brand.900 dark) is for selected rows and highlights, with accent-foreground text.