`, `

` appropriately - Alt text on images, aria-labels on icon-only buttons - Respect `prefers-reduced-motion: reduce` ### Responsive Strategy Prefer fluid (clamp) over breakpoint-based type/spacing. Use breakpoints only for structural layout changes: ```css /* Mobile-first approach — layout only */ @media (min-width: 768px) { /* two-column grids enabled */ } @media (min-width: 1024px) { /* full asymmetric splits */ } @media (min-width: 1280px) { /* content max width hits */ } ``` ### Component Patterns - **Buttons**: Include hover, focus, active, and disabled states - **Cards**: Consistent border-radius throughout (8px, 12px, or 16px — pick one) - **Forms**: Visible labels, clear error states, adequate input padding (12–16px) - **CTA pills**: Full border-radius (`border-radius: 999px`), uppercase label, letter-spacing `0.24em`, weight 600–700 --- ## Phase 5 — Common Pitfalls to Avoid - Gradient backgrounds that echo Stripe circa 2020 - Floating blobs/orbs as decoration (unless explicitly requested) - Default "hero with laptop mockup" layouts - Rainbow gradient text as a go-to effect - Card grids with identical sizing and no visual hierarchy - Sticky navs that obscure content on mobile - Brittany Signature / other script fonts in any high-end B2B context (reads feminine-crafty, not architectural-authoritative — save for consumer/wellness brands) - All-caps long-form headlines (OK for labels and eyebrows, not for H1/H2 body) --- ## Phase 6 — Output Format When generating a design, ALWAYS produce in this order: 1. State the **Design Archetype** selected and why 2. List the **font pairing** and **color palette** (hex values) 3. Describe the **layout strategy** in one sentence 4. Describe the **motion/interaction approach** in one sentence 5. Then output complete, functional HTML/CSS/JS --- ## branded+Flow House Rules (applied on top of above) - **Authority:** `foundation/brand/BRAND_GUIDELINES.md` § 0 is the canonical source for branded+Flow palette + fonts. If anything below disagrees with that file, that file wins. - **Next.js framework** → use `process.env`, not `import.meta.env` - **npm install** → always `--legacy-peer-deps` - **v3 brand tokens (canonical: `foundation/brand/tokens.css`):** dark editorial — `#141414` page, `#1C1C1A` card, `#0E0E0E` deep, `#0A0A0A` chrome. Accent teal: `#21B9B2` primary, `#2BE9D9` bright (emphasis), `#80F2E8` light, `#094856` deep. Accent gradient (315deg, dark→light→dark) only on the `+` glyph — never multi-character text. - **v3 fonts:** Single family Poppins (300–800). Kenpixel → Courier New mono fallback for 11px eyebrows + labels. - **Weight rule:** All headings cap at weight **400**. Body weight 300. Color and tracking carry hierarchy, not weight. - **Everything clamped:** type sizes, padding, margins, gaps all use `clamp(min, preferred, max)`. - **Section alternation:** `--bg-primary` ↔ `--bg-elevated` ↔ `--bg-deep` for vertical rhythm. No cream surfaces — v3 is dark-first, period. --- ## Related Skills - `nextjs-component-builder` — for component implementation once design is locked - `seo-fundamentals` — technical SEO requirements to respect during design - `deploy-preflight` — pre-launch checklist

frontend-architect

Install this skill

Comments