DDS 4 — Industrial Instrument

01 · A fourth system, and the opposite of the third

DDS-3 is a system of refusals: 4px corners, hairline borders, no pills, no circles, no shadows. DDS-4 is built from exactly what DDS-3 forbids. Its corners are soft, its LEDs and knobs are round, and depth is not decoration but the whole grammar — a raised key, an inset well and the body they sit on are three different things, and you can tell them apart with your eyes closed to colour.

Pick one per product. A DDS-4 key dropped into a flat DDS-2 screen reads as a bug, not a feature.

It declares its own names — .dds4-* in CSS, Dds4* in Dart — so it compiles beside every other system with no collision, the same discipline DDS-3 set.

02 · Five lanes

DDS-3 was three lanes. DDS-4 needs five, because it has two things no earlier system had: an instrument that owns its own colours, and motion that is part of the specification rather than a polish pass.

Neutrals — warm, never blue

DDS-3 took Taegeuk's cool, faintly blue greys. DDS-4 goes the other way: a beige-grey enclosure in light mode, graphite in dark — the colour of a piece of hardware, not of a screen.

The accent — one token, plus its edge

The hue still comes from dot-tokens.yaml § brand_colors, which remains the registry for all four systems. DDS-4 adds one companion value, accent_edge: the hard bottom edge under an accent key. Without it the ActionKey is a flat pill and the whole illusion collapses.

dani.tools' Fuchsia Pink. The indigo edge is deliberate — a cool shadow under a warm key.

Unlike DDS-3, the accent splits by mode. DDS-3 argued that a fill is what text sits on, not what it sits against, so one value serves both modes. That holds for a flat button. It does not hold for a key that is meant to look lit: a lit key reads brighter in the dark, and the instrument would look switched off without it. The logo tile still never inverts.

.dds4-subs.dds4-light { --accent:#007504; --on-accent:#FFF;    --accent-edge:#003302; --tile:#007504; }
.dds4-subs.dds4-dark  { --accent:#00D40A; --on-accent:#0B0B0B; --accent-edge:#005504; --tile:#007504; }

Adding a product is two rules and never a new token. The gallery's product switch does exactly this — try subs and go in the foundations panel above.

03 · The instrument owns status

DDS-2 and DDS-3 both refuse a semantic palette: success is a ✓, warning is a ! and a border, and the accent means exactly one thing. DDS-4 has green, amber and red — and it can, because those colours do not belong to the brand. They belong to the device. An LED is green because LEDs are green; an LCD is amber because LCDs are amber. A pink product and a green product have the same amber display and the same green light.

Three laws stop that from becoming a palette:

04 · Depth is four layers, exactly

Every surface is exactly one of these. A fifth is a bug. Raised sits on a unit; a well sits in a unit or a raised panel; nothing sits on a well except its content.

Selected means sunk. A selected key sits 3px down with its edge gone, the way a latched hardware button does — never a border, never a fill swap on its own. And there is exactly one ActionKey per screen: the accent pill that starts the job. It hums a ±0.8px vibration while busy, sits pressed in, and turns green when done.

Radii — soft, and each one has a job

05 · The LCD

The readout is the system's voice. Amber phosphor on near-black glass, a slow scanline that sweeps it every 3.2 seconds, and a stepped six-frame flicker whenever the mode changes — like an old display warming up. Results decode into place with ScrambleText; numbers roll like an odometer, each column a little slower than the one to its right, so a change ripples across the figure.

06 · Type

DDS 2's faces, at instrument sizes. Space Mono does triple duty: data, the LCD, and the stencil — the uppercase, +1.3-tracked label that names every group as NN — NAME, where the number is the panel's position on the device. Uppercasing is the label widget's job and nobody else's; a widget that uppercases user content breaks an email address.

--sans: 'Space Grotesk', system-ui, sans-serif;
--mono: 'Space Mono', ui-monospace, monospace;

07 · Motion is in the spec

Every control moves like a part. The segmented indicator springs past its target and settles; the toggle knob overshoots; the dial needle swings; a new tray card flies in with a slight spin; a green check pops in rotating. These are tokens, not taste:

08 · Forty widgets

This is the part that makes DDS-4 a system rather than a mood. Every widget below exists in dds4.cssand the gallery, and the Flutter package ports dani.tools' shipped widgets under Dds4* names.

09 · A whole instrument

The parts composed into one screen: dani.tools' image converter. Pick a format and the LCD flickers to the new mode. Press Convert and the system shows busy three ways at once — the ActionKey hums, the LED blinks, the grille waves and the segments fill — and done in green in all three.

10 · What DDS-4 does not have

11 · Adopting it

On the web, three classes:

<link rel="stylesheet" href="shared/design/dds4/dds4.css">
<body class="dds4 dds4-tools dds4-light">

In Flutter, a Theme around one screen is the migration path, as in DDS-3:

Theme(
  data: dds4Theme(Dds4Palette.dark(Dds4Accent.tools)),
  child: const ConverterScreen(),
)

Fonts are declared as family names only — no google_fonts, no runtime fetch. The app bundles the six files from shared/design/dds4/fonts/. dani.tools still ships its own copy of the kit; moving it onto the package is a rename, not a redesign.