Back to Docs

Design bar

What makes a page look finished, and how to borrow techniques from a reference site.

This is the guide the PageHub MCP server gives an AI agent for get_style_reference({ topic: "design" }). Names like set_theme are its tools (connect one), and the liquid topic is the HTML + Liquid reference.

These rules assume a Tailwind + DaisyUI site (Styling: tailwind-daisy, the default). select_site and list_site_files print the site's Styling: line. tailwind: DaisyUI is off, so btn, card, badge, hero, navbar… render as nothing; build them from utilities and palette tokens. own-css (an imported site): reuse the classes its theme.css and <style>s define; Tailwind compiles only classes that CSS doesn't define, and palette tokens and DaisyUI aren't its design system.

  • Typography hierarchy. Every section needs an eyebrow or a headline. Four visible weight levels per page. If all the text is one size, the page is flat.
  • Section rhythm. Alternate backgrounds — default, bg-base-200, a bg-primary band. Never 4+ consecutive sections on the same background.
  • Cards need padding + border + (shadow or background). All three, or they read as unstyled divs.
  • Images need explicit width AND height (or an aspect ratio) plus object-cover. Heroes tall, card images landscape.
  • Buttons need padding, font-weight, radius, background and text color. Bare btn btn-primary with no spatial padding is a bug.
  • Forms are the most commonly broken element. Every input needs an explicit visible border against its surface, and a label.
  • A wow moment. A photo behind a gradient overlay, a bold type contrast, a pattern or a hover state. Flat colored rectangles are a wireframe.
  • Before finishing, check each section: would a real business pay for this? If it looks like a Bootstrap demo, rebuild it.

Design Technique Transfer (when building from a reference)

  • Extract TECHNIQUES, not descriptions. "It has a hero" is useless. "Full-bleed bg image with linear-gradient overlay, text bottom-left, pill CTA with arrow icon" is a technique.
  • Micro-design elements to extract and transfer:
    • Eyebrow badges: pill shape, colored dot prefix, background fill, border-radius, padding
    • Button shapes: pill vs rectangle, icon placement, fill vs outline, hover effects
    • Dividers: vertical between stats, accent underlines, specific border widths/opacity
    • Stat numbers: oversized number + smaller suffix, font contrast, colored vs neutral
    • Section labels: badge vs plain text, dot prefix, background pill
  • Typography tricks to transfer:
    • Fading text: last line of paragraph in muted color (a separate element with a muted color)
    • Size contrast: massive stat numbers vs tiny labels, large serif heading vs small sans body
    • Weight play: thin body (font-light) vs heavy headings (font-bold/font-extrabold)
  • Layout structures copy 1:1 (these are patterns, not identity):
    • Nav: logo position, separator, link arrangement, right-side CTA
    • Hero: overlay type, gradient direction, text placement, CTA arrangement
    • Form cards: shadow, header, subtitle, response-time note, input styling
    • Split sections: column ratio, vertical alignment, content arrangement
  • Visual depth techniques:
    • Background images with a child gradient overlay (see the overlay rule in the core reference)
    • Section background rhythm — alternate white/tinted/white/dark, never 4+ same bg
  • Before building each section: check "which extracted techniques am I applying here?" If none, you're building generic.
  • Structural patterns transfer 1:1. Brand identity (palette, copy, imagery) gets replaced.