Layer 04 · DesignDNA
Components: buttons, cards, heroes and navigation
Tokens are only half a system. The other half is a small set of committed component decisions — which button variants exist, which card archetype the site uses, how the hero is built and what the navigation collapses into. Committing to one of each is what makes a site look designed rather than assembled.
The button matrix
Three variants, three sizes, four states. That is thirty-six specified combinations, which sounds like a lot until you realise the alternative is an unbounded number of one-off buttons.
| Variant | Use | Resting treatment | Focus treatment |
|---|---|---|---|
| Primary | One per view: the main action | Filled orange-to-red gradient, white label | 3px ring, 2px offset, ring contrasts with both fill and page |
| Secondary | Alternative paths | Transparent fill, 1px accent border | Same ring; border deepens |
| Quiet | Tertiary and destructive-confirm flows | No border, label only, hover surface tint | Same ring; tint becomes permanent while focused |
Sizes run small (32px tall, 8/12 padding), medium (40px, 10/16) and large (48px, 12/24). Any button that is a primary touch target on mobile should reach 44px in at least one dimension with adequate spacing around it. Labels are sentence case verbs — "Save changes", not "Submit". Loading states keep the button's width fixed so the layout does not jump when the spinner appears.
Five card archetypes
The generator picks one archetype per site and applies it everywhere. Mixing archetypes is the fastest way to make a coherent palette look accidental.
| Archetype | Strength | Cost |
|---|---|---|
| Horizontal split | Media left, metadata and CTA right; excellent for scannable lists | Needs a stacking rule below 768px or the media crushes |
| Framed canvas | Offset background frame gives depth with no blur cost | Negative insets must be zeroed on small screens |
| Glass overlay | Full-bleed image with a translucent panel over it; very strong visual identity | Text contrast depends on the image — needs a scrim and a solid fallback |
| Border accent | No border except a top or left bar; light and fast | Reads as plain unless typography carries the hierarchy |
| Data grid | Statistics built into the card header | Only works when every card genuinely has comparable numbers |
This site uses the glass overlay archetype, so the rules that go with it are worth spelling out. The translucent panel needs a minimum background opacity — around 0.85 on a light ground — so that text stays legible if backdrop-filter is unsupported. The image always carries a warm gradient scrim beneath the panel. Panel padding is 24px so no text sits near an edge. And the whole card is made clickable by stretching the heading link across it with a pseudo-element, which keeps exactly one link in the accessibility tree instead of three.
Hero architectures
- Layered composition. Two or three offset shapes behind a foreground panel. Strong personality, moderate cost, and it degrades to a flat panel gracefully.
- Split hero. Copy on one side, media on the other, in a 7/5 grid. The most reliable structure for conversion-led pages; stacks cleanly.
- Full-bleed image. Maximum drama, maximum risk: it needs a scrim, an art-directed crop per breakpoint and a preloaded image, or it becomes the slowest thing on the page.
- Type-only. Oversized heading, one paragraph, two actions. Fastest possible first render and hard to get wrong — but it demands genuinely good typography.
Whichever structure is chosen, the generator fixes the CTA order: primary action first in the DOM, secondary second, so keyboard order matches visual priority. It also caps the hero heading at two lines on desktop, since a three-line hero heading almost always means the copy is doing the job the subhead should do.
Navigation patterns
Four patterns cover nearly every marketing or documentation site: inline bar, inline bar with a single grouped dropdown, split bar with a utility row, and a compact bar with a full-screen overlay menu. The generator picks based on link count. Up to six links fit an inline bar comfortably at typical header heights; beyond that, grouping is unavoidable.
Three rules hold in all four cases. The header is not sticky by default — sticky headers cost vertical space on small screens and often trap focus behind an overlay. The mobile toggle must not cause layout shift, which means the overlay is positioned, not inserted into flow. And the current page is marked with aria-current="page" as well as a visual treatment, so the state exists for screen readers too.
What generation can and cannot do here
Pros. A specified matrix means a new engineer can build a feature without inventing a button. Component notes written in plain English travel better than a design file. Consistency is enforced by having fewer options, not more.
Cons. Generated component sets tend toward the middle of the road — they will not produce a genuinely novel interaction pattern. They can also over-specify: thirty-six button combinations is a lot to maintain if the site only ever uses five. Prune the matrix once the real pages exist, and delete any variant that has no live usage after a release or two.
Next layer
Components become convincing when depth and motion agree with them. Continue with motion and depth, or revisit spacing and layout for the padding these components inherit.