design system
glass surfaces
glass card
glass bg-surface-0/55
main containers, cards
surface-frost
surface-frost
inert wells, commentary
ctrl-frost
ctrl-frost
interactive chips, CTAs
ctrl-glass
ctrl-glass
sort/filter controls
active states
ctrl-frost-active ctrl-frost (hover me)
color
surface · content
accents
click to copy OKLCH · accent colors are contextual, not semantic
accents on ctrl-frost tags
red amber lime teal purple magenta default (content-3)
typography
font-base Montserrat — body, UI
font-header Schibsted Grotesk — headings, labels
font-serif Playfair — accent only
font-mono Inconsolata — dates, code
weight scale (Montserrat)
light 300 medium 375 semibold 450 bold 600 extrabold 750
size scale
xs sm base lg xl 2xl 3xl
components
pawmark variants
default
teal-blue
magenta-teal
tag component
default accent-red accent-amber accent-lime accent-teal accent-purple accent-magenta
ctrl-glass controls
surface-frost in context
well
jan 2025 commentary text inside a surface-frost container.