{ "name": "degenie design principles", "version": "9.2", "since": "2026-10-23", "url": "https://degenie.xyz/principles", "owner": { "name": "Igor Pugachevsky", "url": "https://degenie.xyz/" }, "palette": [ { "name": "Ink", "hex": "#0B0B0C", "role": "ground", "use": "The page.", "contrastOnInk": 1.0, "contrastOnPaper": 17.27 }, { "name": "Paper", "hex": "#F2F0EB", "role": "ground", "use": "Reading surfaces and the ink of the dark page.", "contrastOnInk": 17.27, "contrastOnPaper": 1.0 }, { "name": "Signal", "hex": "#FF5B1F", "role": "signal", "use": "The one thing that matters on a screen. At most 7% of it.", "contrastOnInk": 6.34, "contrastOnPaper": 2.72 }, { "name": "Agent", "hex": "#5B78FF", "role": "agent", "use": "Anything an agent did or proposes.", "contrastOnInk": 5.22, "contrastOnPaper": 3.31 }, { "name": "Agent light", "hex": "#97A9FF", "role": "agent", "use": "Agent text on ink.", "contrastOnInk": 8.84, "contrastOnPaper": 1.95 }, { "name": "Ran", "hex": "#42D68A", "role": "state", "use": "Something ran, or passes.", "contrastOnInk": 10.51, "contrastOnPaper": 1.64 }, { "name": "Refused", "hex": "#B6380A", "role": "state", "use": "Refused, on paper.", "contrastOnInk": 3.33, "contrastOnPaper": 5.18 }, { "name": "Watch", "hex": "#F2C46B", "role": "state", "use": "Something needs watching, on ink.", "contrastOnInk": 12.07, "contrastOnPaper": 1.43 }, { "name": "Muted", "hex": "#97938C", "role": "ground", "use": "Secondary text on ink.", "contrastOnInk": 6.43, "contrastOnPaper": 2.68 } ], "faces": [ { "family": "Söhne Breit", "role": "Statements", "use": "Headlines and claims. Wide, heavy, close." }, { "family": "Söhne", "role": "Reading and signs", "use": "Body text, labels, buttons." }, { "family": "Söhne Schmal", "role": "Numbers", "use": "Figures, counts, version numbers." }, { "family": "Söhne Mono", "role": "Data", "use": "Measurements, labels, hashes, code." } ], "limits": { "signalCoverageMax": 0.07, "minTextPx": 12, "minReadingTextPx": 16, "maxCharactersPerLine": 75, "maxRuleWidthPx": 2, "minTargetPx": 44, "cornerRadius": "square (≤2 px) or fully round", "spaceStepPx": 8, "spaceHalfStepPx": 4, "hairlineMaxPx": 2, "typeSizeStepPx": 2, "lineHeightStepPx": 4, "punctuation": "typographer's quotes, one-character ellipsis, real minus and multiplication signs" }, "principles": [ { "id": "palette", "title": "One signal, one agent colour, states only for states", "statement": "Every saturated colour on the page comes from the palette: signal orange, agent blue, and the state colours for ran, refused and asked.", "n": 1, "measurement": "Reads the computed text, fill and border colour of every visible element. Any colour with saturation above 32% must be within a small distance of a palette colour. Images and canvases are excluded." }, { "id": "signal-budget", "title": "Signal covers at most 7% of the screen", "statement": "The signal colour marks the one thing that matters on a screen. Filled signal, including the hero field, stays within 7% of the visible area.", "n": 2, "measurement": "Adds the visible area of every signal fill, a third of the line boxes of signal type, and the hero field's own coverage, which the field measures by reading back a quarter-size copy of its frame. Divides by the screen." }, { "id": "signal-text", "title": "Signal never sets small text on paper", "statement": "Orange on paper reaches only 2.7:1, so signal is used there as a fill, a rule or display type of 24 px and above, never as small text.", "n": 3, "measurement": "Finds text whose colour is signal on a background lighter than mid-grey and smaller than 24 px." }, { "id": "contrast", "title": "Text meets WCAG 2.2 AA contrast", "statement": "Body text reaches 4.5:1 against what is behind it, large text 3:1.", "n": 4, "measurement": "Composites each text colour over the backgrounds behind it and computes the WCAG 2.2 ratio. 4.5:1 for body text, 3:1 for 24 px and up or 18.66 px bold. Text whose colour or background is in the middle of a transition is measured once it settles, as text mid-fade already was. It does not see a decorative layer painted over text; one did, on two case stages, until a review caught it." }, { "id": "faces", "title": "Four faces, one family", "statement": "Text is set in Söhne Breit for statements, Söhne for reading, Söhne Schmal for numbers and Söhne Mono for data.", "n": 5, "measurement": "Reads the first family in the computed font stack of every text element." }, { "id": "size-floor", "title": "Nothing below 12 px", "statement": "No text is set smaller than 12 px, and reading text is 16 px or larger.", "n": 6, "measurement": "Reads the computed font size of every text element; reading paragraphs must be 16 px or larger." }, { "id": "measure", "title": "Reading lines stay under 75 characters", "statement": "Paragraphs of reading text average 75 characters a line or fewer.", "n": 7, "measurement": "For paragraphs over 140 characters, counts rendered lines from their client rectangles and divides the characters by the lines." }, { "id": "corners", "title": "Corners are square or round", "statement": "A corner is square (2 px at most) or fully round. Nothing in between, except things that depict real objects.", "n": 8, "measurement": "Reads the computed corner radius; anything above 2 px must be at least half the element's shorter side." }, { "id": "rules", "title": "Rules are hairlines", "statement": "Dividers and frames are 1 px. Controls may carry 2 px. Nothing is heavier.", "n": 9, "measurement": "Reads computed border widths on every side of every visible element." }, { "id": "targets", "title": "Every control is at least 44 by 44", "statement": "Buttons and standalone links give a finger at least 44 × 44 px. Links inside running text follow the text.", "n": 10, "measurement": "Measures the box of every link, button and form control that is not a link inside running text." }, { "id": "alt", "title": "Images say what they show", "statement": "Every image has a text alternative, or is marked as decoration because the text beside it already says it.", "n": 11, "measurement": "Checks every image for alt text, every SVG with an image role for a title, every canvas for a description or aria-hidden." }, { "id": "headings", "title": "One H1, no skipped levels", "statement": "Each page has one H1 and its headings descend one level at a time.", "n": 12, "measurement": "Lists every heading in order, counts H1 elements and looks for skipped levels." }, { "id": "overflow", "title": "Nothing scrolls sideways", "statement": "At any width the page fits the screen, no text is cut off at its edge, and no figure or heading is wider than its box; only tables and diagrams scroll inside their own frame, and anything that scrolls inside its own frame draws its scrollbar in that frame’s colours or hides it on purpose.", "n": 13, "measurement": "Compares the document's scroll width with its client width and names what sticks out, looks for any line of text that an edge cuts off, measures every figure, heading, button and cell against the box it sits in, and finds every frame that scrolls on its own and leaves its scrollbar to the system on a surface of the opposite colour." }, { "id": "claims", "title": "Every figure names its source", "statement": "A number presented as a fact carries a link to where it comes from.", "n": 14, "measurement": "Every element marked as a figure must have a link or a named source in its box." }, { "id": "compare", "title": "Every figure has a comparison", "statement": "A number presented as a fact says what it is compared with: a scale, a share, a rank, a baseline or a rate. A figure on its own makes the reader do the division.", "n": 15, "measurement": "Every element marked as a figure must carry, in its box, what it is compared with: the shared scale of a funnel, a share, a rank, a baseline or a rate." }, { "id": "one-label", "title": "One action, one label", "statement": "Every button that goes to the same place says the same thing, so a person never wonders whether two doors lead to two rooms.", "n": 16, "measurement": "Groups every button and the nav door by where it goes, and fails when one destination has two labels. Arrows don't count as words." }, { "id": "decision-first", "title": "The decision comes first", "statement": "On a case, the thirty-second read (the problem, what I did, what happened) starts on the first screen, before any timeline or gallery.", "n": 17, "measurement": "On a case page, finds the thirty-second read and measures where it starts against the height of the first screen, at every width." }, { "id": "motion", "title": "Motion stops when you ask", "statement": "With reduced motion turned on, nothing moves on its own: the field holds one frame, demos wait for you, transitions are cut.", "n": 18, "measurement": "With reduced motion on, counts running infinite animations and running scripts. Otherwise checks that reduced-motion rules exist and that every scripted motion can be stopped." }, { "id": "agents", "title": "Agents can read it", "statement": "The page carries structured data, links its llms.txt and agent catalogue, and offers its tools to agents through WebMCP.", "n": 19, "measurement": "Parses the structured data, looks for the agent catalogue and llms.txt links, and lists the WebMCP tools registered." }, { "id": "grid", "title": "Space sits on the 8-point grid", "statement": "Every padding, margin and gap is a multiple of 4 px, 8 where the space is between things; a hairline of 1 or 2 px may separate cells.", "n": 20, "measurement": "Reads the computed padding, margin and gap on every side of every visible box outside the product prototypes. Each value must be a multiple of 4 px; values under 3 px pass as hairlines. The build already rounds every size in the stylesheets and inline styles to the grid, so the check measures whether the browser agrees." }, { "id": "rhythm", "title": "Type keeps the rhythm", "statement": "Every font size is an even number of pixels and every line height a multiple of 4, so lines across columns share a baseline.", "n": 21, "measurement": "Reads the computed font size and line height of every text box. Sizes must be even pixels and line heights multiples of 4 px, which is what lets two columns of different type share a baseline. Fluid sizes are rounded at build with CSS round()." }, { "id": "punctuation", "title": "Quotes curl, dots are one dot", "statement": "Reading text uses typographer’s quotes and apostrophes, one ellipsis character, a real minus and a real multiplication sign; code keeps its own.", "n": 22, "measurement": "Walks every run of reading text outside code and the prototypes and looks for a straight quote or apostrophe, three dots in a row, or a hyphen standing in for a minus before a figure. The build converts them; the check catches what arrives another way." } ], "voice": { "uses": [ { "word": "principle", "why": "a rule a person wrote and a machine checks" }, { "word": "record", "why": "what happened, readable afterwards" }, { "word": "refuse", "why": "a system that can say no" }, { "word": "ask", "why": "the agent stops and checks with a person" }, { "word": "I", "why": "the work is owned by name" }, { "word": "people", "why": "the ones using the product" }, { "word": "plain figures with a source", "why": "every number can be checked" }, { "word": "in development", "why": "status stated as it is" }, { "word": "with agents", "why": "how the work was made, disclosed" }, { "word": "fixed scope", "why": "what is made, agreed before starting" }, { "word": "build", "why": "design that ships as working code" }, { "word": "why", "why": "every refusal names its reason" } ], "refuses": [ { "word": "revolutionary", "why": "hype that nothing can prove" }, { "word": "seamless", "why": "hides the seams that matter" }, { "word": "AI-powered", "why": "says nothing about what it does" }, { "word": "guarantee", "why": "nothing can enforce it" }, { "word": "frictionless", "why": "friction protects people's money" }, { "word": "unlock", "why": "marketing filler" }, { "word": "leverage", "why": "jargon in place of a verb" }, { "word": "best-in-class", "why": "a ranking without a source" }, { "word": "game-changing", "why": "hype that nothing can prove" }, { "word": "honestly", "why": "candour shows in the work itself" }, { "word": "trust us", "why": "receipts instead of reassurance" }, { "word": "autonomous (unsupervised)", "why": "someone always holds the rules" } ] }, "changelog": [ { "version": "9.2", "date": "25 October 2026", "change": "Three checks join the nineteen, and they measure craft rather than hygiene: space sits on the 8-point grid, type keeps a 2-px size scale with line heights on 4 px, and reading text uses typographer's punctuation. They hold because the build now enforces them: a pass over every stylesheet and inline style rounds each size to the grid, and a pass over the copy curls the quotes. Also new: one footer across the site, with the Paris time, the address, and plain links that ask an AI about this site; one header for every essay, with a contents list built from its headings; and a numbered cover series for the writing, drawn at build in the wordmark's dither." }, { "version": "9.1", "date": "25 October 2026", "change": "The nineteen checks stay nineteen; the fit check measures more. Anything that scrolls inside its own frame now draws its scrollbar in that frame's colours or hides it on purpose. The De.Fi prototypes showed black system scrollbars down their white screens on machines that always show scrollbars, because this dark site's colour scheme reached inside them. No screenshot caught it: the headless browser that takes them hides scrollbars, so the check now measures what the eye there could not see." }, { "version": "9", "date": "24 October 2026", "change": "Three checks join the sixteen, and they measure understanding rather than hygiene: every figure has a comparison, one action has one label, and on a case the decision comes first. Two cases join the work: DEED's factory, and the DEED design system, read as a case study." }, { "version": "8.1", "date": "23 October 2026", "change": "The sixteen checks are unchanged. The page now opens with the ten principles I design by, each linked to the work where it was earned. The fit check also measures every figure, heading, button and cell against its own box, after a figure on the home page outgrew its column at 1,470 px. New on the site, each held to the same sixteen: prototype players that play a case's real screens and stop when you take over or ask for less motion, a year strip that places each project in its time, and a film on the home page with a pause button." }, { "version": "8", "date": "23 October 2026", "change": "The vocabulary changed, not the measurements. What this site called a law is now what it is: sixteen design principles, each with a check, and every page is measured against them as before. One check measures more: the fit principle also finds text cut off at the edge of the screen. Two exceptions recorded: each case opens in its client's own colours, inside its stage, plates and tile; and the wordmark's orange e, a logotype. Cut: a footer colophon, a sound toggle, measurement overlays on the headline, and copy that described the site instead of the work. The cases were rebuilt on one template. Fixed: on two case stages a decorative glow painted over the meta line, down to 1.6:1, which the contrast check cannot see; the glow now sits under the text, and the check says so." }, { "version": "7", "date": "22 October 2026", "change": "The principles run live: a check in the browser on every page, and the same check at build on every page at 390, 768 and 1280 px. The hero field keeps inside the signal budget by measuring its own frame. The signal bar behind the headline went, because it covered about 11% of a desktop screen; signal type below 24 px is banned from paper, because it reaches 2.7:1; fonts are subset to the characters in use, from 358 KB to 173 KB; the principles are published as data and as an agent skill, and the site offers its tools to agents through WebMCP." }, { "version": "4–6", "date": "October 2026", "change": "The signage system these principles grew from: ink and paper, one signal colour, Söhne by role, cases from the original working files with every figure sourced, the treasury instrument from DEED, the press kit, and pages that read without JavaScript." } ], "check": "Run the check: the WebMCP tool run_design_critic on any page, or window.degenieCritic.run() in a browser." }