Ditto Design System

design skillsditto · № —

The design system

Two files, versioned together.

Read the spec, then read the prompt that teaches the model how to use it.

explore the bundle

rendered with ditto tokens

Color Palette · 14 tokens

primary#7C3AED

primary-hover#9061F9

secondary#3B82F6

secondary-hover#60A5FA

neutral#F5F2EB

surface#0D0D0D

surface-container#1A1A1A

on-surface#F5F2EB

on-primary#FFFFFF

outline#2E2E2E

error#EF4444

success#84CC16

warning#EAB308

info#3B82F6

Typography Scale · 9 levels

display-lgDisplay lg48px / 700

headline-mdHeadline md24px / 600

body-lgBody lg18px / 400

label-mdLabel md14px / 600

Components

Ditto card

design.md · 16 components

Input field

Spacing Scale

2xl

Border Radius Scale

full

Coverage & preview

Per-surface coverage of this spec — the higher each bar, the fewer gaps your AI has to guess.

coverage by surface

81%

what's covered

accessibility advisory

2 color combinations don't meet WCAG AA. Verify before shipping.

components.button-primary-hover: textColor (#ffffff) on backgroundColor (#9061f9) has contrast ratio 3.99:1, below WCAG AA minimum of 4.5:1.

components.badge-error: textColor (#ffffff) on backgroundColor (#ef4444) has contrast ratio 3.76:1, below WCAG AA minimum of 4.5:1.

Not affiliated with Ditto. All trademarks belong to their respective owners.