Ticker Cerulean

About 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.

Color

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).

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.

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.

Elevation

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.

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.

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.
• Show focus with a 2px ring (brand.500 light, brand.400 dark) offset 2px from the control on every button, input and badge link.
• 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.
• 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.
• 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.
• Pair every success, warning and destructive fill with an icon or text label so status never relies on color alone.
• 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 introduce warm or cool greys. Surfaces, borders and muted text use only the untinted neutral ramp.
• 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 set Bricolage Grotesque below 20px, in body copy, or in all caps.
• Don't exceed radius.lg (12px) on cards or radius.md (8px) on buttons and inputs. Use radius.full only on badges.
• 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.