Artax Design System

The Artax design system powers all UI across the petersen-group monorepo. It lives in packages/artax-ui and implements a terminal/CLI-inspired aesthetic: monospace typography, zero border-radius, amber accent, and dark backgrounds. Every component follows these conventions.

#// Aesthetic Principles

Terminal-first. The UI should feel like a well-designed terminal application, not a web app with a dark theme bolted on. This means:

• Monospace font everywhere except long-form prose
• Square corners on everything — no border-radius, ever
• Single accent color (amber) for interactive elements
• Minimal decoration — let content and type create hierarchy
• Borders are functional (separation), not decorative (embellishment)

Component personality. Buttons prefix with $ in default variant and wrap with [ ] brackets in ghost variant, like terminal prompts and commands. This is subtle but reinforces the aesthetic throughout the interface.

#// Theme Tokens

All tokens are defined as CSS custom properties in packages/artax-ui/src/styles/theme.css using Tailwind v4's @theme directive. The token names map directly to Tailwind utility classes.

#> Colors — Dark Mode (default)

#> Colors — Light Mode

#> Surface Colors

Semi-transparent backgrounds for status banners and badges:

#> Border Radius

All zero. No exceptions.

--radius: 0px;
--radius-sm: 0px;
--radius-md: 0px;
--radius-lg: 0px;
--radius-xl: 0px;

#// Typography

Three font families, loaded via CSS custom properties:

All components default to font-mono. The font-sans class is explicitly applied only in article/prose contexts.

#// Type-Safe Token Access

The tokens.ts module in packages/artax-ui/src/styles/ exports typed constants for programmatic access:

import { tokens } from '@petersen-group/artax-ui/styles/tokens'

tokens.bg.background    // 'var(--background)'
tokens.text.primary     // 'var(--primary)'
tokens.border.border    // 'var(--border)'
tokens.font.mono        // 'var(--font-mono)'

Organized by namespace: bg, text, border, ring, font. Use these in inline styles or dynamic class generation instead of hardcoding CSS variable names.

#// Component Conventions

Components live in packages/artax-ui/src/components/ organized by atomic design:

components/
├── atoms/       # Badge, Button, Input, etc.
├── molecules/   # SearchInput, NavItem, etc.
└── organisms/   # Header, Sidebar, etc.

#> Required Patterns

Every component file follows these conventions:

1. ABOUTME comment at the top — two lines describing what the file does
2. cva for variants — all variant logic uses class-variance-authority
3. cn() for class merging — never concatenate class strings manually
4. Export both component and variants — consumers may need the variants object for composition
5. font-mono by default — all components use monospace unless explicitly overridden
6. Focus states — focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring
7. Disabled states — disabled:pointer-events-none disabled:opacity-50

#> Example: Button Personality

// Default variant: terminal prompt style
<Button>deploy</Button>        // renders: "$ deploy"

// Ghost variant: command bracket style
<Button variant="ghost">help</Button>  // renders: "[ help ]"

The $ prefix and [ ] brackets are added via the variant definitions in cva, not as children. This keeps the terminal personality consistent without requiring every consumer to remember the convention.

#// CSS Architecture

Tailwind v4 with PostCSS plugin (no tailwind.config.js). All customization via CSS custom properties:

• packages/artax-ui/src/styles/theme.css — token definitions under @theme
• packages/artax-ui/src/styles/globals.css — imports Tailwind, theme, animations
• apps/blakepetersen.io/src/app/globals.css — imports artax-ui globals, sources component files

Theme switching uses [data-theme=dark] selector on the root element, not a class="dark" approach.