Typography
The typographic system defines font families, scale, weights, line heights, and letter spacing used across the entire platform. Every value is intentional and optimized for dense data-rich interfaces.
Font Families
The system uses two typefaces: Inter for all user interface text and JetBrains Mono for code, data values, and monospaced content.
Inter — UI Text
Aa Bb Cc
font-family: 'Inter', -apple-system, sans-serif
300
The quick brown fox jumps over the lazy dog
400
The quick brown fox jumps over the lazy dog
500
The quick brown fox jumps over the lazy dog
600
The quick brown fox jumps over the lazy dog
700
The quick brown fox jumps over the lazy dog
USAGE
All headings, body text, labels, buttons, navigation, form fields, tooltips, table headers, sidebar links, card titles, modal text, and every other UI surface.
JetBrains Mono — Code & Data
01 23 45
font-family: 'JetBrains Mono', monospace
400
0123456789 ABCDEF abcdef
500
0123456789 ABCDEF abcdef
600
0123456789 ABCDEF abcdef
SPECIAL CHARACTERS
{} [] () <> :: => !== && || /* */ // __ -- ## $$ @@ %% ^^ ~~ `` '' ""
USAGE
Code blocks, card subtitles, version badges, table code cells, KPI values, timestamps, secret fields, IP addresses, terminal output.
/* CSS Custom Property */
--mono: 'JetBrains Mono', 'SF Mono', 'Consolas', monospace;
/* Body font stack */
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;Type Scale
The platform uses a compact, purposeful scale optimized for data-dense dashboards. Every size corresponds to a specific UI role. Base font size is 14px (body).
Page Title
Dashboard Overview
Panel Title
Server Configuration Panel
Card Title
Network Status
Sidebar Link
Monitoring & Analytics
Section Title
Network Configuration
Body
System uptime has been stable at 99.97% over the last 30 days.
Card Sub
Last updated 2 min ago · v2.4.1
Body Small
Table cell content, form labels, code inline
Sub Text
AVATAR GROUP LABEL
Micro Label
RACK UNIT LABEL
Smallest
v3.11.0
Scale Reference Table
| Size | Pixels | Weight | Role | Where Used |
|---|---|---|---|---|
1.25rem | 20px | 700 | Page title | Main page heading, docs-page-title |
0.95rem | ~15px | 700 | Panel title | Sidebar panel headings, settings panels |
0.9rem | ~14px | 700 | Card title | Card headers, modal titles, widget names |
0.84rem | ~13px | 500 | Sidebar link | Navigation sidebar links |
0.82rem | ~13px | 600 | Section title | Section headings, inline row titles |
0.78rem | ~12px | 500 | Body | Buttons, form inputs, body text, callouts |
0.75rem | ~12px | 400 | Card sub | Card subtitles, secondary descriptions (mono) |
0.72rem | ~11px | 500-600 | Small body | Table cells, form labels, code blocks, sidebar labels |
0.68rem | ~11px | 600 | Sub text | Uppercase micro labels, topbar link text |
0.65rem | ~10px | 600 | Micro label | Swatch hex values, meta info, shadow labels |
0.62rem | ~10px | 600 | Smallest | Version badges, topbar version, copy button text |
Font Weights
Five weights are loaded for Inter. Each weight has a specific role in the visual hierarchy. Avoid using weights outside this set.
Light
weight: 300
The quick brown fox jumps over the lazy dog
Rarely used
Regular
weight: 400
The quick brown fox jumps over the lazy dog
Body fallback
Medium
weight: 500
The quick brown fox jumps over the lazy dog
Primary body
SemiBold
weight: 600
The quick brown fox jumps over the lazy dog
Labels, sections
Bold
weight: 700
The quick brown fox jumps over the lazy dog
Titles, headings
/* Weight assignments in the system */
font-weight: 300; /* Light — large display text only */
font-weight: 400; /* Regular — card-sub, placeholder text */
font-weight: 500; /* Medium — body text, sidebar links, buttons */
font-weight: 600; /* SemiBold — labels, section titles, sidebar labels, badges */
font-weight: 700; /* Bold — page titles, card titles, modal titles */Line Heights
Line height varies by context. Tighter values for badges and compact UI, looser values for readable paragraphs and code blocks.
line-height: 1
Tight
Active
Warning
Error
Used in badges, status dots, single-line compact elements.
line-height: 1.4
Body
Server monitoring is essential for maintaining uptime and performance. The dashboard provides real-time visibility into system health across all nodes in the cluster.
Used for body text in cards, table cells, inline descriptions.
line-height: 1.5
Default
The Coconut Design System provides a comprehensive set of UI components, design tokens, and layout patterns. It is optimized for data-dense dashboards and monitoring interfaces where information density must be balanced with readability.
Global default. Used for paragraphs, page descriptions, general text.
line-height: 1.6
Relaxed
$ npm install @coconut/design-system
$ npm run build
# Server started on port 3000
Used for code blocks, callout content, accordion body text.
/* Line height assignments */
line-height: 1; /* Badges, single-line compact elements */
line-height: 1.4; /* Body text in cards and tables */
line-height: 1.5; /* Global default (set on body) */
line-height: 1.6; /* Code blocks, callouts, accordion body */Letter Spacing
Subtle letter spacing adjustments improve readability at small sizes and give uppercase labels the breathing room they need.
0.01em
Body default
System uptime has been stable at 99.97% over the last 30 days. All services operating normally.
Set on body element
0.02em
Buttons, labels
CARD LABEL
Buttons, card labels
0.03em
Section titles
Section Title — Sidebar Labels
SIDEBAR SECTION LABEL
Section titles, sidebar
0.04em
Micro labels
NOTIFICATION SOURCE
MICRO LABEL
AVATAR GROUP
Uppercase micro text
/* Letter spacing scale */
letter-spacing: 0.01em; /* Body default — set on body element */
letter-spacing: 0.02em; /* Buttons, card labels, table headers */
letter-spacing: 0.03em; /* Section titles, sidebar labels, version badge */
letter-spacing: 0.04em; /* Notification sources, uppercase micro labels */Monospace Usage
JetBrains Mono is used for all data-oriented content where character alignment matters. It is applied via the var(--mono) CSS custom property.
Code Blocks
# Install deps
$ npm install
$ npm run build
$ npm install
$ npm run build
font-size: 0.72rem
Card Subtitles
Server Status
Last updated 2 min ago
font-size: 0.75rem
Version Badges
v3.11.0
stable
beta
font-size: 0.62rem
Table Code Cells
| Type | service |
| Port | 8443 |
| Protocol | https |
font-size: 0.72rem
KPI Values & Timestamps
Uptime
99.97%
Last Check
2026-03-03 14:32:07
font-size: varies
Secret Fields & IPs
••••••••••••
API Key
srv-prod-01
Hostname
a348cd4e-9f12
Tunnel ID
font-size: 0.72rem
/* Apply mono font via CSS custom property */
font-family: var(--mono);
/* Common mono patterns */
.card-sub { font-family: var(--mono); font-size: 0.75rem; }
.cmd-block { font-family: var(--mono); font-size: 0.72rem; line-height: 1.6; }
.secret { font-family: var(--mono); font-size: 0.72rem; }
.version-tag { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.03em; }Antialiasing
Font smoothing is applied globally on the body element to ensure consistent rendering across browsers and operating systems. This produces thinner, crisper text that matches macOS-native rendering.
With Antialiasing (default)
Server Configuration
The dashboard provides real-time visibility into system health. All metrics are updated every 30 seconds with sub-pixel rendering optimized for clarity.
srv-prod-01 · v2.4.1 · 2026-03-03
Without Antialiasing
Server Configuration
The dashboard provides real-time visibility into system health. All metrics are updated every 30 seconds with sub-pixel rendering optimized for clarity.
srv-prod-01 · v2.4.1 · 2026-03-03
/* Applied globally on body */
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* These properties produce thinner, crisper text on macOS and iOS.
On Windows/Linux, text rendering uses system defaults.
Always use antialiased for dashboard-style interfaces. */Quick Reference
Copy-paste-ready CSS for the most common typographic patterns used across the platform.
| Element | Font | Size | Weight | Spacing | Line H. |
|---|---|---|---|---|---|
| Page title | Inter | 1.25rem |
700 | -0.01em |
1.4 |
| Card title | Inter | 0.9rem |
700 | 0.01em |
1.4 |
| Section title | Inter | 0.82rem |
600 | 0.03em |
1.4 |
| Body text | Inter | 0.78rem |
500 | 0.01em |
1.5 |
| Button | Inter | 0.78rem |
600 | 0.02em |
1 |
| Label / Caption | Inter | 0.72rem |
600 | 0.02em |
1.4 |
| Card subtitle | JetBrains Mono | 0.75rem |
400 | 0.01em |
1.4 |
| Code block | JetBrains Mono | 0.72rem |
400 | 0.01em |
1.6 |
| Version badge | JetBrains Mono | 0.62rem |
600 | 0.03em |
1 |