Theme tokens

Tools

The design tokens behind the implemented.stream theme. Every value is a CSS variable in `docs/.vitepress/theme/styles.css`, so you can change the whole site from one place.

On this pageCopy colour, type and spacing values · See which variable controls which part of the site · Find the build settings for the theme

Colours

Token	Light	Dark	Use
--dx-ember	#FF6A1F	#FF6A1F	Brand colour, primary buttons, logo
--dx-rose	#FF3D7F	#FF3D7F	End of the brand gradient
--dx-iris	#7C5CFF	#7C5CFF	Accent, tip callouts, chips
--dx-cyan	#22D3EE	#22D3EE	Secondary accent, zone numbers
--vp-c-brand-1	#E2550F	#FF8A3D	Links and active sidebar items
--dx-ink	#0B0D12	#0B0D12	Hero and homepage background
--dx-text	#161A22	#E8EAF0	Body text
--dx-muted	#5B6474	#98A1B3	Secondary text

Typography

Token	Value
--vp-font-family-base	Inter, then IBM Plex Sans Thai for Thai text
--vp-font-family-mono	IBM Plex Mono, then JetBrains Mono
Page title	2.2rem, weight 750
Section heading	1.45rem with a divider line above

Shape and spacing

Token	Value	Use
--nvx-radius-md	10px	Inputs
--nvx-radius-xl	18px	Cards, step card
--nvx-radius-2xl	22px	Large panels, chat
Buttons and chips	pill (999px)	All buttons
--dx-space	1rem	Base spacing unit

Motion

Token	Value	Use
--nvx-duration-fast	120ms	Hover and press
--nvx-duration-base	200ms	Fades and panels
--nvx-duration-slow	320ms	Sheets and toasts
--nvx-ease-standard	cubic-bezier(.2, 0, 0, 1)	Most transitions
--nvx-ease-emphasized	cubic-bezier(.3, 0, 0, 1.2)	Entrances with a small overshoot

All motion stops when the visitor turns on reduced motion.

Using a token

Now you'll use a token in your own CSS.

.my-banner {
  background: linear-gradient(135deg, var(--dx-ember), var(--dx-rose));
  border-radius: var(--dx-radius);
}

Build settings

Setting	Value
Install	npm ci
Build	npm run build
Output	dist
Deploy	npx wrangler deploy --config wrangler.jsonc

Requires: a Cloudflare login

The deploy command needs a Cloudflare session. Sign in first with npx wrangler login. Never put a token in the repo.

Full steps: Build this site. Logo rules: Brand & logo.

Next steps

NextHow tools are builtPreviousimplemented.stream AIZoneAll Tools pages