NoPrettyColors Brokkr

NoPrettyColors design system

Brokkr

One system for every NPC screen. Brokkr holds the decisions behind NoPrettyColors' apps and dashboards: color, type, spacing, components, how we show data and how we write. Every NPC tool takes them from here, so a client sees one studio, not five apps.

The 24 NPC swatches. Signal 500 is the one emphasis.

Why Brokkr

The steady hand on the bellows

In the Norse myths, Loki bet his head that the dwarf Eitri could not forge three gifts finer than the treasures the gods already had. Eitri worked the metal. His brother Brokkr worked the bellows, and the rule was simple: the bellows must not stop, or the work is ruined.

Loki turned into a fly and bit him: on the hand, then on the neck, then on the eyelid. Brokkr kept the fire even. Out came Gullinbursti, a golden boar for Freyr; Draupnir, a ring for Odin that drops eight rings of equal weight every ninth night; and Mjölnir, Thor's hammer.

At the last bite, blood in his eyes, Brokkr let go for a moment. The hammer's handle came out short. The gods still judged it the best of all the gifts.

That is the job of a design system. It is not the hammer. It is the steady hand on the bellows that keeps every piece consistent while the interruptions keep coming: a deadline, a new client, one more dashboard.

Draupnir, the ring that makes rings

1 → 3

token source → outputs: CSS custom properties, Tailwind theme and this site. Next: Claude Design System and Brokkr plugin.

One source makes every output, the same weight every time.

Mjölnir, the short handle

15

screen exceptions, each with its reason

The system says where it falls short. Every place screen departs from print is written down.

The bellows

4

audits on every token change: component, contrast, layout and type

Rules that hold under pressure, checked by script, not by eye.

Built for NPC's tools

Named in the same myths

Brokkr serves the apps NPC builds for its own work and for its clients. Brokkr is the smith they all go back to.

ToolWhat it doesOn Brokkr
GimléProject control room: model, program, cost, decisions and topics at one data dateRebuilding on tokens v1.0
BifrostPlannedNot started
HliðskjálfPlannedNot started

Use Brokkr

Tokens

CSS custom properties and a Tailwind theme. Versioned files arrive with release v1.0.0; pin a version and it never changes.

Fonts

Noto Sans and Noto Sans Arabic, one family for screen, print, Revit and Claude. Served from this site under the SIL Open Font License.

Logos

The 10 official NPC logo files, as issued.

Rules

Color, type, layout, components, data presentation and voice. Pages for each come next.

Display56/72 Medium
Heading 140/52 Medium
Heading 228/36 Medium
Heading 320/24 Medium
Body text for reading16/20 Regular
Dense text for tables and panels13/16 Regular