---
name: Designesy
version: 0.4.6
description: Organization-first design system contract. Deterministic verification, DTCG-aligned tokens, 45 checks (42 automated).
standards:
  - WCAG 2.1 AA
  - APCA
  - DTCG 2025.10
  - EU AI Act Article 50
---

# Designesy Design System

## Overview

Organization-first design system with deterministic verification. The contract is the scoring basis: 42 automated checks extract live CSS, compare :root tokens, run WCAG/APCA contrast math, and score against 14 weighted categories; 3 more are left to a person. No LLM, no vibes.

## Tokens

### Colors

| Token | Value | Role |
|---|---|---|
| `color.ink` | `#f5f5f7` | Primary text / foreground |
| `color.muted` | `#a0a0a0` | Secondary text |
| `color.muted.dim` | `#7d7d7d` | Tertiary / meta text: 5.07:1 on paper and 4.54:1 on raised in dark (on lifted planes the dim tier rides --muted); light #686872, 5.33:1 on paper and 4.68:1 on lifted |
| `color.paper` | `#010102` | Page background |
| `color.surface` | `#0a0a0c` | Card / panel base |
| `color.surface.raised` | `#121216` | Elevated surface |
| `color.surface.lifted` | `#16161b` | Lifted / hover panel |
| `color.signal` | `#0A94FF` | Brand accent (internal token name; public products avoid this vocabulary) |
| `color.signal.light` | `#36A7FF` | Accent hover / focus lift |
| `color.activation` | `#F56B00` | Activated Orange, the exact RGB inverse of --signal: live moments only (a scan running, the live monitor, the activated mark). Selection is blue |
| `color.activation.ink` | `var(--activation)` | Activation used as text: --activation on dark (6.94:1 on paper, 6.00:1 on lifted); on light #B04D00 (5.20:1 on paper, 4.56:1 on lifted). Light --activation itself (#F56B00, 3.01:1 on white) is for fills only |
| `color.signal.access` | `#0A94FF · light: #016ABB` | Accessible signal: text, links and focus. Dark is Azure itself (5.75:1 or more on every dark surface); light is Deep Azure #016ABB (4.71 to 5.55:1 on the four light surfaces) |
| `color.signal.text` | `var(--signal-access)` | Signal used as text: --signal-access in both themes. --signal itself is a fill; on light it is 3.14:1 on white and never text |
| `color.paper.on.signal` | `#010102` | Text on an Azure fill, and only that: ink, 6.65:1 on Azure. White on Azure is 3.14:1 and is not used |
| `color.paper.white` | `#FFFFFF` | The constant white, the same in both themes: the dark increase-contrast ink, text on red fills (5.56:1 on #ca2323), shimmer and shine highlights |
| `color.signal.deep` | `#016ABB` | Deep Azure: Azure's own 251° hue, darker. Links, focus and selected states on light surfaces (4.71 to 5.55:1 on all four). Never a button fill |
| `color.signal.teal` | `#2CEBCA` | Gradient end only (Azure to Teal, on black or white). Never a standalone colour, never behind body text, never paired with the activation colour |
| `color.action` | `var(--signal) · light: #0A94FF` | Primary action fill: Azure in both themes |
| `color.on.action` | `#010102` | Primary action label: ink on --action, 6.65:1 in both themes |
| `color.action.pressed` | `#087ED9` | Primary action pressed fill, and the light-theme hover: --on-action on it is 4.96:1 |
| `color.ok` | `#4ade80` | Verification status: pass |
| `color.ok.ink` | `var(--ok)` | Pass status used as text: --ok on dark (11.97:1 on paper, 10.35:1 on lifted); on light, --ok mixed 70% toward --ink in oklab (#215f35, 7.38:1 on paper, 6.47:1 on lifted). Light --ok itself (#15803d, 4.26:1 on lifted) is for icons, dots, bars and tints |
| `color.warn` | `#facc15` | Verification status: warn |
| `color.warn.ink` | `var(--warn)` | Warn used as text: --warn on dark (13.62:1 on paper); on light, --warn mixed 70% toward --ink in oklab (#7f5e21, 5.76:1 on paper as painted, 5.06:1 on lifted). Light --warn itself (#b07d04, 3.51:1 on paper) is for icons, dots and tints |
| `color.error` | `#f87171` | Verification status: fail |
| `color.error.ink` | `var(--error)` | Fail status used as text: --error on dark (7.54:1 on paper, 6.52:1 on lifted); on light, --error mixed 70% toward --ink in oklab (#9e2c29, 7.13:1 on paper, 6.26:1 on lifted). Light --error itself (#dc2626, 4.10:1 on lifted) is for icons, dots, bars and tints |
| `color.grade.a` | `#22c55e` | Grade scale A (≥90%): score emblem, constellation, badge. Distinct from --ok (#4ade80, verification status) |
| `color.grade.b` | `#84cc16` | Grade scale B (≥80%): lime, score emblem arc |
| `color.grade.c` | `#eab308` | Grade scale C (≥70%): yellow, score emblem arc |
| `color.grade.d` | `#FB7185` | Grade scale D (≥60%): rose, score emblem arc (light #C9216C). Off orange, which is the brand's activation colour |
| `color.grade.f` | `#ef4444` | Grade scale F (<60%): red, score emblem arc |
| `color.grade.a.ink` | `var(--grade-a)` | Grade A used as text: --grade-a on dark (9.16:1 on paper, 7.91:1 on lifted); light #147839 (5.38:1 on paper, 4.72:1 on lifted). Light --grade-a itself (#15803d, 4.26:1 on lifted) is for arcs, borders and tints |
| `color.grade.b.ink` | `var(--grade-b)` | Grade B used as text: --grade-b on dark (10.56:1 on paper, 9.13:1 on lifted); light #497509 (5.30:1 on paper, 4.65:1 on lifted). Light --grade-b itself (#5D960C, 3.06:1 on lifted) is for arcs, borders and tints |
| `color.grade.c.ink` | `var(--grade-c)` | Grade C used as text: --grade-c on dark (10.88:1 on paper, 9.40:1 on lifted); light #896203 (5.33:1 on paper, 4.68:1 on lifted). Light --grade-c itself (#b07d04, 3.08:1 on lifted) is for arcs, borders and tints |
| `color.grade.d.ink` | `var(--grade-d)` | Grade D used as text: --grade-d on dark (7.75:1 on paper, 6.70:1 on lifted); light #BE1F67 (5.67:1 on paper, 4.98:1 on lifted, 4.67:1 on its own 12% emblem tint). Light --grade-d itself (#C9216C, 4.55:1 on lifted) is for arcs, borders and tints |
| `color.grade.f.ink` | `var(--grade-f)` | Grade F used as text: --grade-f on dark (5.54:1 on paper, 4.79:1 on lifted); light #CD2323 (5.26:1 on paper, 4.62:1 on lifted). Light --grade-f itself (#dc2626, 4.10:1 on lifted) is for arcs, borders and tints |
| `color.grade.b.light` | `#a3e635` | Lighter lime for grade-B text on dark surfaces (13.84:1 on paper); light value is --grade-b-ink (#497509, 5.30:1 on paper), because light lime #5D960C is 3.48:1 |
| `color.grade.d.glow` | `#FB7185` | Glow variant for the D-grade emblem and hero proof: the same rose as --grade-d (light #C9216C) |
| `color.signal.pos` | `#34d399` | Emerald for positive signal points in score breakdown |
| `color.live` | `#22c55e` | "is-live" status dot indicator (same value as --grade-a) |
| `color.error.text` | `#fecaca` | Light red-200 for error text on dark error surfaces (14.42:1 on paper); light value is --error-ink (#9e2c29, 7.13:1 on paper) |
| `color.amber.notice` | `#c9a227` | Amber for score-drawer remediation heading: contract-restrained (8.62:1 on paper); light value is --warn-ink (#7f5e21, 5.76:1 on paper), because light amber #b07d04 is 3.51:1 |
| `color.shimmer.1` | `#f1f7ff` | Wordmark shimmer gradient stop 1: decorative animation |
| `color.shimmer.2` | `#e1effe` | Wordmark shimmer gradient stop 2: decorative animation |
| `color.shimmer.3` | `#0286e9` | Wordmark shimmer gradient stop 3: decorative animation |
| `color.shimmer.4` | `#7cbafd` | Wordmark shimmer gradient stop 4: decorative animation |
| `color.shimmer.5` | `#d3e7fe` | Wordmark shimmer gradient stop 5: decorative animation |

## Typography

- **Root font size:** 16px (never lower: iOS Safari auto-zooms inputs below 16px)
- **Heading line-height:** 1.08 (tight, deliberate)
- **Body line-height:** 1.55 (relaxed, confident)
- **Font smoothing:** antialiased + grayscale (prevents subpixel artifacts on dark backgrounds)
- **Font synthesis:** none (prevents browser from synthesizing missing weights)
- **Text wrap:** balance (headings) + pretty (body)
- **Underline position:** from-font (uses font designer's position, not browser default)
- **Skip ink:** auto (underlines skip descenders: g, j, p, q, y)
- **Tabular nums:** required on numeric displays (scores, counts, prices, timestamps)

## Motion

- **Durations:** 150ms (quick), 250ms (fast), 350ms (medium), 400ms (slow), 600ms (default)
- **Easing:** cubic-bezier(0.22, 1, 0.36, 1) primary out; cubic-bezier(0.65, 0, 0.35, 1) in-out
- **Press scale (Takt):** 0.96 cells, 0.985 cards, 0.995 large surfaces: all above 0.95 floor
- **Reduced motion:** prefers-reduced-motion disables all animations and transitions
- **No transition:all:** use named properties to avoid layout-thrash

## Acoustic

- **Sound toggle:** aria-pressed + data-audio attribute on html/body
- **Reduced motion:** prefers-reduced-motion disables entrance loops, parallax, wordmark breath

## Takt

- **Press scale floor:** 0.95 (below reads as a glitch, not a press)
- **Cell press:** 0.96 (buttons, chips, toggles)
- **Card press:** 0.985 (cards, rows)
- **Large surface press:** 0.995 (panels, sheets)
- **Stagger enter:** animation-delay 60-120ms band
- **Soften exits:** transition on transform with ease-out

## Verification

- **Checks:** 45 (v01 to v29, v34 to v46, x01 to x03)
- **Categories:** 14 weighted (cadence 18, accessibility 15, semantic 12, motion 10, copywriting 8, tokens 9, takt 8, poise 7, identity 6, interaction 6, performance 6, responsive 3, security 5, spec 4)
- **A11y floor:** 60% (accessibility category below 60% caps overall score at C/70)
- **Standards:** WCAG 2.1 AA + APCA supplementary + DTCG 2025.10 + EU AI Act Art 50
- **v34 AI-Disclosure:** effective 2026-08-02 (EU AI Act Art 50)
- **v35 Forced-colors:** Windows HCM / Chrome forced-colors readiness

## Provenance

Contract v0.4.6. DTCG 2025.10 aligned. EU AI Act Art 50 check (v34) effective 2026-08-02. Forced-colors readiness (v35) per WCAG 2.2 HCM guidance.