PixelPilot: Instructions file for GitHub Copilot

UI/UX Accessibility, Forms & Fluid Typography

Fluid clamp() typography, WCAG contrast rules, skip links, ARIA landmarks, floating label forms, drag-and-drop upload.

STEP 19 — Fluid Typography & Spacing

Rule: Replace fixed breakpoints with fluid scales. clamp() creates smooth, proportional scaling between any two sizes with no jumps.

Fluid Type Scale

:root {
  /* Fluid text — scales smoothly from mobile to desktop */
  /* clamp(MIN, PREFERRED, MAX) */
  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem  + 0.375vw, 1rem);
  --text-base: clamp(1rem,     0.9rem  + 0.5vw,   1.125rem);
  --text-lg:   clamp(1.125rem, 1rem    + 0.625vw, 1.25rem);
  --text-xl:   clamp(1.25rem,  1.1rem  + 0.75vw,  1.5rem);
  --text-2xl:  clamp(1.5rem,   1.2rem  + 1.5vw,   2rem);
  --text-3xl:  clamp(1.875rem, 1.4rem  + 2.375vw, 2.5rem);
  --text-4xl:  clamp(2.25rem,  1.5rem  + 3.75vw,  3.5rem);
  --text-5xl:  clamp(3rem,     1.8rem  + 6vw,     5rem);
  --text-hero: clamp(3rem,     2rem    + 8vw,     8rem);

  /* Fluid spacing — scales with viewport */
  --fluid-sm:  clamp(var(--space-4),  2vw,  var(--space-8));
  --fluid-md:  clamp(var(--space-8),  4vw,  var(--space-16));
  --fluid-lg:  clamp(var(--space-16), 8vw,  var(--space-30));
  --fluid-xl:  clamp(var(--space-20), 10vw, var(--space-40));
}

Fluid Usage Rules per Language

Language	Hero text	Body text	Section spacing
Luxury	--text-hero (very large)	--text-base (restrained)	--fluid-xl
Premium	--text-4xl / 5xl	--text-base / lg	--fluid-lg
Minimalist	--text-3xl / 4xl	--text-sm	--fluid-xl (whitespace)
Expressive	--text-hero	--text-lg	--fluid-md
Technical	--text-2xl	--text-sm (dense)	--fluid-sm

---

STEP 20 — Accessibility First (WCAG AA+)

Rule: Accessibility is not a feature. It is the foundation. Inaccessible = broken.