// purecss.com
Brand Style Guide
Design tokens, typography, and components used across the site.
Colors
Primary
--accent
#b8ff57
#4a7c00
Lime Green · Primary
--accent-dim
rgba(184,255,87,.10)
rgba(74,124,0,.08)
Accent tint · Hover fills
Palette
--coral
#ff6b6b
#dc2626
Coral · Advanced / Danger
--orange
#ff9040
#c05000
Orange · Intermediate / Warning
--yellow
#ffd444
#907200
Yellow · Stars / Highlight
--teal
#57d9a3
#0d9488
Teal · Beginner / Success
--violet
#c084fc
#7c3aed
Violet · Accent / Info
--sky
#38bdf8
#0284c7
Sky · Links / Highlight
--rose
#f472b6
#db2777
Rose · Special / Promo
Surfaces & Text
--bg
#0c0c0d
#f4f1eb
Page background
--surface
#141415
#ffffff
Card / panel surface
--surface-2
#1c1c1e
#ede9e0
Inset / code background
--border
#2a2a2d
#d0ccc0
Borders & dividers
Aa
--text
#f0f0f0
#1a1a1a
Primary text
Aa
--text-muted
#88888f
#666660
Secondary text
Typography
Display 800
Heading 600
Body Regular 400 — The quick brown fox jumps over the lazy dog.
Italic Accent
Regular weight
CSS does more than you think.
26 examples
FORM · BEGINNER · // purecss.com
::after :checked :has()
Components
Buttons
Badges
Form
Navigation
Layout
Feedback
Beginner
Intermediate
Advanced
Inline Code
The trick uses ::after as the thumb. When :checked, CSS shifts it with translateX — no JavaScript needed.
Shape & Radius
--radius · 8px
--radius-lg · 12px
pill · 999px