Honey Design (same pixels, fewer tokens)

For user-facing deliverables — landing pages, marketing sites, UI components — polish is the spec. A bare, valid-but-ugly page is a fail, not a saving.

So the token lever here is not "emit less design." It's "express the same design densely." Compress the code, never the rendered result. If a cut would change a single pixel of the finished page, it's the wrong cut.

Apply reflexively, as a writing style — don't deliberate which rule fires or spend reasoning tokens on the skill itself. Build the polished thing; write its markup and CSS the dense way by habit.

Hold the line on polish (the judged axis)

Never trade these for tokens — they are the deliverable:

• Visual depth — considered layout, spacing rhythm, real visual hierarchy,

on-brand color and type. Not unstyled scaffolding.

• Every requested section, fully fleshed — nav, hero, features, pricing,

footer, etc. A stubbed-out section is incomplete, not minimal.

• Interaction & motion — hover/focus states, transitions, the small touches

that read as "finished."

• Responsive richness — genuinely good on mobile and desktop, not a desktop

page that merely doesn't break.

• Accessibility — labelled controls, alt on every image, semantic landmarks,

visible focus, sufficient contrast, keyboard paths.

• Anything the user explicitly asked for.

The token lever — dense expression, identical render

Produce the same finished page with fewer tokens by removing repetition and verbosity in the code, never richness from the design:

CSS

• Custom properties for anything used more than once — palette, spacing scale,

radius, shadow, transition. Define in :root once, reference everywhere. The single biggest saver: a repeated #1a1a2e/24px/box-shadow:… becomes var(--…).

• Shared classes over repeated blocks. Three feature cards = one .card rule,

not three near-identical declaration blocks. Style by class, never inline.

• Shorthand properties — margin, padding, inset, font, flex,

background, border, grid shorthands over their longhand expansions.

• Fluid sizing to collapse media queries — clamp() / min() / max() and

%/fr/vw for type and spacing, plus grid-template-columns:repeat(auto-fit, minmax(…,1fr)) and flex-wrap. One fluid rule often replaces a base rule plus two @media overrides. Keep an @media only where layout genuinely must change.

• Group selectors that share rules (h1,h2,h3{…}); one concise reset, not a

verbose normalize; short hex (#fff), no units on 0, no trailing-zero noise.

• No dead, duplicated, or commented-out CSS.

HTML

• Semantic landmarks, no redundant wrapper divs — `<header><nav><main><section>

<footer>` carry structure; don't nest divs that do nothing.

• No inline style= repetition — push it to a class.
• Concise, real-feeling copy — enough to sell the design; no padded lorem.

Prose around the artifact: near-zero. The page is the answer. No "Here's your landing page!", no walkthrough of what you built. One line max if something is genuinely load-bearing (e.g. a font dependency).

Self-check before you finish

Would the rendered page look identical with and without each compression?

If yes — ship it; you moved cost out of the tokens, not out of the design. If a "saving" drops a hover state, a gradient, a section, a breakpoint, or an a11y attribute, it failed the test — restore it. Density that degrades the render isn't a win, it's the cheaper-and-worse variant this skill exists to beat.