clamp(40px → 60px) · 600 · 1.0 · -0.02em
Typically on <h1> · page-defining hero headline
Internal tool
Pico Design System
Live view of the canonical tokens. Every swatch reads directly from
resources/css/tailwind.css —
if a token changes there, this page updates next render.
Source spec: /design/DESIGN.md
Colors
Surfaces
surface
#FFFFFF
surface-secondary
#FAFAFA
surface-tertiary
#F2F2F2
surface-dark
#1A1A1A
surface-dark-secondary
#2A2A2A
Text (content)
content
#000000 · primary
content-secondary
#212121 · body
content-muted
#93939F · muted
content-inverse
#FFFFFF · on dark
Borders
border
#D9D9DD
border-light
#F2F2F2
border-dark
#2A2A2A
border-focus
#FF5500 · = accent
Accents
Three Pico brand colors. accent (dark Pico blue) is the canonical primary CTA color. Orange and light blue are secondary brand accents.
Primary · accent (dark Pico blue)
accent
#00497E · primary CTA
accent-hover
#003A66 · hover
accent-light
#E6EEF5 · subtle bg
50
100
200
300
400
500
600
700
800
900
600 is the canonical default — used by bg-accent.
Secondary · accent-orange (Pico orange)
accent-orange
#FF5500 · brand emphasis
accent-orange-hover
#E64D00 · hover
accent-orange-light
#FFF1EB · subtle bg
Tertiary · accent-blue-light (light Pico blue)
accent-blue-light
#008BC4 · supporting highlight
accent-blue-light-hover
#007AAB · hover
Status
success
#2E7D5A
error
#B43E3E
warning
#F59E0B
Product family
corvil
#FF5500 · Corvil Analytics
redline
#BF2800 · Redline
services
#00497E · Market Services (= accent)
Brand dark
dark-blue
#102033 · hero band, dark sections
Typography
Proxima Nova for everything. Role names describe purpose, not HTML tag — the same role can live on different elements depending on document structure. Display / Section / Subsection scale fluidly via clamp(); smaller roles are fixed.
Display · text-display
The single trusted partner
Stat · text-stat
200Gbps
clamp(34px → 64px) · 400 · 1.0 · -0.02em
Standalone metric numbers (stats blocks)
Section · text-section
How Corvil Analytics works
clamp(28px → 40px) · 600 · 1.1 · -0.02em
Typically on <h2> · top-level section titles
Subsection · text-subsection
Pre-Trade Risk
clamp(22px → 28px) · 600 · 1.2 · -0.01em
Typically on <h3> · nested headings within a section
Card · text-card
Ultra-Low Latency Performance
20px · 600 · 1.3
Typically on <h3> or <h4> · per-card / per-item titles
Body · text-body
The standard text size for paragraphs and UI. Proxima Nova at weight 400 reads cleanly on light surfaces with content-secondary color. The system relies on size and spacing for hierarchy, not weight contrast — body intentionally sits a step lighter than headline black so the eye finds structure without bold.
18px · 400 · 1.5 · content-secondary
Typically on <p>, <li>, <a> in prose · default body text
Caption · text-caption
Small descriptive text in muted color — figure captions, footnotes, footer legal links, secondary metadata under a card title.
16px · 400 · 1.4 · content-muted
Typically on <p> or <span> · captions, footnotes, footer links
Label · text-label
How it works · industries · features
14px · 500 · 1.4 · 0.06em tracking · mono
Typically on <p> or <span> · eyebrow labels, column headers, taxonomy markers
Color rules
- Headings (Display / Section / Subsection / Card):
text-content— pure black (#000) - Body paragraphs:
text-content-secondary— near-black (#212121) - Captions, labels, muted UI:
text-content-muted(#93939F) - Inline links in prose:
text-accentwithunderline
Element ≠ role
HTML tags are about document structure (SEO, accessibility). Role tokens are about visual treatment. A page section heading on an <h2> uses text-section — the tag stays semantic, the class drives appearance.
Radius
8px is the canonical Pico signature. rounded, rounded-md, and rounded-lg all resolve to 8px on components. xl and above are reserved for non-component containers.
rounded-sm
4px · tags, badges
rounded · md · lg
8px · signature ✓
rounded-xl
12px · large containers
rounded-full
9999px · pills, chips
Cards
Subtle border, emphasized border, and dark band variants — all 8px radius.
Subtle card
8px radius, 24px padding, border-light (#F2F2F2). No shadow.
Emphasized card
Same radius and padding, border (#D9D9DD).
Dark band
dark-blue (#102033) for hero bands and dramatic dark sections.
Spacing scale
4px base unit. Cards 24–32px padding · sections 64–96px vertical.
4px
8px
12px
16px
20px
24px
32px
40px
48px
64px
80px
96px
128px
Fonts
Single typeface (Proxima Nova) plus system mono fallback.
Sans · Display · UI
Proxima Nova
proxima-nova, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
Loaded via Adobe Typekit kit ree8bph
Mono · Code · Labels
monospace
SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
System mono — no font file loaded
