TechnicalDesign brief your AI builder follows on every page
Act as a senior product designer. Write the design brief my AI builder will follow on every page of {{business_name}}'s site, so new pages stop looking like generic templates. The look: {{visual_style}}. Fonts: {{brand_fonts}}. Brand colors: {{brand_colors}}. Read the current styles first and keep what works.
Set real values:
- Type: a scale from a 16px body (ratio about 1.25) with size, line height and weight per level; about -0.02em letter-spacing on large headings; body line height 1.5 to 1.6 and a 60 to 75 character measure; two families and three weights at most
- Color tokens with roles: background, surface, text, muted text, border, accent, accent hover, focus ring, success, warning, error. Text contrast at least 4.5:1, with the pairs listed
- Spacing on an 8px scale; section padding of 64px on phones and 96 to 128px on desktop
- Grid: 4 columns at 360px, 8 at 768px, 12 at 1280px, with gutters
- Radius (for example 8px on inputs, 12px on cards, 999px on pills), one border style, two shadow levels used sparingly
- Motion: 150 to 250ms ease-out for UI, nothing over 600ms, prefers-reduced-motion respected
- Components: primary, secondary and ghost buttons with hover, focus-visible, active, disabled and loading; inputs with help and error text; cards; and section layouts beyond a centered heading plus three cards
- Imagery: one icon set at one stroke width, real photos over stock cliches
- Never: purple-to-blue gradients, glass cards over blurred blobs, icons in gradient circles, emoji bullets, fake stats or logos, animation on everything
Deliver the brief as a project rules file, plus the tokens wired into the existing styling system.