Design system
The DESIGN.md system, rendered
Every surface in SLO Fastlane is composed from these tokens and components. Warm cream canvas, coral primary, dark navy product surfaces, serif display and humanist sans body — with a Thai sample to prove Noto Sans Thai loads: สวัสดีครับ ผู้เชี่ยวชาญ.
Colors
Brand & accent
primary
#cc785c
primaryActive
#a9583e
accentTeal
#5db8a6
accentAmber
#e8a55a
Surface
canvas
#faf9f5
surfaceSoft
#f5f0e8
surfaceCard
#efe9de
surfaceCreamStrong
#e8e0d2
surfaceDark
#181715
Text
ink
#141413
bodyStrong
#252523
body
#3d3d3a
muted
#6c6a64
mutedSoft
#8e8b82
Semantic
success
#5db872
warning
#d4a017
error
#c64545
Typography
display-xl · 64
Meet your thinking partner
display-lg · 48
Meet your thinking partner
display-md · 36
Meet your thinking partner
display-sm · 28
Meet your thinking partner
title-lg · 22
Meet your thinking partner
title-md · 18
Meet your thinking partner
body-md · 16
Meet your thinking partner
body-sm · 14
Meet your thinking partner
const slo = "JetBrains Mono on dark surface";Buttons & badges
CategoryNewFeatured
Cards & callouts
Feature card
Cream surface, one step darker than canvas. The default content card for benefit grids and dashboards.
Outline card
Canvas with a hairline border — pricing tiers and model-comparison cards use this.
Dark card
Navy product surface for code, terminal output, and admin chrome.
Ready to publish your first SLO?
The coral surface is the voltage — used generously here, scarcely on individual buttons. The CTA inside inverts to a cream button.
Radius & spacing
Radius
xs · 4px
sm · 6px
md · 8px
lg · 12px
xl · 16px
pill · 9999px
Spacing
xxs · 4px
xs · 8px
sm · 12px
md · 16px
lg · 24px
xl · 32px
xxl · 48px
section · 96px