# SUDX Design System 1.0.0

Published 2026-07-22 · Stable · Owner: SUDX

## Principles

1. Show operational truth before decoration.
2. Use type, space, tone, and hairlines to create hierarchy.
3. Give every color, mark, and motion a job.
4. Keep data units, ranges, dates, provenance, and uncertainty visible.
5. Ship semantic HTML first and add interaction progressively.
6. Copy named releases into products; never depend on sudx.io at runtime.

## Identity

The master visible identity is the Space Grotesk 700 wordmark `SUDX`. The compact mark is a Clay `X` on Paper. The retired quadrant mark, Brass, Bone, Instrument Serif, and JetBrains Mono are not part of this release. Product marks may contain exactly one Clay element.

## Type

- Space Grotesk 700: SUDX and approved product wordmarks; rare display headings.
- Geist 400–700: interface, headings, navigation, controls, labels, and body text.
- Geist Mono 400–700 with tabular numerals: values, dates, percentages, units, and numeric headings.
- Source Serif 4: editorial or analytical narrative only; never controls, tables, navigation, or data.

Every family includes system fallbacks. Font failure must preserve readable hierarchy and must not hide or overflow content.

## Shape, space, and depth

Use a dense 4px/8px spacing rhythm. General surfaces use 6px radius; small chips use 4px. Resting cards and panels have no shadow. Popovers, dropdowns, and tooltips may use the published popover shadow. Avoid nested cards; use a section, hairline, or one tonal inset. Mobile targets are at least 44px.

## Interaction and access

Every interactive element has a 2px Clay `focus-visible` ring with 2px offset. Keyboard order follows visual order. Do not encode meaning with color alone. Respect reduced motion and avoid layout movement when content or state changes. Stable controls define rest, hover, focus, active, disabled, loading, and error states when those states apply.

## Theme

Use system preference until the user chooses Light or Dark. Persist an explicit choice under `sudx-theme`. Dark surfaces are neutral graphite. All routes consume `assets/sudx-tokens.css`; products copy the release locally rather than importing it from SUDX.

## Version policy

- Patch: documentation, recipe, or non-contract correction.
- Minor: additive token, Stable node, asset, or optional rule.
- Major: changed token meaning, removed asset, or required behavior break.

Lab changes do not change the Stable contract unless shared page infrastructure changes.

## Adoption

Prove a real need, ratify reusable behavior in SUDX, publish and hash a named release, copy it into a product-owned branch, then run that product's contract tests and rendered QA. Every consumer `DESIGN.md` records its SUDX base version.