1. 1Roles, not values

   Choose text-ink-soft, bg-action and rounded-card, never a colour as a number, or a size or a corner of its own in square brackets. The roles are worked out and tested once, so their contrast comes along.

2. 2Components, not recipes

   A button is +button, a field +field, a dialog +dialog, with the focus ring, the states, accessibility and right to left built in, as the behaviour is what goes wrong.

3. 3Short guidance, long tests

   What a script can check is a test, not a line in a guide: values outside the system, contrast, things to tap, text size and axe.

4. 4Tjaz' own values

   The logo's four colours and the button blue, Raleway, and the public pages' corners and shadows, so nothing falls back to what every site looks like.

5. 5Alike works alike

   What works alike looks alike, and the other way round: an answer in a quiz never looks like a button that takes you somewhere.

6. 6Derived from what's there

   The public pages' design became the system's, so moving a page into it changes nothing anyone sees, except faults fixed.

Never decoration around a question that's being answered: the warmth is in the answer buttons, the feedback and the screens between the questions. In quizzes whose youngest players are 6–8, questions and answers are one step bigger in the 2D quiz. The TV page (tjaz.com/tv), the big screen and the players' phones keep their own carefully made design.

Roles

• page

  #f8f7f2

• surface

  #ffffff

• surface-muted

  #f3f4f5

• ink-soft

  #575e71

• line

  #e3e4e7

• line-strong

  #8b909d

• action

  #2f3f65

• action-hover

  #3f5588

• action-edge

  #1f2942

• on-action

  #ffffff

• focus

  #3f5588

• danger

  #ab0002

• danger-fill

  #da2d23

• on-danger-fill

  #ffffff

• success

  #386805

• success-fill

  #73cd00

• on-success-fill

  #193300

• warning

  #7d4d02

• warning-fill

  #e79301

• on-warning-fill

  #3f2501

• info

  #255e89

• info-fill

  #7bc3fe

• on-info-fill

  #012e4c

Contrast

Every pair of text and background a role is used in, with WCAG's contrast: at least 4.5:1 for text and 3:1 for a field's edge. A test holds every pair to it.

Tjaz' own colours

The logo's orange

• tj-orange

  #e79301

• 50

  #fff5ea

• 100

  #ffebd5

• 200

  #fed8ae

• 300

  #fec078

• 400

  #f6a63b

• 500

  #e19011

• 600

  #bf7903

• 700

  #9d6301

• 800

  #7d4d02

• 900

  #613b01

• 950

  #3f2501

The logo's green

• tj-green

  #73cd00

• 50

  #e9ffdc

• 100

  #d1ffb4

• 200

  #acf975

• 300

  #96e856

• 400

  #7cd427

• 500

  #6cbe15

• 600

  #5aa008

• 700

  #488405

• 800

  #386805

• 900

  #2a5102

• 950

  #193300

The logo's red

• tj-red

  #da2d23

• 50

  #fff4f2

• 100

  #ffe9e5

• 200

  #ffd4cd

• 300

  #febab0

• 400

  #ff998a

• 500

  #fd7464

• 600

  #e94c3e

• 700

  #cf231b

• 800

  #ab0002

• 900

  #850504

• 950

  #580001

The logo's blue

• tj-blue

  #7bc3fe

• 50

  #f0f8ff

• 100

  #e1f1ff

• 200

  #c5e4ff

• 300

  #a2d4fe

• 400

  #79c1fb

• 500

  #67ace3

• 600

  #5191c4

• 700

  #3b77a6

• 800

  #255e89

• 900

  #114970

• 950

  #012e4c

The button blue

• 500

  #3f5588

• 600

  #2f3f65

• 700

  #1f2942

• 800

  #0e141f

Blue

• 100

  #eef0f7

• 200

  #b6c2dd

• 300

  #93a4cd

• 400

  #7087bd

• 500

  #4f6aab

• 600

  #3f5588

• 700

  #2f3f65

• 800

  #1f2942

• 900

  #0e141f

Ink, canvas and paper

• ink

  #16203a

• canvas

  #f4f3ec

• paper

  #f8f7f2

In a script in the browser, e.g. three.js or a canvas, the same colours are named imports fromshared/designTokens.js, so only the colours used end up in its bundle:import { inkSoft, tjOrange, numberOf, withAlpha } from "shared/designTokens.js". On the server, colour("ink-soft") and colourNumber("tj-orange") look one up by its name.

• 44 × 44 px

  Everything that can be tapped, also in the editor, where WCAG asks only for 24 px.

• 13 px

  No text is smaller, and only small print is that small.

• Contrast

  At least 4.5:1 for text, 3:1 for a field's edge and the parts of a control, from the roles.

• Focus

  What can be used shows a 4 px ring in the focus colour from the keyboard, with a gap of the surface round it: the focus-ring utility.

• Motion

  Movement with motion-safe:, transitions with motion-reduce:transition-none, and nothing moves more than 5 seconds without a way to stop it.

• Never colour alone

  Right and wrong are also said with an icon and a word.

• No sideways scroll

  Every page fits a 320 px phone, also in German's long words and in Arabic.

• Checked

  axe-core finds no WCAG 2.2 AA fault on any page, in English and in Arabic.

• test/server/designTokens.test.jsthe colours in shared/designTokens.js are the theme's, and every pair has its contrast
• test/server/designClasses.test.jscounts per file what's outside the system, with scripts/designClasses.js; a file's number may only go down
• test/server/logicalClasses.test.jsstart and end, never left and right
• test/ui/design.test.jsevery page on a phone and a laptop: axe, 44 px, 13 px and no sideways scroll
• test/ui/designCatalogue.test.jsthis page, with the same checks, and the look of every component as the browser computes it, so a change of a role or a component is seen before it goes live
• .claude/skills/tjaz-design/SKILL.mdhow Claude designs with it

Outside the system today

What test/server/designBaseline.json still allows, summed over its 195 files. It may only go down.