{"slug":"green-pt-honey-design","name":"honey-design","description":"Same pixels, fewer tokens. For user-facing markup: keeps the full design, expresses it densely with CSS vars, shorthand, fluid units.","long_description":"---\nname: honey-design\ndescription: \"Same pixels, fewer tokens. For user-facing markup: keeps the full design, expresses it densely with CSS vars, shorthand, fluid units.\"\nhomepage: https://github.com/Green-PT/honey-for-devs\nlicense: MIT\n---\n\n# Honey Design (same pixels, fewer tokens)\n\nFor user-facing deliverables — landing pages, marketing sites, UI components —\n**polish is the spec.** A bare, valid-but-ugly page is a fail, not a saving.\n\nSo the token lever here is **not** \"emit less design.\" It's \"express the same\ndesign densely.\" Compress the *code*, never the rendered result. If a cut would\nchange a single pixel of the finished page, it's the wrong cut.\n\n**Apply reflexively, as a writing style** — don't deliberate which rule fires or\nspend reasoning tokens on the skill itself. Build the polished thing; write its\nmarkup and CSS the dense way by habit.\n\n## Hold the line on polish (the judged axis)\n\nNever trade these for tokens — they *are* the deliverable:\n\n- **Visual depth** — considered layout, spacing rhythm, real visual hierarchy,\n on-brand color and type. Not unstyled scaffolding.\n- **Every requested section, fully fleshed** — nav, hero, features, pricing,\n footer, etc. A stubbed-out section is incomplete, not minimal.\n- **Interaction & motion** — hover/focus states, transitions, the small touches\n that read as \"finished.\"\n- **Responsive richness** — genuinely good on mobile and desktop, not a desktop\n page that merely doesn't break.\n- **Accessibility** — labelled controls, `alt` on every image, semantic landmarks,\n visible focus, sufficient contrast, keyboard paths.\n- **Anything the user explicitly asked for.**\n\n## The token lever — dense expression, identical render\n\nProduce the *same* finished page with fewer tokens by removing **repetition and\nverbosity in the code**, never richness from the design:\n\n**CSS**\n\n- **Custom properties for anything used more than once** — palette, spacing scale,\n radius, shadow, transition. Define in `:root` once, reference everywhere. The\n single biggest saver: a repeated `#1a1a2e`/`24px`/`box-shadow:…` becomes `var(--…)`.\n- **Shared classes over repeated blocks.** Three feature cards = one `.card` rule,\n not three near-identical declaration blocks. Style by class, never inline.\n- **Shorthand properties** — `margin`, `padding`, `inset`, `font`, `flex`,\n `background`, `border`, `grid` shorthands over their longhand expansions.\n- **Fluid sizing to collapse media queries** — `clamp()` / `min()` / `max()` and\n `%`/`fr`/`vw` for type and spacing, plus `grid-template-columns:repeat(auto-fit,\n minmax(…,1fr))` and `flex-wrap`. One fluid rule often replaces a base rule plus\n two `@media` overrides. Keep an `@media` only where layout genuinely must change.\n- **Group selectors that share rules** (`h1,h2,h3{…}`); one concise reset, not a\n verbose normalize; short hex (`#fff`), no units on `0`, no trailing-zero noise.\n- **No dead, duplicated, or commented-out CSS.**\n\n**HTML**\n\n- **Semantic landmarks, no redundant wrapper divs** — `