Skip to content
UI
v0.3.1

Search the docs

Foundations

Tokens

One source builds the CSS variables, both themes and the contrast checks. Use the variables, never the raw values: a theme switch then changes every screen at once.

Colour

Each token has a dark and a light value. The variable is --ow-color-<name>.

--ow-color-accent-pink dark #ff5fa2 · light #ff5fa2
--ow-color-accent-yellow dark #ffc83d · light #ffc83d
--ow-color-bg dark #070908 · light #f7f8f7
--ow-color-brand dark #01ce2c · light #01ce2c
--ow-color-brand-text dark #34e058 · light #00751a
--ow-color-chart-1 dark #01ce2c · light #009a20
--ow-color-chart-2 dark #ffc83d · light #b07f00
--ow-color-chart-3 dark #ff5fa2 · light #f0478b
--ow-color-chart-4 dark #5b645e · light #b9c0bb
--ow-color-danger dark #ff5a4f · light #d1352b
--ow-color-danger-soft dark rgb(255 90 79 / 0.12) · light #fde6e4
--ow-color-danger-text dark #ff7a71 · light #b3241b
--ow-color-faint dark #6a736d · light #848c86
--ow-color-focus dark #01ce2c · light #00981f
--ow-color-info-soft dark rgb(255 95 162 / 0.12) · light #fde5ef
--ow-color-info-text dark #ff86b7 · light #a3185c
--ow-color-input-bg dark #0a0c0b · light #ffffff
--ow-color-line dark rgb(255 255 255 / 0.075) · light rgb(8 12 10 / 0.085)
--ow-color-line-strong dark rgb(255 255 255 / 0.13) · light rgb(8 12 10 / 0.15)
--ow-color-muted dark #8b958f · light #5d6660
--ow-color-on-brand dark #021a07 · light #021a07
--ow-color-on-danger dark #1f0402 · light #ffffff
--ow-color-overlay dark rgb(3 4 3 / 0.72) · light rgb(8 12 10 / 0.42)
--ow-color-skeleton-a dark #121613 · light #eef0ee
--ow-color-skeleton-b dark #1b211d · light #f8f9f8
--ow-color-success-soft dark rgb(1 206 44 / 0.12) · light #e3f7e7
--ow-color-success-text dark #34e058 · light #00701a
--ow-color-sunken dark #0a0c0b · light #fbfcfb
--ow-color-surface dark #0c0f0d · light #ffffff
--ow-color-surface-2 dark #141815 · light #f0f2f0
--ow-color-text dark #edf1ee · light #0a0d0b
--ow-color-tooltip-bg dark #edf1ee · light #0a0d0b
--ow-color-tooltip-fg dark #070908 · light #f7f8f7
--ow-color-warning-soft dark rgb(255 200 61 / 0.12) · light #fdf3d3
--ow-color-warning-text dark #ffc83d · light #7a5600

Contrast

Every pair a component draws meets WCAG 2.2: 4.5:1 for text, 3:1 for large text, controls and chart marks.

