Plain card
Surface background, hard border, muted body text.
Styleguide
Every token and theme component. Use the toggle in the nav to check dark mode.
Palette
- ink
#1c1b26 - night
#2a2937 - dusk
#4b4958 - pewter
#a39eae - sand
#e6dcc4 - cream
#f7f1e3 - red
#a8323c - rose
#f08a86 - amber
#8a4f0a - gold
#f2c25c - green
#2e6b3f - mint
#8fd3a0 - blue
#2a5a9e - sky
#8dbcf0 - violet
#6b3f8f - lilac
#c4a6e8
Semantic roles
--color-bg--color-surface--color-text--color-text-muted--color-border--color-divider--color-accent--color-on-accent--color-focus--color-red--color-amber--color-green--color-blue--color-violet
Type
Heading one
Heading two
Heading three
Body copy in IBM Plex Sans. Semibold for emphasis, italic for asides, an inline link, and inline code.
Muted secondary text for metadata and captions.
red · amber · green · blue · violet
Buttons
Cards
Linked card
The whole card is clickable through its title link.
Collapsible section
Native details/summary. Open by default; the marker rotates to show state.
Dividers
sm
md
lg
Icons
sunmoongithublinkedinappStoregooglePlaymaildocumentexternalarrow
Monogram
Stat tiles
00
blue tile
00
green tile
00
amber tile
00
red tile
00
violet tile
Timeline
Role title
Organization · Industry
Jan 2020 – Present · 2 yrs
One-line summary revealed on hover or keyboard focus (desktop).
Earlier role
Organization · Part-time
Mar 2018 – Dec 2019 · 1 yr 10 mos
Bands
Full width on real pages; contained here. Roles re-point inside each band.