picasso-skill 1.6.0 → 2.0.1

package/references/tables-and-forms.md

@@ -0,0 +1,227 @@
+# Tables and Forms Reference
+
+## Table of Contents
+1. Sortable Tables
+2. Responsive Tables
+3. Inline Editing
+4. Multi-Select Patterns
+5. Form Validation
+6. Multi-Step Forms
+7. Complex Inputs
+8. Common Mistakes
+
+---
+
+## 1. Sortable Tables
+
+```html
+<table>
+  <thead>
+    <tr>
+      <th aria-sort="ascending">
+        <button>Name <span aria-hidden="true">↑</span></button>
+      </th>
+      <th aria-sort="none">
+        <button>Date <span aria-hidden="true">↕</span></button>
+      </th>
+    </tr>
+  </thead>
+</table>
+```
+
+- Use `aria-sort` on `<th>`: `ascending`, `descending`, or `none`.
+- Sort icon: `↑` ascending, `↓` descending, `↕` unsorted. Use `aria-hidden="true"` on the icon.
+- Sortable headers must be `<button>` inside `<th>`, not clickable `<th>`.
+- Default sort: most recent first for dates, alphabetical for names.
+
+---
+
+## 2. Responsive Tables
+
+**Option A: Horizontal scroll** (preferred for data tables)
+
+```css
+.table-container {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+}
+
+/* Fade edge to hint scrollability */
+.table-container::after {
+  content: '';
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 40px;
+  background: linear-gradient(to left, var(--surface-1), transparent);
+  pointer-events: none;
+}
+```
+
+**Option B: Stacked cards** (for simple tables on mobile)
+
+```css
+@media (max-width: 640px) {
+  table, thead, tbody, th, td, tr { display: block; }
+  thead { display: none; }
+  td { padding: 8px 16px; text-align: right; }
+  td::before {
+    content: attr(data-label);
+    float: left;
+    font-weight: 600;
+    color: var(--text-secondary);
+  }
+}
+```
+
+---
+
+## 3. Inline Editing
+
+Click to edit pattern: display text, click reveals input, blur/Enter saves.
+
+```jsx
+function EditableCell({ value, onSave }) {
+  const [editing, setEditing] = useState(false);
+  const [draft, setDraft] = useState(value);
+
+  if (!editing) return (
+    <span onClick={() => setEditing(true)} className="cursor-text hover:bg-surface-2 px-2 py-1 rounded">
+      {value}
+    </span>
+  );
+
+  return (
+    <input
+      value={draft}
+      onChange={e => setDraft(e.target.value)}
+      onBlur={() => { onSave(draft); setEditing(false); }}
+      onKeyDown={e => { if (e.key === 'Enter') { onSave(draft); setEditing(false); } if (e.key === 'Escape') setEditing(false); }}
+      autoFocus
+      className="input-base w-full"
+    />
+  );
+}
+```
+
+Show a subtle pencil icon on row hover. Use `opacity-0 group-hover:opacity-100` pattern.
+
+---
+
+## 4. Multi-Select Patterns
+
+- **Checkbox column**: leftmost column, always visible.
+- **Shift-click range select**: select from last checked to current.
+- **Select all**: checkbox in header, toggles all visible (filtered) rows.
+- **Bulk action bar**: appears when 1+ rows selected. Shows count + actions.
+
+```jsx
+<div className={`fixed bottom-4 left-1/2 -translate-x-1/2 bg-surface-2 rounded-xl px-4 py-2
+  flex items-center gap-4 shadow-lg border border-border transition-transform
+  ${selectedCount > 0 ? 'translate-y-0' : 'translate-y-[200%]'}`}>
+  <span className="text-sm font-medium">{selectedCount} selected</span>
+  <button className="btn-ghost text-sm">Export</button>
+  <button className="btn-ghost text-sm text-red">Delete</button>
+</div>
+```
+
+---
+
+## 5. Form Validation
+
+**When to validate:**
+
+| Trigger | Use For |
+|---|---|
+| On blur | Email format, required fields, min/max length |
+| On submit | All fields, server-side checks |
+| Real-time (on change) | Password strength, username availability |
+| Never on keystroke | Don't interrupt typing. Wait for blur or 500ms debounce. |
+
+```jsx
+<div className="space-y-1.5">
+  <label htmlFor="email" className="text-sm font-medium">Email</label>
+  <input
+    id="email"
+    type="email"
+    aria-invalid={error ? "true" : undefined}
+    aria-describedby={error ? "email-error" : undefined}
+    className={`input-base ${error ? 'border-red' : ''}`}
+  />
+  {error && (
+    <p id="email-error" role="alert" className="text-xs text-red flex items-center gap-1">
+      <svg className="w-3.5 h-3.5" aria-hidden="true">...</svg>
+      {error}
+    </p>
+  )}
+</div>
+```
+
+Error messages: specific and helpful. "Enter a valid email" not "Invalid input."
+
+---
+
+## 6. Multi-Step Forms
+
+Show a progress indicator. Allow back navigation. Validate per step, not all at once.
+
+```jsx
+<div className="flex items-center gap-2 mb-8">
+  {steps.map((step, i) => (
+    <Fragment key={i}>
+      <div className={`flex items-center justify-center h-8 w-8 rounded-full text-sm font-bold
+        ${i < currentStep ? 'bg-accent text-white' :
+          i === currentStep ? 'border-2 border-accent text-accent' :
+          'border border-border text-muted'}`}>
+        {i < currentStep ? '✓' : i + 1}
+      </div>
+      {i < steps.length - 1 && (
+        <div className={`flex-1 h-0.5 ${i < currentStep ? 'bg-accent' : 'bg-border'}`} />
+      )}
+    </Fragment>
+  ))}
+</div>
+```
+
+Rules:
+- Save progress per step (don't lose data on back).
+- Validate step before advancing (disable Next if invalid).
+- Show step count: "Step 2 of 4".
+- Allow clicking completed steps to go back.
+- Final step: show summary before submit.
+
+---
+
+## 7. Complex Inputs
+
+**Date pickers:** Use native `<input type="date">` first. Custom picker only if design requires it. Always allow manual text entry as fallback.
+
+**File upload:** Show progress, preview (for images), allow removal.
+
+```jsx
+<label className="flex flex-col items-center gap-2 p-8 border-2 border-dashed border-border
+  rounded-xl cursor-pointer hover:border-accent hover:bg-accent/5 transition-colors">
+  <svg>...</svg>
+  <span className="text-sm text-secondary">Drop files or click to upload</span>
+  <input type="file" className="hidden" onChange={handleUpload} />
+</label>
+```
+
+**Address autocomplete:** Use Google Places API or similar. Show suggestions in a dropdown. Parse into structured fields (street, city, state, zip).
+
+---
+
+## 8. Common Mistakes
+
+- **Sortable `<th>` without `<button>`.** Clicking a `<th>` isn't keyboard accessible.
+- **No `aria-sort` on sortable columns.** Screen readers can't announce sort state.
+- **Validating on every keystroke.** Annoying. Use blur or 500ms debounce.
+- **Error messages without `role="alert"`.** Screen readers won't announce them.
+- **Multi-step form losing data on back.** Save each step's state.
+- **No horizontal scroll hint on tables.** Users don't know content is hidden. Add fade gradient.
+- **Custom date picker without text input fallback.** Some users prefer typing dates.
+- **Select all selecting ALL rows, not just filtered.** Only select what's visible.
+- **Labels as placeholder text.** Labels must be visible above the input, always.

package/skills/picasso/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: picasso
-version: 1.6.0
+version: 2.0.0
 description: >
   The ultimate frontend design and UI engineering skill. Use this whenever the user asks to build, design, style, or improve any web interface, component, page, application, dashboard, landing page, artifact, poster, or visual output. Covers typography, color systems, spatial design, motion/animation, interaction design, responsive layouts, sound design, haptic feedback, icon systems, generative art, theming, React best practices, and DESIGN.md system generation. Also use when the user asks to audit, critique, polish, simplify, animate, or normalize a frontend. Triggers on any mention of "make it look good," "fix the design," "UI," "UX," "frontend," "component," "landing page," "dashboard," "artifact," "poster," "design system," "theme," "animation," "responsive," or any request to improve visual quality. Use this skill even when the user does not explicitly ask for design help but the task involves producing a visual interface.
 metadata:
@@ -31,6 +31,20 @@ When the user says "make it premium" or "luxury feel," drop VISUAL_DENSITY to 2-
 
 ---
 
+## Quick Start (30 seconds)
+
+New to Picasso? Here's the minimum viable workflow:
+
+1. **Pick a font** that isn't Inter, Roboto, or Arial. Try: Satoshi, Cabinet Grotesk, Outfit, General Sans, Clash Display.
+2. **Pick a color** in OKLCH. Not Tailwind's default indigo. Try: `oklch(0.65 0.25 25)` (warm red), `oklch(0.55 0.20 160)` (teal), `oklch(0.60 0.22 300)` (violet).
+3. **Tint your grays** toward your accent hue. Never use pure `#808080` or `#000`.
+4. **Break the center.** Left-align content. Use asymmetric grids (2:1, 3:2). Only center heroes and CTAs.
+5. **Read `references/anti-patterns.md`** before writing any code. It's the most important file.
+
+Then follow the full workflow below. Skip nothing.
+
+---
+
 ## Step 0: Read the Right References
 
 Before writing any code, read the reference files relevant to the task. Each covers a domain in depth with rules, examples, and anti-patterns. Load only what you need.
@@ -50,6 +64,25 @@ Before writing any code, read the reference files relevant to the task. Each cov
 | `references/design-system.md` | Generating DESIGN.md files, theming, systematic tokens |
 | `references/generative-art.md` | Algorithmic art, p5.js, seeded randomness, flow fields |
 | `references/component-patterns.md` | Standard component naming, taxonomy, and state patterns |
+| `references/navigation-patterns.md` | Breadcrumbs, sidebar, tabs, bottom bar, mega menus, skip links |
+| `references/tables-and-forms.md` | Sortable tables, inline editing, multi-step forms, validation |
+| `references/loading-and-states.md` | Skeletons, spinners, empty states, error boundaries, offline |
+| `references/dark-mode.md` | Preference hierarchy, surface elevation, transitions, testing |
+| `references/images-and-media.md` | Format selection, responsive images, favicons, OG images |
+| `references/micro-interactions.md` | Scroll animations, page transitions, gestures, magnetic effects |
+| `references/i18n-visual-patterns.md` | RTL, logical properties, text expansion, CJK, number formatting |
+| `references/brand-and-identity.md` | Logo sizing, brand color usage, consistency, lockup variants |
+| `references/animation-performance.md` | Compositor-only props, will-change, layout thrashing, contain |
+| `references/code-typography.md` | Monospace fonts, syntax highlighting, code blocks, diff views |
+| `references/accessibility-wcag.md` | WCAG 2.2, ARIA patterns, keyboard nav, screen reader testing |
+| `references/conversion-design.md` | Landing pages, CTAs, pricing tables, friction reduction |
+| `references/data-visualization.md` | Chart selection matrix, dashboard patterns, accessible charts |
+| `references/modern-css-performance.md` | CSS nesting, :has(), View Transitions, Tailwind v4, container queries |
+| `references/performance-optimization.md` | Core Web Vitals, Lighthouse, image optimization, 45 Vercel rules |
+| `references/style-presets.md` | 22 curated design presets with exact OKLCH values and font pairings |
+| `references/tools-catalog.md` | Tool recommendations: torph, soundcn, Lucide, Facehash, better-icons |
+| `references/ux-psychology.md` | Gestalt principles, Fitts's Law, Hick's Law, cognitive load, heuristics |
+| `references/ux-writing.md` | Error messages, microcopy, terminology, voice and tone, CTAs |
 
 ---
 
@@ -73,7 +106,7 @@ This step is non-negotiable. It takes 30 seconds and prevents hours of rework.
    - Same spacing everywhere
    - Three equal-width items in a row
 
-If you skip this gate, the output WILL look AI-generated. There are no exceptions.
+**HALT CONDITION:** If you cannot fill out the commitments above with specific, non-default values, you MUST NOT proceed to Step 1. Go back to the references. Read anti-patterns.md. Try again. There is no "just do it" bypass for this step. The gate exists because without it, every output converges to the same generic AI aesthetic. This is not optional. No code until commitments are written.
 
 ---
 

package/skills/picasso/references/animation-performance.md

@@ -0,0 +1,244 @@
+# Animation Performance Reference
+
+## Table of Contents
+1. Compositor-Only Properties
+2. Will-Change Best Practices
+3. Layout Thrashing
+4. IntersectionObserver vs Scroll Events
+5. Web Animations API
+6. Performance Measurement
+7. Testing on Low-End Devices
+8. Contain Property
+9. Common Mistakes
+
+---
+
+## 1. Compositor-Only Properties
+
+Only two CSS properties can be animated without triggering layout or paint: **transform** and **opacity**. Everything else causes reflow.
+
+| Property | Layout | Paint | Composite | Animate? |
+|---|---|---|---|---|
+| `transform` | No | No | Yes | **Yes** |
+| `opacity` | No | No | Yes | **Yes** |
+| `filter` | No | Yes | Yes | Carefully |
+| `background-color` | No | Yes | No | Avoid |
+| `width`, `height` | Yes | Yes | No | **Never** |
+| `top`, `left` | Yes | Yes | No | **Never** |
+| `margin`, `padding` | Yes | Yes | No | **Never** |
+| `border-radius` | No | Yes | No | Avoid |
+
+```css
+/* Good: compositor-only */
+.slide-in {
+  transform: translateX(-100%);
+  opacity: 0;
+  transition: transform 300ms var(--ease-out), opacity 300ms var(--ease-out);
+}
+.slide-in.active {
+  transform: translateX(0);
+  opacity: 1;
+}
+
+/* Bad: triggers layout on every frame */
+.slide-in-bad {
+  left: -100%;
+  transition: left 300ms ease;
+}
+```
+
+---
+
+## 2. Will-Change Best Practices
+
+`will-change` promotes an element to its own compositor layer. This speeds up animation but consumes GPU memory.
+
+Rules:
+- Add `will-change` BEFORE the animation starts (e.g., on hover, not in the animation itself).
+- Remove it AFTER the animation completes.
+- Never use `will-change: all` — it promotes everything.
+- Never apply it to more than 10 elements simultaneously.
+- Don't put it in your stylesheet permanently.
+
+```js
+// Good: apply before, remove after
+element.addEventListener('mouseenter', () => {
+  element.style.willChange = 'transform';
+});
+element.addEventListener('transitionend', () => {
+  element.style.willChange = 'auto';
+});
+```
+
+```css
+/* Acceptable: for elements that are ALWAYS animated (e.g., loading spinners) */
+.spinner { will-change: transform; }
+
+/* Bad: permanent will-change on static elements */
+.card { will-change: transform, opacity; } /* don't do this */
+```
+
+---
+
+## 3. Layout Thrashing
+
+Reading layout properties then writing them in a loop forces the browser to recalculate layout on every iteration.
+
+```js
+// BAD: layout thrashing (read-write-read-write)
+elements.forEach(el => {
+  const height = el.offsetHeight;    // READ — forces layout
+  el.style.height = height + 10 + 'px'; // WRITE — invalidates layout
+});
+
+// GOOD: batch reads, then batch writes
+const heights = elements.map(el => el.offsetHeight); // all reads first
+elements.forEach((el, i) => {
+  el.style.height = heights[i] + 10 + 'px'; // all writes after
+});
+```
+
+Properties that trigger forced layout when read: `offsetHeight`, `offsetWidth`, `getBoundingClientRect()`, `scrollTop`, `clientHeight`, `getComputedStyle()`.
+
+---
+
+## 4. IntersectionObserver vs Scroll Events
+
+| | `scroll` event | IntersectionObserver |
+|---|---|---|
+| Performance | Fires every pixel, blocks main thread | Async, fires on threshold crossing |
+| Throttling | Manual (requestAnimationFrame) | Built-in |
+| Use case | Scroll-linked animation (position) | Visibility detection (enter/exit) |
+| Recommendation | Almost never | Almost always |
+
+```js
+// Good: IntersectionObserver for reveal animations
+const observer = new IntersectionObserver(
+  (entries) => {
+    entries.forEach(entry => {
+      entry.target.classList.toggle('visible', entry.isIntersecting);
+    });
+  },
+  { threshold: 0.1 }
+);
+```
+
+For scroll-linked animations where you need exact scroll position, use the Scroll-Driven Animations API:
+
+```css
+@keyframes fade-in {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.scroll-reveal {
+  animation: fade-in linear;
+  animation-timeline: view();
+  animation-range: entry 0% entry 100%;
+}
+```
+
+---
+
+## 5. Web Animations API
+
+For complex JS-driven animations, use WAAPI instead of manual `requestAnimationFrame`:
+
+```js
+element.animate(
+  [
+    { transform: 'translateY(20px)', opacity: 0 },
+    { transform: 'translateY(0)', opacity: 1 }
+  ],
+  {
+    duration: 300,
+    easing: 'cubic-bezier(0.16, 1, 0.3, 1)',
+    fill: 'forwards'
+  }
+);
+```
+
+Benefits over CSS: programmable, cancellable, can read progress, can reverse.
+
+---
+
+## 6. Performance Measurement
+
+```js
+// Measure animation frame rate
+let frames = 0;
+let lastTime = performance.now();
+
+function countFrames() {
+  frames++;
+  const now = performance.now();
+  if (now - lastTime >= 1000) {
+    console.log(`FPS: ${frames}`);
+    frames = 0;
+    lastTime = now;
+  }
+  requestAnimationFrame(countFrames);
+}
+requestAnimationFrame(countFrames);
+```
+
+Chrome DevTools:
+1. Performance tab → Record → interact with animations → Stop
+2. Look for long frames (> 16ms) in the flame chart
+3. Rendering tab → Paint flashing (green = repaint, should be minimal)
+4. Rendering tab → Layer borders (orange = composited layers)
+
+Target: 60fps = 16.67ms per frame. If ANY frame takes > 33ms, users perceive jank.
+
+---
+
+## 7. Testing on Low-End Devices
+
+Your M-series Mac is not representative. Test with:
+- **Chrome DevTools CPU throttling:** Performance tab → CPU → 6x slowdown
+- **Network throttling:** Slow 3G preset to test loading animations
+- **Real device:** Test on a 3-year-old Android phone if possible
+
+If an animation stutters at 6x CPU throttle, reduce:
+1. Number of concurrent animations
+2. Element count being animated
+3. Complexity of each animation
+
+---
+
+## 8. Contain Property
+
+`contain` tells the browser what NOT to recalculate when an element changes.
+
+```css
+/* Isolate layout/paint to this element */
+.card {
+  contain: layout paint;
+}
+
+/* Full isolation — best for off-screen or independent components */
+.widget {
+  contain: strict; /* = size + layout + paint + style */
+}
+
+/* Content containment — layout + paint + style (most common) */
+.list-item {
+  contain: content;
+}
+```
+
+Use `contain: content` on repeated elements (list items, cards) to prevent layout changes from propagating to siblings.
+
+---
+
+## 9. Common Mistakes
+
+- **Animating `width`/`height`/`top`/`left`.** Use `transform: translate/scale` instead.
+- **`will-change` on everything.** Max 10 elements. Remove after animation completes.
+- **`addEventListener('scroll')` for visibility.** Use IntersectionObserver.
+- **Reading layout properties in animation loops.** Batch reads before writes.
+- **Testing only on fast hardware.** Use Chrome CPU throttling at 6x.
+- **No frame budget awareness.** 16ms per frame. If your JS takes 20ms, you drop frames.
+- **CSS `transition: all`.** Transitions every property including layout triggers.
+- **Forgetting `contain` on repeated elements.** One card's layout change recalculates the entire list.
+- **`requestAnimationFrame` without cancellation.** Always store the ID and `cancelAnimationFrame` on cleanup.

package/skills/picasso/references/brand-and-identity.md

@@ -0,0 +1,136 @@
+# Brand and Identity Reference
+
+## Table of Contents
+1. Logo Sizing Rules
+2. Logo Placement
+3. Logo Lockup Variants
+4. Brand Color Usage
+5. Brand Typography
+6. Consistency Across Pages
+7. When to Bend Brand Rules
+8. Common Mistakes
+
+---
+
+## 1. Logo Sizing Rules
+
+- **Minimum size:** 24px height for icon-only, 32px height for full logo. Below this it's illegible.
+- **Clear space:** Minimum clear space around logo = the height of the logo's icon element. No text or elements may intrude.
+- **Typical sizes by context:**
+
+| Context | Height |
+|---|---|
+| Favicon | 32px |
+| Mobile header | 28-32px |
+| Desktop header | 32-40px |
+| Footer | 24-28px |
+| Hero/marketing | 48-64px |
+| App splash | 80-120px |
+
+```css
+.logo { height: 32px; width: auto; } /* maintain aspect ratio */
+.logo-icon { height: 28px; width: 28px; }
+```
+
+---
+
+## 2. Logo Placement
+
+- **Header:** top-left for LTR, top-right for RTL. Always links to homepage.
+- **Footer:** bottom-left or bottom-center. Smaller than header.
+- **Marketing pages:** centered for hero sections, left-aligned for navigation.
+- **Loading/splash:** centered vertically and horizontally.
+
+The header logo is the most important. It should be the first visual element the user sees, but not dominate the page. Keep it slim.
+
+---
+
+## 3. Logo Lockup Variants
+
+Every brand needs at least 3 logo variants:
+
+1. **Full lockup:** icon + wordmark (for headers, marketing)
+2. **Icon only:** for favicons, app icons, small spaces, mobile headers
+3. **Wordmark only:** for editorial/text-heavy contexts
+
+```jsx
+// Responsive logo: icon on mobile, full on desktop
+<Link href="/" className="flex items-center gap-2">
+  <img src="/logo-icon.svg" alt="" className="h-7 w-7" />
+  <span className="hidden sm:inline text-sm font-bold tracking-tight">Brand Name</span>
+</Link>
+```
+
+---
+
+## 4. Brand Color Usage
+
+Follow the 60-30-10 rule with brand colors:
+- **60%** — neutral surfaces (backgrounds, cards). Brand color should NOT be the 60%.
+- **30%** — supporting colors (borders, secondary text, section backgrounds).
+- **10%** — brand/accent color (CTAs, active states, highlights). This is where brand color goes.
+
+```css
+:root {
+  --brand: oklch(0.55 0.25 250);       /* Primary brand color — use at 10% */
+  --brand-subtle: oklch(0.95 0.03 250); /* Tinted background — use sparingly */
+  --brand-on-dark: oklch(0.70 0.18 250); /* Lighter variant for dark backgrounds */
+}
+```
+
+Never use brand color as background for large areas (hero sections, full-width bars) unless the brand is specifically known for it (like Spotify's green). Large saturated surfaces are fatiguing.
+
+---
+
+## 5. Brand Typography
+
+If the brand has a custom/licensed font, use it for headings only. Body text should be a readable, web-optimized font.
+
+```css
+/* Brand font for headings */
+h1, h2, h3 { font-family: 'Brand Display', var(--font-body); }
+
+/* Readable font for body */
+body { font-family: 'DM Sans', system-ui, sans-serif; }
+```
+
+If the brand font isn't available for web, find the closest web-safe alternative:
+- Futura → use Outfit or Jost
+- Helvetica Neue → use Inter (only acceptable here) or Geist
+- Garamond → use EB Garamond or Cormorant
+
+---
+
+## 6. Consistency Across Pages
+
+Every page should share:
+- Same header and footer (identical, not "similar")
+- Same color palette (no page-specific colors)
+- Same typography scale
+- Same border-radius philosophy
+- Same spacing scale
+
+Variation should come from layout and content, not from inconsistent styling. A dashboard page and a marketing page can look different through layout while sharing the same design tokens.
+
+---
+
+## 7. When to Bend Brand Rules
+
+Strict brand adherence isn't always right:
+- **Data-dense dashboards:** Brand color as accent only. Don't fight with data colors.
+- **Error states:** Use standard red for errors, not brand color. Users need instant recognition.
+- **Third-party embeds:** Payment forms, maps, chat widgets have their own styling. Don't fight it.
+- **Dark mode:** Brand color may need lightness/chroma adjustment to maintain contrast.
+- **Accessibility:** If brand colors don't meet WCAG contrast, accessibility wins.
+
+---
+
+## 8. Common Mistakes
+
+- **Logo too small in the header.** Minimum 28px height. Users need to identify the brand instantly.
+- **Brand color as full-width background.** Fatiguing. Use at 10% ratio maximum.
+- **Different fonts on every page.** Pick 2 fonts and use them everywhere.
+- **Logo without clear space.** Crowded logos look unprofessional. Enforce minimum padding.
+- **No icon-only variant.** Mobile needs a compact logo. Don't just shrink the full lockup.
+- **Brand color unchanged in dark mode.** Adjust lightness and chroma for dark backgrounds.
+- **Inconsistent border radius between pages.** One sharp page and one rounded page = two brands.