DevX Design System
A technical UI system for developer resource pages — minimal, content-led, and built around a consistent token architecture.
A comprehensive showcase of every design token, surface pattern, typographic scale, spacing rhythm, and interactive component that powers the DevX experience across light and dark themes. Each example renders live from the underlying CSS custom properties — no hardcoded values, no mockups.
Border Styles
Three border variants used across the system: standard for cards and controls, primary-tinted for active states, and dashed for hint containers.
border: 1px solid color-mix(in srgb, var(--border) 66%, transparent);border: 1px solid color-mix(in srgb, var(--primary) 40%, var(--border) 60%);border: 1px dashed color-mix(in srgb, var(--border) 66%, transparent);Light Palette
Light mode swatches sourced from the documented theme tokens, including the six CSS custom properties and the X theme brand accent colors used in navbar icons and interactive states.
Light mode swatches sourced from the project theme tokens defined in globals.css. The background (#ffffff) is a clean white for optimal readability. Foreground (#171717) is a deep near-black for primary text. The violet primary (#4328a8) provides accessible accents across buttons, links, and active indicators. Stone (#6b7280) handles muted secondary text, while border (#e5e7eb) separates content layers with a subtle line. Card backgrounds (#f9fafb) sit slightly above the page surface.
Dark Palette
Dark mode swatches with the same token structure. The background deepens while accent colors remain consistent across both modes.
Dark mode swatches shift to a near-black background (#0a0a0a) with a soft off-white foreground (#ededed) that reduces eye strain in low-light environments. The gold primary (#fbbf24) provides warm, accessible accents across buttons, links, and active indicators. Zinc muted text (#9ca3af) provides consistent secondary contrast. Border (#27272a) deepens to a cool charcoal that maintains visual separation without introducing glare. Card background (#18181b) sits slightly above the page surface, creating a subtle elevation effect for layered containers.
When comparing light and dark palettes, the most significant shift occurs in the background (from #ffffff to #0a0a0a) and primary (from #4328a8 to #fbbf24) tokens. The light-mode violet primary (#4328a8) shifts to a warm gold (#fbbf24) in dark mode to maintain WCAG AA contrast ratios against the dark surface. The card-bg token in dark mode (#18181b) is slightly lighter than the page background, creating a subtle elevation effect that helps layered surfaces feel physically stacked.
Typography Scale
A compact, purposeful type system where hierarchy is expressed through weight and spacing rather than decorative flourishes.
const x = await fetchData();npx opencode install devx --theme=dark --output=jsonLine Height Contrast
Three line heights create the reading rhythm: tight for headings, normal for body copy, and relaxed for introductory passages.
A compact line height ideal for headings where vertical economy matters and every word carries weight across narrow layouts. Commonly used for page titles, section headings, and callout headers that need to stay visually dense without wasting vertical space between lines of text.
The standard reading rhythm for body text, balancing readability with information density across paragraphs and descriptions. This is the default applied to all prose content, card descriptions, documentation text blocks, and UI copy throughout the entire design system.
A spacious line height used for introductory content and extended descriptions, giving each line room to breathe for longer reading sessions. Best suited for hero subtitles, feature overviews, and any block of text where comprehension and reading comfort are the highest priority.
Font Families
The system uses a primary monospace stack for code and data, with the interface font inherited from the project theme for headings and body text.
The quick brown fox jumps over the lazy dog near the bank of the river. A serene landscape unfolds with every passing moment, inviting the reader to linger just a little longer on the page and absorb the carefully crafted words that follow across the columns below.
font-family: Georgia, 'Times New Roman', serif;The quick brown fox jumps over the lazy dog near the bank of the river. A serene landscape unfolds with every passing moment, inviting the reader to linger just a little longer on the page and absorb the carefully crafted words that follow across the columns below.
font-family: ui-sans-serif, system-ui, sans-serif;const theme = { palette: { primary: "#6C63FF", muted: "#8E8E9A", border: "#D4D4DC", cardBg: "#F0F0F5" } }; const tokens = createThemeTokens(theme); export default tokens;
font-family: ui-monospace, 'SF Mono', monospace;Three font families serve distinct roles. Serif provides a traditional, authoritative voice for headings and long-form content. Sans-serif handles the bulk of UI text with clean readability at small sizes. Mono ensures precise alignment for code and configuration blocks where character-level spacing and legibility are critical for accuracy.
Spacing Rhythm
A disciplined spacing scale that creates hierarchy through contrast before introducing borders or dividers.
The spacing scale progresses from tight (0.25rem) through standard (0.75rem) and section (1.25rem) to major (3.5rem). Each step is tuned for a specific purpose: tight for inline gaps between closely related elements, standard for card padding and inner gutters, section for separating distinct page segments, and major for hero margins, modal padding, and full-width banner spacing. This logarithmic progression ensures visual rhythm is maintained at every layout level without arbitrary values.
Section Composition
Each section follows a three-part structure: identity, main content surface, and supporting utility or call to action.
Each section block follows a three-layer rhythm: identity context at the top (badge, icon, or label), the main content surface in the middle (text, controls, or interactive elements), and a supporting utility layer at the bottom (metadata, secondary actions, or CTAs). This predictable vertical structure helps users scan and navigate content quickly across every page in the system, reducing cognitive load through consistent spatial hierarchy.
Surface Patterns
Two surface recipes cover every container in the system: a standard bordered surface for controls and cards, and a darker code block surface for technical content.
The default bordered container used for controls, command cards, and theme cards across all resource pages.
border: 1px solid color-mix(in srgb, var(--border) 66%, transparent); background: color-mix(in srgb, var(--background) 94%, var(--card-bg) 6%);Darker background for code examples, used in install instructions and config previews.
background: color-mix(in srgb, var(--background) 86%, #050505 14%);Two surface variants cover the majority of UI containers. The standard surface uses a subtle border and near-transparent card background blend for general-purpose cards and panels. The code block surface uses a darker tint that signals a technical context, helping developers quickly identify areas of the interface that contain runnable or configurable content.
Color Token Application
The six color tokens applied as surface fills, demonstrating their visual weight and hierarchy across both light and dark modes.
--backgroundMain page surface--foregroundPrimary readable text--primaryActive states, accents--text-mutedSecondary copy--borderSeparators, outlines--card-bgSurface blending helperEach token maps to a semantic CSS custom property consumed across every component in the system. Buttons inherit --primary for their fill color, cards blend --card-bg with the base background via color-mix, and text nodes reference --foreground or --text-muted depending on their hierarchy level. When the theme toggles, every token updates in unison — no manual overrides or per-component adjustments are needed. This centralized approach guarantees visual consistency across the entire interface regardless of page depth or component type.
SVG Graphics
Inline SVG examples demonstrating how theme-aware strokes, fills, and gradients adapt automatically between light and dark modes using CSS custom properties and color-mix.
All SVG primitives inherit var(--primary) as their stroke color, ensuring they adapt automatically between light and dark themes without additional media queries or per-theme redefinitions. Opacity, gradients, and color-mix are used to create visual hierarchy among overlapping elements within the same graphic.
Common use cases include: animated loading indicators, decorative section dividers, icon placeholders during prototyping, data visualisation stubs for proof-of-concept dashboards, and transition elements that respond to theme state changes in real time.
Because SVGs reference CSS custom properties directly, switching between light and dark mode requires zero JavaScript intervention — the browser repaints strokes and fills automatically when the property values update at the root level.
For gradient fills, the <linearGradient> element references var(--primary) via color-mix at varying opacities. This technique allows gradients to remain theme-aware without requiring duplicate gradient definitions for light and dark mode.
Border Radius
Four radius levels define the surface language: square for technical elements, soft for cards, rounded for media, and full pill for badges.
Button Patterns
Three button tiers: primary filled for main actions, secondary outlined for alternatives, and ghost for subtle inline controls.
Fixed Light Mode
Button appearance under a fixed light palette (#ffffff background, #4328a8 primary, #6b7280 muted), independent of the global theme.
Fixed Dark Mode
Button appearance under a fixed dark palette (#0a0a0a background, #fbbf24 primary, #9ca3af muted), independent of the global theme.
The DevX system proves that restraint in tokens, spacing, and typography creates interfaces that are both visually cohesive and easy to extend.
Every token, swatch, surface pattern, and typographic scale documented on this page is live — pulled directly from the same CSS custom properties that drive every component in the DevX design system. Change a variable value at the root level and every consumer across the entire interface updates in unison. No recompilation, no rebuild, no extra deploy. That is the power of a token-driven system built on CSS custom properties. The patterns shown here form the foundation for every resource page, skill showcase, and interactive component across the platform.