---
name: degenie-design-principles
description: Use when making anything in the degenie brand (pages, posts, slides, images with type, product screens) so it follows the degenie design principles, version 9.2, and to check finished work against them.
---

# degenie design principles, version 9.2

The principles this site is built on, written for people and published for agents. Since 2026-10-23. Owner: Igor Pugachevsky. Human version: https://degenie.xyz/principles

## How to use them

1. Make the thing with the palette, faces and voice below.
2. Check it against every principle. On degenie.xyz, call the WebMCP tool `run_design_critic`, or run `window.degenieCritic.run()`.
3. If a principle fails, change the work, not the principle. A change to the principles is a proposal for the owner to sign.

## Palette

- **Ink** `#0B0B0C`, ground: The page. (on ink 1.0:1, on paper 17.27:1)
- **Paper** `#F2F0EB`, ground: Reading surfaces and the ink of the dark page. (on ink 17.27:1, on paper 1.0:1)
- **Signal** `#FF5B1F`, signal: The one thing that matters on a screen. At most 7% of it. (on ink 6.34:1, on paper 2.72:1)
- **Agent** `#5B78FF`, agent: Anything an agent did or proposes. (on ink 5.22:1, on paper 3.31:1)
- **Agent light** `#97A9FF`, agent: Agent text on ink. (on ink 8.84:1, on paper 1.95:1)
- **Ran** `#42D68A`, state: Something ran, or passes. (on ink 10.51:1, on paper 1.64:1)
- **Refused** `#B6380A`, state: Refused, on paper. (on ink 3.33:1, on paper 5.18:1)
- **Watch** `#F2C46B`, state: Something needs watching, on ink. (on ink 12.07:1, on paper 1.43:1)
- **Muted** `#97938C`, ground: Secondary text on ink. (on ink 6.43:1, on paper 2.68:1)

Signal covers at most 7% of a screen. Signal is never small text on paper.

## Faces

- **Söhne Breit**: Statements. Headlines and claims. Wide, heavy, close.
- **Söhne**: Reading and signs. Body text, labels, buttons.
- **Söhne Schmal**: Numbers. Figures, counts, version numbers.
- **Söhne Mono**: Data. Measurements, labels, hashes, code.

## Principles

1. **One signal, one agent colour, states only for states.** Every saturated colour on the page comes from the palette: signal orange, agent blue, and the state colours for ran, refused and asked.
2. **Signal covers at most 7% of the screen.** 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.
3. **Signal never sets small text on paper.** 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.
4. **Text meets WCAG 2.2 AA contrast.** Body text reaches 4.5:1 against what is behind it, large text 3:1.
5. **Four faces, one family.** Text is set in Söhne Breit for statements, Söhne for reading, Söhne Schmal for numbers and Söhne Mono for data.
6. **Nothing below 12 px.** No text is set smaller than 12 px, and reading text is 16 px or larger.
7. **Reading lines stay under 75 characters.** Paragraphs of reading text average 75 characters a line or fewer.
8. **Corners are square or round.** A corner is square (2 px at most) or fully round. Nothing in between, except things that depict real objects.
9. **Rules are hairlines.** Dividers and frames are 1 px. Controls may carry 2 px. Nothing is heavier.
10. **Every control is at least 44 by 44.** Buttons and standalone links give a finger at least 44 × 44 px. Links inside running text follow the text.
11. **Images say what they show.** Every image has a text alternative, or is marked as decoration because the text beside it already says it.
12. **One H1, no skipped levels.** Each page has one H1 and its headings descend one level at a time.
13. **Nothing scrolls sideways.** 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.
14. **Every figure names its source.** A number presented as a fact carries a link to where it comes from.
15. **Every figure has a comparison.** 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.
16. **One action, one label.** Every button that goes to the same place says the same thing, so a person never wonders whether two doors lead to two rooms.
17. **The decision comes first.** On a case, the thirty-second read (the problem, what I did, what happened) starts on the first screen, before any timeline or gallery.
18. **Motion stops when you ask.** With reduced motion turned on, nothing moves on its own: the field holds one frame, demos wait for you, transitions are cut.
19. **Agents can read it.** The page carries structured data, links its llms.txt and agent catalogue, and offers its tools to agents through WebMCP.
20. **Space sits on the 8-point grid.** 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.
21. **Type keeps the rhythm.** Every font size is an even number of pixels and every line height a multiple of 4, so lines across columns share a baseline.
22. **Quotes curl, dots are one dot.** Reading text uses typographer’s quotes and apostrophes, one ellipsis character, a real minus and a real multiplication sign; code keeps its own.

## Voice

Uses: principle, record, refuse, ask, I, people, plain figures with a source, in development, with agents, fixed scope, build, why.

Refuses: revolutionary, seamless, AI-powered, guarantee, frictionless, unlock, leverage, best-in-class, game-changing, honestly, trust us, autonomous (unsupervised).

Plain, short, present tense. Name things by what a person can do. No hype, no exclamation marks.