BRAND GUIDELINES V1.0
iScratch design tokens
Semantic light and dark tokens, typography ramp, and WCAG 2.1 AA / AAA contrast matrix shared across iscratch and iscratch_lab.
WCAG 2.1 AA / AAA Validated
Core brand palette
Navy
#1B2170--navyvs White: 13.7:1AAA (13.7:1)
Navy Deep
#0E1230--navy-deepvs White: 18.2:1AAA (16.9:1)
Periwinkle (Dark Theme)
#9FAAFF--is-color-brand-primary-on-darkvs Navy Deep: 8.4:1AAA vs Dark (8.4:1)
Solder Amber
#F5A524--soldervs Navy Deep: 9:1AAA vs Navy Deep (9.0:1)
Paper
#F6F7FB--papervs Ink: 14.4:1AAA Surface (14.4:1)
Success Emerald
#0B7A62--successvs White: 5.3:1AA (5.3:1)
Contrast validation matrix
| Foreground | Background | Contrast Ratio | Minimum Required | WCAG AA Normal | WCAG AAA Normal |
|---|---|---|---|---|---|
| Navy (#1B2170) | White (#FFFFFF) | 13.7 : 1 | 4.5 : 1 | PASS | PASS |
| White (#FFFFFF) | Navy (#1B2170) | 13.7 : 1 | 4.5 : 1 | PASS | PASS |
| Ink (#14183A) | Paper (#F6F7FB) | 14.4 : 1 | 4.5 : 1 | PASS | PASS |
| Ink Muted (#4A5073) | White (#FFFFFF) | 7.8 : 1 | 4.5 : 1 | PASS | PASS |
| Accent Text (#8A5200) | White (#FFFFFF) | 6.4 : 1 | 4.5 : 1 | PASS | PASS (Large) |
| Success (#0B7A62) | White (#FFFFFF) | 5.3 : 1 | 4.5 : 1 | PASS | PASS (Large) |
| Periwinkle (#9FAAFF) | Navy Deep (#0E1230) | 8.4 : 1 | 4.5 : 1 | PASS | PASS |
| Periwinkle (#9FAAFF) | Pure Black (#000000) | 9.7 : 1 | 4.5 : 1 | PASS | PASS |
| Solder (#F5A524) | Navy Deep (#0E1230) | 9.0 : 1 | 4.5 : 1 | PASS | PASS |
| Navy (#1B2170) | Navy Deep (#0E1230) | 1.2 : 1 | 4.5 : 1 | FAIL (Never Use on Dark) | FAIL |
Typography hierarchy
Display 4XL (Sora 700 · Sentence case)Build electronics from scratch, wire by wire.
Heading 2XL (Sora 600 · Sentence case)Interactive breadboard, multimeter, and Arduino lab
Body Base (IBM Plex Sans 400 / 16px) Designed for kids, secondary & university students, engineering talent, and hobbyists.
Monospace Code (JetBrains Mono 400 / 14px)void setup() { pinMode(13, OUTPUT); }