Contract generator
Create
Describe the product. The Forge selects a preset, macrostructure, tokens, type, motion and anti-patterns, then exports DESIGN.md, tokens.css, a Tailwind theme, a component manifest and an agent brief.
Project spec
inputThe one thing the product exists to let someone do.
Comma separated. Pick extremes, not “clean and modern”.
Density
Reference DNA ids or product names.
Becomes project-specific audit rules.
Leave empty to let the Forge infer.
Design Contract
Operational monitoring surfaceTechnical Dense preset selected: Instrument-grade tooling for people who live in it. Density high matches the developers audience and the "Launch and monitor a build pipeline run" primary action.
Tokens
background
surface
surfaceRaised
border
text
muted
accent
accentInk
success
warning
danger
info
| Archetype | Operational monitoring surface |
|---|---|
| Navigation | Icon+label side-rail, project switcher, Cmd+K primary |
| Hierarchy | Severity → subsystem → panel → event log |
| Density | high |
| Patterns | monitoring-workspace · kanban · master-detail · command-center · settings · auth |
| Display / Body / Mono | JetBrains Mono / Geist / JetBrains Mono |
| Type scale | 1.2 minor third, compact UI steps (12/13/15/18/24/32) |
| Spacing | 4px base — 4, 8, 12, 16, 24, 32, 48, 64, 96 |
| Radius | 0–6px; controls 4px, panels 6px, never 16px |
| Shadows | No shadows. Elevation is expressed by luminance and 1px borders. |
| Icon language | Lucide — 1.5–2px stroke, 24px grid, geometric-neutral |
| Content width | fluid to 1600px max |
Anti-patterns for this project (7)
- highGiant cards / cards inside cards— Flatten: one surface level per region; use spacing and hairlines, not boxes in boxes.
- mediumGlassmorphism everywhere— At most one glass layer per view (e.g. a floating palette). Surfaces separate by luminance and 1px borders.
- highPurple/blue gradient without rationale— Pick one anchor hue from the contract palette; if ambience is wanted, use a single-hue radial ≤20% canvas (ATMOSPHERIC only).
- criticalInvented metrics & social proof— Real numbers, a labelled '— metric to confirm' block, or a macrostructure without a proof slot.
- criticalMissing interaction states— Implement default·hover·focus·active·disabled·loading·error·success for every interactive component.
- criticalMobile horizontal overflow— minmax(0,1fr) tracks, overflow-wrap:anywhere on display text, overflow-x:clip on html+body.
- criticalContrast failure— Adjust token lightness until AA passes; dark sections must flip text tokens in the same rule.
Forbidden motion
- · transition: all (name the properties)
- · uniform hover:scale on unrelated elements
- · bouncy/overshoot easing on UI state changes
- · animating width/height/top/left/margin/padding
- · focus rings that fade in
- · celebratory toasts for visible effects
- · confetti and celebration bursts