Design System

Semantic tokens, type scales, spacing, components, and assets — the single source of truth for ATXP product interfaces.

Design tokens & assets

Colors

Semantic tokens are the source of truth for components. Never reference a primitive color directly where a semantic token exists.

ATXP-light-mode ATXP-dark-mode Figure & DBG themes — not in scope

Brand & Interactive

Backgrounds & Surfaces

Foreground & Text

CTA

Borders

Inputs

Destructive

Success

Alert

Charts

Dark Mode Overrides

Tokens whose values differ between ATXP-light-mode and ATXP-dark-mode. Swatch cards above show both modes — left half = light, right half = dark.

Token	Light Mode	Dark Mode

Brand Palette

Warm orange. color/brand/500 (#f6891f) is the primary brand hue.

Accent Palette

Blue scale that backs theme/accent. Light mode uses color/accent/100 (#dbeafe); dark mode uses color/accent/900 (#1c398e).

Primitive Palettes

Reference only. Click any swatch to copy its hex value.

Typography

Two display families and a monospace. Body text (xs–2xl) uses JUST Sans; display text (3xl–9xl) uses Univa Nova. Custom fonts must be loaded separately — system fallbacks are shown below.

Font Families

Aa Bb 123

JUST Sans

font/family/sans

Body & UI · xs – 2xl · font-sans

Aa Bb 123

Univa Nova

font/family/sans-header

Headings & Display · 3xl – 9xl · font-display

Aa {} 01

Menlo

font/family/mono

Code, data, tokens · font-mono

Type Scale

Font Weights

Spacing

Tailwind-style scale — token number × 4 = px value, except spacing/px = 1px. Click any token to copy.

Shape

Radius, borders, and shadows — the three properties that define the physical form of every ATXP component.

Border Radius

theme/radius = 8px (radius/lg) is the base component radius — used for buttons, cards, and inputs.

Border Width

Use border-width/1 for default borders and border-width/2 for emphasis or focus states.

Drop Shadows

All shadows use black at reduced opacity. Multi-layer shadows combine two drops for natural depth falloff.

Inner Shadows

Breakpoints & Containers

Responsive breakpoints follow Tailwind conventions. Container tokens provide consistent max-widths at each scale step.

Breakpoints

Token	Value	Applies at

Container Max-Widths

Token	Value

Assets

Brand logos, SVG icons, and background patterns ready to drop into ATXP products. Click any item to copy its SVG code.

Logos

ATXP brand marks — click any card to copy the SVG source. All files use --foreground-primary so they adapt to light/dark mode when inlined. Download the .svg file for static use.

With tagline

Without tagline

Icon only

Icons

24×24 · stroke · 1.5px weight

1,098 icons

Custom icon overrides

These icons override MynaUI defaults and are not available on the CDN — they must be inlined from ICON_OVERRIDES in this file. Each has different specs from the standard 24×24 stroke set. A machine-readable manifest of all icons (including source, style, and viewBox) is at /icons/manifest.json.

Name	Style	viewBox	Color variable	Note
robot	fill	0 0 22 19	var(--fill-0, #020618)	Uses CSS var, not currentColor. Dark mode requires token.
speedometer	fill	0 0 20 16	currentColor	Fill icon, responds to color normally.
wallet	fill	0 0 20 18	currentColor	Fill icon, responds to color normally.
brain	stroke	0 0 18.33 18.33	currentColor	Non-standard viewBox — scales differently at 24px.
experiment	stroke	0 0 7.65 18.7	currentColor	Tall narrow viewBox — scales differently at 24px.
lightbulb	stroke	0 0 11.67 18.33	currentColor	Narrow viewBox — scales differently at 24px.
unpin1	stroke	0 0 24 24	currentColor	Standard viewBox, custom path (not in MynaUI).

Patterns

Brand background patterns · click to copy SVG

Components

Interactive UI components with all variants and states. All values are live tokens — they respond to light/dark mode.

Button

Height 36px default · 32px sm · 44px lg · border-radius: theme/radius

Variants

Sizes

Icons

States

Variant	Default	Hover	Disabled	Tokens
primary				CTA-bg-primary CTA-foreground-primary
secondary				CTA-bg-secondary CTA-foreground-secondary
subtle				CTA-bg-secondary-subtle
brand				theme/brand
destructive				theme/destructive theme/destructive-hover
destructive-subtle				theme/destructive (border+text)
success				theme/success (border+text)
outline				theme/border (2px) theme/interactive-bg
ghost				transparent bg CTA-bg-secondary-subtle :hover

Header nav

Height 52px · top navigation bar with account, developer, and settings dropdown menus · dropdowns are interactive below

Tokens

bgtheme/card-primary

bordertheme/border

nav btn hoverCTA-bg-secondary-subtle

active stateCTA-bg-secondary-subtle

dropdown bgtheme/card-primary

dropdown bordertheme/border

item hovertheme/muted

destructivetheme/destructive

Input

Height 36px · border-radius: theme/radius · 1px border

States

Default Helper text

Focused Helper text

Disabled Helper text

Error This field is required

Tokens

bgtheme/input-bg

bordertheme/input-outline

focustheme/input-outline-active

texttheme/input-foreground-active

placeholdertheme/input-foreground

errortheme/destructive

Table

Transaction	Amount	Date
ATXP Video	$3.45	Sept 12, 2025, 12:23 AM
ATXP Pics	$1.00	Aug 29, 2025, 6:47 PM
ATXP Go	$0.50	Aug 14, 2025, 9:01 AM
ATXP Video	$5.98	Aug 29, 2025, 6:47 PM

Hover any row to see the interaction state.

Cell states

No issue

Issue detected

Label

Resting

Label

Resting

Label

Hover

Label

Hover

Label

Disabled

Label

Disabled

Label

Header

Label

Footer cell

Table footer

Tokens

container bordertheme/table-outline

container radiustheme/radius

cell bg restingtheme/interactive-bg

cell bg hovertheme/accent

cell bordertheme/table-outline

header texttheme/foreground-muted

body texttheme/foreground-primary

issue texttheme/foreground-destructive

footer bgtheme/muted

issue bg restingtheme/destructive-background-resting

issue bg hovertheme/destructive-background-hover

cell text sizefont/size/xs · 12px / 16px

header weightfont/weight/medium · 500

hover weightfont/weight/medium · 500

cell paddingspacing/3 · 12px

Quick start

Five steps to get the C&C design system running in any ATXP project — tokens, type scale, dark mode, and Claude context all wired up.

Import the stylesheet

Add this once to your app's CSS entry point. Loads all design tokens as CSS variables and registers the brand fonts.

@import url('https://designsystem.corp.circuitandchisel.com/tokens/tokens.css');

Add the Tailwind preset

Get tailwind.preset.cjs from the design-system repo and add it to your Tailwind config. Colors, type scale, radius, and shadows all reference the CSS variables above.

// tailwind.config.cjs
const ccPreset = require('./tailwind.preset.cjs');

module.exports = {
  presets: [ccPreset],
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
};

Use tokens in your code

Always reach for semantic tokens — never hardcode hex values. Primitive tokens like --color-slate-950 are reference-only and should not appear in component code.

/* ✅ Do — use semantic tokens */
<div className="bg-background text-foreground-primary">
<button className="bg-cta-bg-primary text-cta-foreground-primary rounded-lg">
<p className="text-sm font-medium text-foreground-muted">

/* ❌ Don't — hardcode values or use primitive tokens */
<div style={{ background: '#f7f9ff', color: '#020618' }}>
<div className="bg-slate-950 text-slate-50">

Enable dark mode

Toggle dark on document.documentElement. All token values switch instantly — no additional CSS needed.

document.documentElement.classList.toggle('dark');

Load the Claude context file

CLAUDE.md is a Claude-optimised reference containing all tokens (light + dark), the full primitive palette, type scale, component usage patterns with JSX examples, and a Tailwind quick reference. Drop it into your project and Claude Code will use it as context automatically when building with the design system.

The file is auto-regenerated by a GitHub Action (update-claude-md.yml) whenever tokens/tokens.css or the Tailwind preset changes — so it stays in sync with the design system automatically. To regenerate it locally at any time, run:

node scripts/generate-claude-md.js