Design system

Principles

• Measured before believed. A claim about the interface is a number a script can reproduce, or it is not made. Contrast, consistency and layout are counted on every build.
• One name, one value. A color or a size has one name that says what it is for, and one value in each theme. Components use names, never raw values.
• Meaning never rides on color alone. Status and priority carry a shape or a word as well.
• The keyboard is a first-class way in. What can be done with a pointer can be reached from the keys, and the interface shows how.
• Change is staged and reversible. Defects are fixed first, pixels change last, and every release can be put back.

Tokens

The source of truth is a set of token files in the Design Tokens Community Group format (2025.10). A build step turns them into CSS custom properties with the prefix --tg-, checks every color’s two notations against each other, and refuses to build if a text and surface pair falls below its contrast threshold.

Themes are value sets on the same names. This page follows your system’s light or dark setting; the tables below show both.

Color

The accent comes from the Tridge mark. The teal end of the mark is kept for the logo and for illustration, never for the state of a control.

Surfaces

Borders

Text

Accent

Focus

Status

Brand

Contrast, measured

78 measurements: every pair below in both themes, by the WCAG 2.x contrast formula. Text needs 4.5 to 1; the boundary of a control and the focus ring need 3 to 1. All of them pass, and the build that produced this page would have failed otherwise.

Type

IBM Plex Sans for the interface, IBM Plex Mono for code and identifiers. The product uses nine roles; this site adds larger display sizes for headlines.

Space and radius

• space-0502 px
• space-1004 px
• space-1506 px
• space-2008 px
• space-25010 px
• space-30012 px
• space-40016 px
• space-50020 px
• space-60024 px
• space-70028 px
• space-80032 px
• space-100040 px
• space-120048 px
• space-160064 px

Radius

• radius-xs2 px
• radius-sm4 px
• radius-md6 px
• radius-lg8 px
• radius-xl12 px
• radius-2xl16 px

Motion

Five durations, from 0 to 300 milliseconds, and three easing curves. Hover and press are fast; menus enter in 150 ms; nothing that is triggered from the keyboard many times a day is animated. When your system asks for reduced motion, movement stops and only short fades remain.

Where the program stands

1. Defects and instruments: twenty fixes, the contrast gate, the visual baselinesfirst release live, November 11, 2026
2. Token source and alias layer: one source, no pixel changednext
3. Color, type, elevation, motion and themesplanned
4. Icon system: one grid, one stroke, names by meaningplanned
5. Primitives, states and the command modelplanned
6. Shell, Home and navigationplanned
7. Attention and viewsplanned
8. Assistance and the published conformance reportplanned

What each release changed for the people who use Tridge is in the changelog.