Everything you need to talk about Chalkline.
Logos, colors, typography. For internal teams, partners, press, and anyone building a deck, a slide, or a campaign that mentions us. All logo assets are SVG — they scale to any size, open in any modern design tool or browser, and render crisp on every screen.
Logo system.
Three formats — mark, wordmark, and full lockup — each available in chalk-green, white, and ink. The mark works at any size; never reconstruct it manually. Always preserve clear space equal to the height of the mark on every side.
Palette.
Chalk-green anchors the brand — a brighter, system-aligned descendant of the original Chalkline lime. The five-color spectrum (chalk-green → cyan → indigo → violet → pink) is used in diagrams, suite cards, lifecycle stages, and the property map. Click any swatch to copy its hex value.
Primary
Spectrum
Spectrum · deep variants
Used as left-side gradient stops for the Sankey flows and deep accents.
Neutrals
Type.
Two typefaces, both free on Google Fonts. Use DM Sans for everything editorial — headlines, body, UI. Reserve JetBrains Mono for technical voice — labels, captions, data, code.
DM Sans
Display + body + wordmark Get on Google Fonts ↗Aa Bb Cc 0123
Light · 300
Regular · 400
Medium · 500
Semibold · 600
Bold · 700
Extra Bold · 800
Black · 900 · wordmark
JetBrains Mono
Technical voice · labels · data Get on Google Fonts ↗Aa Bb Cc 0123
Light · 300
Regular · 400
Medium · 500
Semibold · 600
Tokens.
The CSS custom properties every Chalkline surface builds on — light theme, accessible on-light colors, status states, the radius scale, and fluid type. Structured for machines too: design-tokens.json mirrors every value below.
Light theme
Add data-theme="light" to any container to switch. The dark palette
stays the default everywhere else — this panel is live, not a screenshot.
bg-page#F2F5F4
surface-recessed#F7F9F8
surface-card#FFFFFF
surface-inset#EEF2F1
surface-track#E7ECEA
Primary
Body
Muted
Faint
Strong border
Accessible on-light spectrum
4.5:1+ verified against #FFFFFF and #F2F5F4. Click a swatch to copy.
Status
● Success
● Neutral
● Error
Radius scale
xs
4px
4px
sm
6px
6px
md
8px
8px
lg
10px
10px
pill
999px
999px
device
38px
38px
Fluid type
Scales with viewport width — no breakpoint needed. Resize the window to watch it move.
--fs-eyebrow · clamp(11px, 2.6vw, 13px)
Mobile-safe eyebrow label
--fs-body-sm · clamp(15px, 3.6vw, 16px)The mobile-safe body size used across dense, phone-width layouts like the operator console.
--fs-display · clamp(52px, 7vw, 76px) · --ls-heading -0.02emGet heads to nod.
| Token | Dark | Light | Role |
|---|---|---|---|
--bg-page | #07100E | #F2F5F4 | Page background |
--surface-recessed | #0C1614 | #F7F9F8 | Recessed sections |
--surface-card | #0B1817 | #FFFFFF | Card backgrounds |
--surface-inset | #122120 | #EEF2F1 | Inset panels |
--surface-track | #0C1614 | #E7ECEA | Progress/toggle tracks |
--text-primary | #EFF6F4 | #07100E | Primary text |
--text-body | #C9D8D4 | #2A3835 | Body text |
--text-muted | #8FA4A0 | #5C6E6A | Muted / captions |
--text-faint | #5C6E6A | #8FA4A0 | Lowest-emphasis text |
--border-hairline | rgba(238,248,246,.08) | #D9E0DE | Default border |
--border-strong | rgba(238,248,246,.14) | #C3CCC9 | Emphasized border |
--status-success-bg / -text | #E3F6E7 / #14652A | Success badge | |
--status-neutral-bg / -text | #EEF2F1 / #5C6E6A | Neutral badge | |
--status-error-bg / -text | #FDEDED / #B91C1C | Error badge | |
--radius-xs … --radius-device | 4 / 6 / 8 / 10 / 999 / 38px | Corner-radius scale | |
--fs-eyebrow | clamp(11px, 2.6vw, 13px) | Fluid eyebrow/label | |
--fs-body-sm | clamp(15px, 3.6vw, 16px) | Fluid mobile body | |
--fs-display | clamp(52px, 7vw, 76px) | Persuasive full-screen statements | |
--ls-heading | -0.02em | Letter-spacing for Display text | |