SID
The eye stays human.
The system carries it.
Foundations, components and compositions. One authored source in Cortex; the same decisions carried into the work.
One name. Two settings.
The text and stacked wordmarks.
Studio Super Intelligence
TextStudio
Super
Intelligence
Colour has a job.
Ground, ink and signal—not an ambient decoration.
Paper
#FFFFFFRGB 255 255 255CMYK 0 0 0 0paperInk
#000000RGB 0 0 0CMYK 73 71 64 87inkGraphite
#272727RGB 39 39 39CMYK 79 75 71 53graphiteGrey 51
#515151RGB 81 81 81CMYK 72 65 61 16grey-51Dusk · signal only
#5F5295RGB 95 82 149CMYK 71 73 2 1duskHum · signal only
#6F75D7RGB 111 117 215CMYK 63 45 0 0humThe signal instruments
Signal · Go · field success
#8E00FFRGB 142 0 255CMYK 66 63 0 0signal-goSignal · Live · live pulse
#2CFF05RGB 44 255 5CMYK 40 0 60 0signal-liveColour is an instrument, never a field. Hum and dusk mark signal only: live, linked, selected, canonical. The live green can always be used. A state is also named in text.
CMYK is in percent, converted from sRGB through the Generic CMYK Profile (relative colorimetric, LittleCMS 2.19). It is a starting point for print, not a press proof; a press run needs the press profile of its printer. Match Pantone on a physical swatch book.
Six voices. One system.
Prose, labels and apparatus—each in its own measured voice.
Source values shown. The browser checks the rendered specimens when the fonts load.
Scheherazade New for the sentence. Red Hat Mono for the apparatus. Six voices from Figma 653:363, carried by the same source tokens.
Try the six voices
Type into the specimen. Change its voice. The words stay; the measure changes. These are the actual local faces, not an image of type.
Two specialist sizes
The floor title uses --fz-h0; the terminal uses --fz-mono-cli. They do not add two more voices to this six-part register.
Regular faces are supplied locally. Italic is a browser-oblique treatment, not a separate italic font file.
The full canvas. Four recipes.
One column, a joined pair, or the whole width.
400 + 40 + 400 + 40 + 400 = 1280
Three columns, two gutters, one full canvas. Join two columns and the gutter between them to make the 840 wide measure. Arrange those measures in four ways.
01 / Asymmetric A
Supporting column + reading sheet
400 + 40 + 840 / 1280px
02 / Asymmetric B
Reading sheet + supporting column
840 + 40 + 400 / 1280px
03 / Triptych
Three equal parts
400 + 40 + 400 + 40 + 400 / 1280px
04 / Monolith
One continuous surface
1280 / 1280px
Try the four arrangements
Full canvas
One full row. Change the arrangement above; on a phone the content reads in order.
The screen changes. The rules do not.
The canvas fills the available space up to its cap. Narrow screens stack the content; they do not shrink the text. These are viewing widths, not five new container tokens.
- 180 / Thumb
- 360 / Phone-safe
- 400 / Mobile
- 840 / Tablet
- 1280 / Desktop
The spacing spine
8pxWithin a cluster
16pxCard rhythm
24pxPassage rhythm
40pxBetween columns
80pxBetween groups
120pxBetween sections
No icons. One hand.
Meaning is carried by type and the square dots; the drawing is one portrait.
SID uses no icons. A word says what a thing is. A square dot says what state it is in. The dots are drawn once, as the Hub's square dots, and every part takes them from there. When a meaning has no word yet, the answer is a word.
The drawing is the graphic language: one portrait, rendered as a raster of glyphs. The still is Jacob's homepage image, cropped to the face and set on paper, its tone printed only by which glyph sits in each of 57 rows of 57 cells. The other is the same portrait in motion: she blows a breath up into her fringe, which lifts, flutters and settles, one loop of 72 frames at 24 a second. Every frame is a warp of the same field, drawn again in glyphs; nothing is scaled or faded. It pauses on request and holds the still when motion is reduced. The counts under each are read from the drawing on show.
Written the way we speak.
Six treatments of one sentence, taken from how the studio talks and set as academic prose.
Sample · set in the system it describes
A design system is usually described by its look. That description is accurate, and for an agent it is nearly useless: what a machine can act on is the rule behind the look, why a title is set in capitals, where a label sits, how much air a paragraph may take, every size read from the tokens.1 We wrote those rules down once, in a form that can be read, and decorated built from them. What the rules do not cover is a proposal, not a permission. This paragraph was set by the system it describes, which we mention only in passing.
Roman · states
The system holds the look.
Roman states what is. It is the default and carries nearly all of the page.
Italic · the lean
The label sits over the sentence.
One oblique, in em: a voice leaning on a word. Titles, names and foreign words stay roman.
The tism · the double lean
Nothing was decorated, as it happens.
Double italic, visibly steeper than the lean. It comes last and once, as the trolling note: now you hear me.
Underline · the pressed word
It is the system we deliver.
A word pressed down, as in speech. Prose only, hairline thickness, clear of the descenders, never a link.
Strikethrough · the revision
We said look system.
Struck, not deleted. The first reading stays legible under the line, and the correction follows it.
Bold · the explainer
Behind its glass, or not at all.
Bold is the explainer, and it is legal only behind its glass, the note that opens on touch. This showcase, the posters and the examples set none.
1. system.json / type.fz-body-1 / 14px.
The parts that do things.
Existing components, exercised rather than pictured.
Actions
Try keyboard focus. The label and the input stay connected.
What a component must carry
A purpose, supported inputs, named states and a usable keyboard/touch path. A state example is not a service response.
.ctl-btnAction: rest / hover / focus / pressed / disabled.ctl-chipLocal selection, paired with an accessible pressed state.fieldLabel / input / hint / validation.hub-list-rowLeading / main / trailing contentThe Hub supplies real data, identity, permissions and actions. SID supplies their visual form. Glass is a contextual treatment. CLI is a register. Neither replaces the system.
The Hub, in parts.
Atoms first, then the rows that carry the work.
100_atoms
The smallest chrome primitives — pills, dots, badges, warmth, chips, buttons, and labels. Design these before rows.
hairline box
Pills
default
print square · serif 8 · +20% track
ghost
graphite fill · paper text · no border
accent
signal-go border
attention
signal-attn border
filled
ink fill · paper text
Square dots
L0–L5 · ghost to solid
L4 hum · solid
L0–L5 · one dot · cycles 2.4s
File / status badges
polished
solid dot
draft
ring dot
locked
struck ring
Filter chips
serif 8 · ink-03 hover · square
ink fill · paper text · square
Buttons
ink fill · hard flip · serif 8
paper · line-box border · serif 8
glass tint · square · blur
disabled attr · ink text
Labels & meta
Section header
mono caps · meta right
A note in a hairline box — measured, not asserted.
OwnerJacob Hägg
key 80px · val serif
THE SHELF-MARK · the address a part carries
005acc.0001tier 200
dept · accession · slot — the real acc.0001 address; accession.py's Phase-5 vocabulary, minted 2026-07-10
THE FOLIO WALK · prev · folios · next
links, so the keyboard walks it by nature · the current folio prints solid
200_rows
The workhorses — stream, signal, action, presence, and entity patterns that carry most product UI.
s-3 inset · under parent
channel · live dot · focus
status · title · body · owner
loud frame · chips · digest link
position is the DOM order, counted by CSS — never a typed number
every date is the accession register's own — measured, not performed
immutable version pins (/v/) + the active SID runtime (/sid/)
Project / plate card
P2axel
#08Canon refinery
Review token drift before ship.
P1jacob
live
#12Cortex hub redesign
Wire the 100–500 register into styles.css and ship the specimen page.
P3hermes
#04Scout batch review
Staged — waiting on operator.
rest · hairline box
hot · ink box
dim · quiet box
Domain / data bar
meter instrument
Child row
indented childwatching
Presence card
agent · scout
Staging batch · 3 drafts ready
Entity card
reviewLifecycle card
One status, one owner, one line of body — the entity as it moves through the door.
owner · op1Comment thread
anchor · prose · ctl-btn row
Signal Lock band
One loud framed message the operator cannot miss.
blocker∂ open digest
THE QUEUE · the work waits in order
today
Review token drift before ship
due
now
Press the hub register
working
next
Recut the wall labels
THE CHRONOLOGY · dated milestones
2026-07-09THE FLOOR opens — the mechanism, empty by design
2026-07-10acc.0001 — 005 HUB, the first part on the wall
2026-07-10acc.0002–0013 — the floor fills, thirteen of thirteen
THE BUILD LEDGER · the versions that exist
v3.54EPOQ III’s first pin — the consumer snapshotimmutable
v3.58.1EPOQ III’s current pin — cut at the releaseimmutable
SIDSuper Intelligent Design — the system of recordlive
Stillness is the default.
No duration or easing tokens exist. The law is a limit.
TokensSID defines no duration or easing token: 0 of 106 tokens. The limits below are source law, not tokens.TransitionColour, opacity and visibility only. 0.15s at most, plain ease or linear, no cubic-bezier. Nothing else moves.Hub instrumentsThe one named exception, such as the ripple dot in the Hub's square dots: up to 0.5s.Reduced motionWith prefers-reduced-motion: reduce, animation and transition are off and scrolling is instant. This page and the runtime styles both carry the rule.One note. Three formats.
The image note in 1:1, 4:5 and 9:16, then one source in two variations running live, the deck and the project page, with the PDF and the document.
Measured, not promised.
Contrast from the hex values, sizes from the tokens.
Ratios are WCAG 2.x, computed from the hex values in system.json. Text in SID is ink on paper, or paper on ink. The other inks are signal, not text; the table says what each would give and how often the source declares it as a text colour.
Ink on paper21.00:1AA passAA large passAAA passdeclared 249x
Graphite on paper14.94:1AA passAA large passAAA passdeclared 14x
Grey 51 on paper7.94:1AA passAA large passAAA passnot declared
Dusk on paper6.71:1AA passAA large passAAA faildeclared 1x
Hum on paper4.04:1AA failAA large passAAA faildeclared 5x
Signal go on paper5.84:1AA passAA large passAAA faildeclared 3x
Signal live on paper1.36:1AA failAA large failAAA faildeclared 1x
Paper on ink21.00:1AA passAA large passAAA passdeclared 34x
Graphite on ink1.41:1AA failAA large failAAA faildeclared 14x
Grey 51 on ink2.65:1AA failAA large failAAA failnot declared
Dusk on ink3.13:1AA failAA large passAAA faildeclared 1x
Hum on ink5.20:1AA passAA large passAAA faildeclared 5x
Signal go on ink3.59:1AA failAA large passAAA faildeclared 3x
Signal live on ink15.41:1AA passAA large passAAA passdeclared 1x
7pxApparatus, in the mono voice, fz-mono-69pxCaptions, in capitals, fz-serif-814pxBody, fz-body-116pxThird heading, fz-heading-324pxPage title, fz-page-title36pxDisplay, fz-display48pxHero, fz-h01px / 2pxFocus ring in ink, offset from the control: 21.00:1 on paper, above the 3:1 non-text minimum.40pxMinimum height of the showcase's nav links, fields and disclosures: above the 24px AA target size, below the 44px AAA target size.Reduced motionSet out under Motion.WCAG sets no minimum text size; these are SID's own sizes, read from the tokens.
Make the next thing.
A composition is a consumer of the system, not a parallel system. The files to start from are below.
Select. Compose. Check.
Start with the output medium. Use a documented composition and existing parts. Change content in named slots. A missing part is a system proposal, not permission to invent an unregistered one.
Local runtime
<link rel="stylesheet" href="styles.css">The host resolves this path to its tested SID mount. Generated distributions are checked against the source manifest. They are not separately authored copies.
Downloads
system.jsontoken source (single authored source of every token). 15.0 KB.
system.cssgenerated :root token spine. 13.3 KB.
print.cssgenerated print register. 1.9 KB.
fonts/red-hat-mono-400.woff2Red Hat Mono 400 (only weight supplied). 12.3 KB.
fonts/scheherazade-new-400.woff2Scheherazade New 400 (only weight supplied). 97.0 KB.
fonts/OFL.txtSIL Open Font License + copyright notices for both fonts. 4.3 KB.
The posters and the two examples are under Applications, each with its own link.
Snippet, then the body, then the verdict — a comment is a small ruling.