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.
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
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
SVG icons and background patterns ready to drop into ATXP products. Click any item to copy its SVG code.
Icons
24×24 · stroke · 1.5px weight
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 |
Input
Height 36px · border-radius: theme/radius · 1px border