@textmode/design-system

Shared, React-free visual foundations for textmode.art products. This package is a deep CSS module: callers learn four stable stylesheet entry points while palette, typography, accessibility, and small reusable primitives stay local to one implementation. Product layout, content, motion choreography, and canvas lifecycle remain app-owned.

@import '@textmode/design-system/styles.css';

Applications self-host Monogram Extended and must declare an @font-face named Monogram Extended. The package never references font assets. Crimson (--tm-signal) is reserved for live/active state, meaningful emphasis, and errors; it is never a decorative wash.

Public CSS entry points

• styles.css — deterministic aggregate entry point: tokens, foundations, then primitives
• tokens.css — primitive and semantic custom properties
• foundations.css — reset, focus, selection, forced-colors, reduced motion
• primitives.css — commands, ruled panels, ledger rows, and status signals

Import styles.css once per document. Lower-level entry points are only for deliberate composition; applications must not import package-internal files or recreate aggregate ordering. The package deliberately does not opt pages into scroll snapping, prescribe a layout, or provide React modules. Those behaviors remain product-owned so dense workspaces are unaffected.

Token inventory

Primitive palette

--tm-color-black, --tm-color-black-raised, --tm-color-black-elevated, --tm-color-white, --tm-color-white-muted, --tm-color-gray, --tm-color-gray-dark, --tm-color-line, --tm-color-line-muted, --tm-color-crimson, --tm-color-crimson-readable, --tm-color-danger.

Semantic roles

--tm-ink, --tm-surface, --tm-surface-raised, --tm-paper, --tm-paper-muted, --tm-text-muted, --tm-rule, --tm-rule-muted, --tm-signal, --tm-signal-text, --tm-error, --tm-focus.

Typography

--tm-font-display, --tm-font-interface, --tm-font-copy, --tm-font-code, --tm-type-meta, --tm-type-control, --tm-type-copy, --tm-type-copy-large, --tm-type-title, --tm-leading-tight, --tm-leading-copy, --tm-tracking-display.

Geometry and layout

--tm-space-1, --tm-space-2, --tm-space-3, --tm-space-4, --tm-space-5, --tm-space-6, --tm-space-7, --tm-space-8, --tm-page-pad, --tm-header-height, --tm-control-height, --tm-section-height, --tm-section-rail-width, --tm-section-pager-height, --tm-rule-width, --tm-touch-target.

Motion and stacking

--tm-duration-fast, --tm-duration-state, --tm-duration-section, --tm-ease-out, --tm-z-dropdown, --tm-z-sticky, --tm-z-rail, --tm-z-modal-backdrop, --tm-z-modal, --tm-z-toast, --tm-z-tooltip.

Section-based brand surfaces may consume --tm-section-rail-width, --tm-section-pager-height, and --tm-duration-section, but navigation and responsive behavior remain local to their product.

Primitive inventory

• .tm-command and .tm-command--signal — 44 px command links or buttons with inverse and signal states.
• .tm-rule-panel — product-neutral ruled surface.
• .tm-ledger-row — tabular metadata row.
• .tm-status-signal — live or active state marker.
• .tm-sr-only — visually hidden accessible text.

The foundation contract includes :focus-visible, disabled and [aria-disabled='true'] states, selection, reduced-motion behavior, and forced-colors treatment for aria-current and aria-pressed state.

Consumer migration

1. Import @textmode/design-system/styles.css before product-owned stylesheet imports.
2. Keep product-local aliases while moving rules to --tm-* tokens; do not rename markup classes or change selector ordering as part of token adoption.
3. Remove aliases only after every consumer style has moved, visual baselines pass unchanged, and no supported integration reads the alias.
4. To roll back, remove the aggregate import and restore the prior local token declarations in one change. Do not update visual baselines to accept an unintended difference.

The package has no JavaScript runtime or peer dependencies. Publish releases with semantic versioning: patch for value corrections, minor for additive tokens or classes, and major for removals or semantic changes. Version 0.3.4 adds --tm-font-copy, --tm-section-height, and package contract verification without changing the existing public token values; it also keeps reduced-motion rules limited to scroll and transition behavior so product-owned animation state remains overrideable.