---
name: Designesy
version: 0.4.0
description: Organization-first design system contract. Deterministic verification, DTCG-aligned tokens, 42 automated checks.
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. 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 |
| `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` | `#0133cb` | Brand accent (internal token name; public products avoid this vocabulary) |
| `color.signal.light` | `#3358e8` | Accent hover / focus lift |
| `color.activation` | `#fecc34` | Activation highlight (reserved) |
| `color.signal.access` | `#5d7bff` | Accessible signal (AA contrast on dark surfaces) |
| `color.paper.on.signal` | `#ffffff` | Text on signal fill |
| `color.ok` | `#4ade80` | Verification status — pass |
| `color.warn` | `#facc15` | Verification status — warn |
| `color.error` | `#f87171` | Verification status — fail |
| `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` | `#fb923c` | Grade scale D (≥60%) — orange, score emblem arc |
| `color.grade.f` | `#ef4444` | Grade scale F (<60%) — red, score emblem arc |
| `color.grade.b.light` | `#a3e635` | Lighter lime for constellation text on dark surfaces |
| `color.grade.d.glow` | `#f97316` | Orange-600 glow variant for D-grade emblem and hero proof — distinct from --grade-d (#fb923c, the arc color) |
| `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 |
| `color.amber.notice` | `#c9a227` | Amber for score-drawer remediation heading — contract-restrained |
| `color.shimmer.1` | `#f4f6ff` | Wordmark shimmer gradient stop 1 — decorative animation |
| `color.shimmer.2` | `#e8ecff` | Wordmark shimmer gradient stop 2 — decorative animation |
| `color.shimmer.3` | `#5b78f0` | Wordmark shimmer gradient stop 3 — decorative animation |
| `color.shimmer.4` | `#9eb0ff` | Wordmark shimmer gradient stop 4 — decorative animation |
| `color.shimmer.5` | `#dce4ff` | 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:** 40 (v01–v41 + x01–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.0. 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.