Measured contrast of the colour pairs
Theme Foreground Background Ratio Minimum Result
Dark text bg 17.51:1 4.5:1 Pass
Dark muted bg 6.45:1 4.5:1 Pass
Dark brand-text bg 11.36:1 4.5:1 Pass
Dark faint bg 4.07:1 3:1 Pass
Dark text surface 16.90:1 4.5:1 Pass
Dark muted surface 6.23:1 4.5:1 Pass
Dark brand-text surface 10.96:1 4.5:1 Pass
Dark faint surface 3.93:1 3:1 Pass
Dark text surface-2 15.72:1 4.5:1 Pass
Dark muted surface-2 5.80:1 4.5:1 Pass
Dark brand-text surface-2 10.20:1 4.5:1 Pass
Dark faint surface-2 3.65:1 3:1 Pass
Dark text sunken 17.20:1 4.5:1 Pass
Dark muted sunken 6.34:1 4.5:1 Pass
Dark brand-text sunken 11.16:1 4.5:1 Pass
Dark faint sunken 4.00:1 3:1 Pass
Dark text input-bg 17.20:1 4.5:1 Pass
Dark muted input-bg 6.34:1 4.5:1 Pass
Dark brand-text input-bg 11.16:1 4.5:1 Pass
Dark faint input-bg 4.00:1 3:1 Pass
Dark on-brand brand 8.55:1 4.5:1 Pass
Dark on-danger danger 6.34:1 4.5:1 Pass
Dark success-text success-soft 9.73:1 4.5:1 Pass
Dark warning-text warning-soft 10.52:1 4.5:1 Pass
Dark danger-text danger-soft 7.03:1 4.5:1 Pass
Dark info-text info-soft 7.86:1 4.5:1 Pass
Dark success-text surface 10.96:1 4.5:1 Pass
Dark warning-text surface 12.46:1 4.5:1 Pass
Dark danger-text surface 7.59:1 4.5:1 Pass
Dark info-text surface 8.57:1 4.5:1 Pass
Dark tooltip-fg tooltip-bg 17.51:1 4.5:1 Pass
Dark focus bg 9.38:1 3:1 Pass
Dark focus surface 9.05:1 3:1 Pass
Dark danger bg 6.49:1 3:1 Pass
Dark chart-1 surface 9.05:1 3:1 Pass
Dark chart-2 surface 12.46:1 3:1 Pass
Dark chart-3 surface 6.80:1 3:1 Pass
Light text bg 18.34:1 4.5:1 Pass
Light muted bg 5.58:1 4.5:1 Pass
Light brand-text bg 5.54:1 4.5:1 Pass
Light faint bg 3.24:1 3:1 Pass
Light text surface 19.52:1 4.5:1 Pass
Light muted surface 5.94:1 4.5:1 Pass
Light brand-text surface 5.89:1 4.5:1 Pass
Light faint surface 3.45:1 3:1 Pass
Light text surface-2 17.35:1 4.5:1 Pass
Light muted surface-2 5.27:1 4.5:1 Pass
Light brand-text surface-2 5.24:1 4.5:1 Pass
Light faint surface-2 3.07:1 3:1 Pass
Light text sunken 18.98:1 4.5:1 Pass
Light muted sunken 5.77:1 4.5:1 Pass
Light brand-text sunken 5.73:1 4.5:1 Pass
Light faint sunken 3.36:1 3:1 Pass
Light text input-bg 19.52:1 4.5:1 Pass
Light muted input-bg 5.94:1 4.5:1 Pass
Light brand-text input-bg 5.89:1 4.5:1 Pass
Light faint input-bg 3.45:1 3:1 Pass
Light on-brand brand 8.55:1 4.5:1 Pass
Light on-danger danger 4.93:1 4.5:1 Pass
Light success-text success-soft 5.61:1 4.5:1 Pass
Light warning-text warning-soft 5.99:1 4.5:1 Pass
Light danger-text danger-soft 5.53:1 4.5:1 Pass
Light info-text info-soft 6.20:1 4.5:1 Pass
Light success-text surface 6.30:1 4.5:1 Pass
Light warning-text surface 6.64:1 4.5:1 Pass
Light danger-text surface 6.59:1 4.5:1 Pass
Light info-text surface 7.38:1 4.5:1 Pass
Light tooltip-fg tooltip-bg 18.34:1 4.5:1 Pass
Light focus bg 3.57:1 3:1 Pass
Light focus surface 3.81:1 3:1 Pass
Light danger bg 4.63:1 3:1 Pass
Light chart-1 surface 3.72:1 3:1 Pass
Light chart-2 surface 3.57:1 3:1 Pass
Light chart-3 surface 3.51:1 3:1 Pass

Type

Text: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif. Display: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif. Numbers and ids: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace, with tabular figures. The variables are --ow-text-<style>-size, -weight, -line and -tracking.

Type styles
Style Family Size Weight Line Tracking
body text 14px 450 1.5 0
body-lg text 17px 450 1.55 -0.005em
body-sm text 13px 450 1.45 0
caption text 12px 450 1.4 0
display display 72px 600 0.98 -0.045em
h-1 display 28px 600 1.1 -0.035em
h-2 display 22px 600 1.15 -0.03em
h-3 display 17px 600 1.25 -0.02em
label mono 10.5px 500 1.2 0.08em · uppercase
mono mono 13px 450 1.5 -0.01em
stat mono 28px 500 1.05 -0.04em

Space

Space tokens
Variable Value
--ow-space-0 0px
--ow-space-1 4px
--ow-space-2 8px
--ow-space-3 12px
--ow-space-4 16px
--ow-space-5 20px
--ow-space-6 24px
--ow-space-8 32px
--ow-space-10 40px
--ow-space-12 48px
--ow-space-16 64px
--ow-space-0-5 2px
--ow-space-1-5 6px

Radius

Radius tokens
Variable Value
--ow-radius-lg 8px
--ow-radius-md 6px
--ow-radius-none 0px
--ow-radius-pill 999px
--ow-radius-sm 4px
--ow-radius-xl 10px
--ow-radius-xs 2px

Size

Size tokens
Variable Value
--ow-size-control-lg 44px
--ow-size-control-md 36px
--ow-size-control-sm 30px
--ow-size-header-row 34px
--ow-size-icon 16px
--ow-size-icon-lg 20px
--ow-size-row 40px
--ow-size-sidebar 232px
--ow-size-topbar 56px

Duration

Duration tokens
Variable Value
--ow-duration-brand 600ms
--ow-duration-fast 120ms
--ow-duration-instant 0ms
--ow-duration-base 180ms
--ow-duration-slow 240ms

Layers

Layers tokens
Variable Value
--ow-z-base 0
--ow-z-dropdown 1000
--ow-z-modal 1200
--ow-z-overlay 1100
--ow-z-raised 10
--ow-z-sticky 100
--ow-z-toast 1300
--ow-z-tooltip 1400

Easing

Easing tokens
Variable Value
--ow-ease-brand cubic-bezier(0.2, 0, 0, 1)
--ow-ease-exact cubic-bezier(0.2, 0, 0, 1)
--ow-ease-exit cubic-bezier(0.4, 0, 1, 1)
--ow-ease-linear linear