Skip to content
ultraweb
ultraweb
GitHub0stars(opens in a new tab)
Install

72 skills · 12 phases · 7 gates

the constitution · v1.3.0 · 72 skills

The Constitution

Every ultraweb skill is subordinate to this file. When a component skill and this file conflict, this file wins.

skills/taste/SKILL.md — quoted, trimmed, never invented

What first-grade means

A first-grade site looks like a design studio charged real money for it. The test: could it win a site-of-the-day mention, or at least not embarrass itself next to one?

  1. A point of view

    One committed aesthetic direction, chosen for this brief, executed consistently. Timid design that hedges between directions reads as no design.

  2. One signature move

    A single memorable, unexpected element — a typographic gesture, a scroll moment, a layout inversion. One, not five. The rest stays disciplined so the signature can sing.

  3. Typographic conviction

    Type does most of the design work. Real pairing, real scale contrast, tight tracking on large text, generous line-height on body. Hero sizes should feel almost too big.

  4. Restraint

    The strongest tool. Fewer colors, fewer effects, fewer weights than feel safe. If everything is bold, nothing is.

  5. Craft in the last 2%

    Optical alignment, consistent icon stroke widths, focus rings that match the palette, selection color set, scrollbar considered, favicon real.

The banned list

11 patterns · zero tolerance

These patterns mark a site as AI-generated filler — banned unless design/DIRECTION.md justifies one in writing. The banned list is not a mood board; each entry names its enforcing gate.

  1. Purple-to-blue gradient as the primary aesthetic; gradient text on headlines

    enforced by gate-antislop

  2. The untouched shadcn look: default radius, slate palette, Inter, default shadows

    enforced by gate-antislop

  3. Emoji as icons or bullet decorations, anywhere in production copy

    enforced by gate-antislop

  4. Three identical icon-cards in a row as the default features section

    enforced by gate-antislop

  5. “Welcome to”, “Elevate your”, “Unlock the power of” — dead startup copy

    enforced by gate-antislop

  6. Lorem ipsum, placeholder images, href="#", “Feature 1”

    enforced by gate-antislop

  7. Glassmorphism smeared over everything; backdrop-blur as a personality substitute

    enforced by gate-visual

  8. rounded-xl plus shadow-lg on every element uniformly — depth without hierarchy

    enforced by gate-antislop

  9. Every section centered, same width, same padding — wallpaper rhythm

    enforced by gate-visual

  10. The dark-navy-with-glowing-accents AI-startup template, applied regardless of brief

    enforced by gate-antislop

  11. Animations on everything: staggered fade-up makes motion meaningless

    enforced by gate-visual

The required list

Non-negotiable in every build, regardless of direction. The floor, not the ceiling.

  • OKLCH palette. One tinted neutral family, one accent doing real work, semantic tokens for both themes. AA verified, not eyeballed.
  • Dark mode is a first-class design. Not an inversion filter — re-decided per surface.
  • Spacing rhythm. A base unit, with section spacing that varies deliberately — compression and release, not uniform py-24.
  • At least one deliberate asymmetry. Perfect symmetry everywhere is the smell of no decisions made.
  • Type scale with real contrast. Hero display ≥3.5× body on desktop; fluid via clamp().
  • Motion vocabulary from motion-language. Micro 150–250ms, reveals 400–700ms, one easing family site-wide, prefers-reduced-motion always honored.
  • Real content. Every string written for this brief in its voice. Copy is design.
  • States. Hover, focus-visible, active, disabled, loading, empty, error — designed, not defaulted.
  • Accessibility floor. WCAG 2.2 AA. Beauty that excludes users is a defect, not a style.

Decision heuristics

How ties break.

Whitespace is not empty; it is emphasis budget.
What you give room to is what the user reads as important.
Distinctiveness comes from commitment, not addition.
Push the chosen direction 20% past comfortable rather than adding a second direction.
Spectacle never outscores usability.
Site-of-the-day winners average high across design, usability, and content at once. Never trade a usability point for a wow point.
Craft the corners.
The last 2% — 404, loader, empty states, footer — is where site-of-the-day is won or lost. A flawless hero over an unfinished inner page reads as a template.

The jury model

The weights the award record actually scores on — the constitution optimizes for all four at once.

Awwwards jury scoring weights, per award-canon
CriterionWeight (%)
Design
40
Usability
30
Creativity
20
Content
10

Held constant across 31 SOTY- and SOTD-tier winners (2017–2026), distilled into 25 named patterns — plus the invariants that held across every era.

§6 · the ask

Now put the law to work.

Steal the principle, never the surface.

award-canon · prime directive

Install ultraweb