---
version: 1.0
name: Ultimate Performance Academy
description: A professional, WCAG AA compliant design system built for Ultimate Performance Academy's online presence and application interface.
colors:
  brand-primary: "#fef200"
  app-primary: "#facc15"
  brand-black: "#09090b"
  brand-white: "#ffffff"
  surface: "#ffffff"
  surface-muted: "#fafafa"
  surface-dark: "#09090b"
  text: "#09090b"
  text-secondary: "#404040"
  text-tertiary: "#737373"
  text-on-yellow: "#09090b"
  text-inverse: "#ffffff"
  border: "#e5e5e5"
  border-strong: "#d4d4d4"
  border-dark: "#404040"
  yellow-50: "#fffef2"
  yellow-100: "#fffccc"
  yellow-200: "#fef200"
  yellow-300: "#fcdf0b"
  yellow-400: "#facc15"
  yellow-500: "#d5ad12"
  yellow-600: "#af8f0f"
  yellow-700: "#8a700c"
  yellow-800: "#695609"
  yellow-900: "#4b3d06"
  black-50: "#fafafa"
  black-100: "#f5f5f5"
  black-200: "#e5e5e5"
  black-300: "#d4d4d4"
  black-400: "#a3a3a3"
  black-500: "#737373"
  black-600: "#525252"
  black-700: "#404040"
  black-800: "#262626"
  black-900: "#18181b"
  black-950: "#09090b"
  black-1000: "#000000"
  slate-50: "#f8fafc"
  slate-100: "#f1f5f9"
  slate-200: "#e2e8f0"
  slate-300: "#cbd5e1"
  slate-400: "#94a3b8"
  slate-500: "#64748b"
  slate-600: "#475569"
  slate-700: "#334155"
  slate-800: "#1e293b"
  slate-900: "#0f172a"
  slate-950: "#020617"
  success-50: "#f0fdf4"
  success-100: "#dcfce7"
  success-200: "#bbf7d0"
  success-300: "#86efac"
  success-400: "#4ade80"
  success-500: "#22c55e"
  success-600: "#16a34a"
  success-700: "#15803d"
  success-800: "#166534"
  success-900: "#14532d"
  success-950: "#052e16"
  warning-50: "#fff7ed"
  warning-100: "#ffedd5"
  warning-200: "#fed7aa"
  warning-300: "#fdba74"
  warning-400: "#fb923c"
  warning-500: "#f97316"
  warning-600: "#ea580c"
  warning-700: "#c2410c"
  warning-800: "#9a3412"
  warning-900: "#7c2d12"
  warning-950: "#431407"
  error-50: "#fef2f2"
  error-100: "#fee2e2"
  error-200: "#fecaca"
  error-300: "#fca5a5"
  error-400: "#f87171"
  error-500: "#ef4444"
  error-600: "#dc2626"
  error-700: "#b91c1c"
  error-800: "#991b1b"
  error-900: "#7f1d1d"
  error-950: "#450a0a"
  info-50: "#eff6ff"
  info-100: "#dbeafe"
  info-200: "#bfdbfe"
  info-300: "#93c5fd"
  info-400: "#60a5fa"
  info-500: "#3b82f6"
  info-600: "#2563eb"
  info-700: "#1d4ed8"
  info-800: "#1e40af"
  info-900: "#1e3a8a"
  info-950: "#172554"
typography:
  display:
    fontFamily: Inter
    fontSize: 72px
    fontWeight: "900"
    lineHeight: 1.1
    letterSpacing: -0.03em
  hero:
    fontFamily: Inter
    fontSize: 64px
    fontWeight: "800"
    lineHeight: 1.1
    letterSpacing: -0.02em
  marketing:
    fontFamily: Inter
    fontSize: 56px
    fontWeight: "800"
    lineHeight: 1.15
    letterSpacing: -0.02em
  feature:
    fontFamily: Inter
    fontSize: 48px
    fontWeight: "800"
    lineHeight: 1.2
    letterSpacing: -0.02em
  h1:
    fontFamily: Inter
    fontSize: 40px
    fontWeight: "800"
    lineHeight: 1.2
    letterSpacing: -0.015em
  h2:
    fontFamily: Inter
    fontSize: 32px
    fontWeight: "800"
    lineHeight: 1.25
  h3:
    fontFamily: Inter
    fontSize: 24px
    fontWeight: "800"
    lineHeight: 1.3
  body:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: "400"
    lineHeight: 1.6
  small:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: "400"
    lineHeight: 1.5
  label:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: "600"
    lineHeight: 1.5
  mono:
    fontFamily: JetBrains Mono
    fontSize: 14px
    fontWeight: "500"
    lineHeight: 1.5
  wordmark:
    fontFamily: Bebas Neue
    fontWeight: "400"
    letterSpacing: 0.02em
    textTransform: uppercase
rounded:
  sm: 0.25rem
  md: 0.375rem
  lg: 0.5rem
  xl: 0.75rem
  2xl: 1rem
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px
  4xl: 96px
  5xl: 128px
components:
  button-primary:
    backgroundColor: "{colors.app-primary}"
    textColor: "{colors.text-on-yellow}"
    typography: "{typography.label}"
    rounded: "{rounded.lg}"
    padding: 12px 24px
    height: 44px
  button-primary-hover:
    backgroundColor: "{colors.yellow-500}"
  button-secondary:
    backgroundColor: "{colors.brand-black}"
    textColor: "{colors.text-inverse}"
    typography: "{typography.label}"
    rounded: "{rounded.lg}"
    padding: 12px 24px
    height: 44px
  button-outline:
    backgroundColor: transparent
    textColor: "{colors.text}"
    typography: "{typography.label}"
    rounded: "{rounded.lg}"
    borderColor: "{colors.black-900}"
    borderWidth: 2px
    padding: 12px 24px
  button-outline-hover:
    backgroundColor: "{colors.app-primary}"
    textColor: "{colors.text-on-yellow}"
  button-ghost:
    backgroundColor: transparent
    textColor: "{colors.text}"
    typography: "{typography.label}"
    rounded: "{rounded.lg}"
    padding: 12px 24px
    height: 44px
  button-ghost-hover:
    backgroundColor: "{colors.black-100}"
  button-success:
    backgroundColor: "{colors.success-600}"
    textColor: "{colors.text-inverse}"
    typography: "{typography.label}"
    rounded: "{rounded.lg}"
    padding: 12px 24px
    height: 44px
  button-success-hover:
    backgroundColor: "{colors.success-700}"
  button-info:
    backgroundColor: "{colors.info-600}"
    textColor: "{colors.text-inverse}"
    typography: "{typography.label}"
    rounded: "{rounded.lg}"
    padding: 12px 24px
    height: 44px
  button-info-hover:
    backgroundColor: "{colors.info-700}"
  button-danger:
    backgroundColor: "{colors.error-600}"
    textColor: "{colors.text-inverse}"
    typography: "{typography.label}"
    rounded: "{rounded.lg}"
    padding: 12px 24px
    height: 44px
  button-danger-hover:
    backgroundColor: "{colors.error-700}"
  button-size-sm:
    padding: 6px 12px
    typography: "{typography.small}"
  button-size-md:
    padding: 8px 16px
    typography: "{typography.body}"
  button-size-lg:
    padding: 12px 24px
    typography: "{typography.body}"
  button-size-xl:
    padding: 16px 32px
    typography: "{typography.body}"
  input-text:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    typography: "{typography.body}"
    rounded: "{rounded.lg}"
    borderColor: "{colors.black-300}"
    borderWidth: 1px
    padding: 12px 16px
    height: 44px
  input-text-error:
    backgroundColor: "{colors.error-50}"
    textColor: "{colors.text}"
    rounded: "{rounded.lg}"
    borderColor: "{colors.error-600}"
    borderWidth: 2px
  input-text-success:
    backgroundColor: "{colors.success-50}"
    textColor: "{colors.text}"
    rounded: "{rounded.lg}"
    borderColor: "{colors.success-600}"
    borderWidth: 2px
  input-text-warning:
    backgroundColor: "{colors.warning-50}"
    textColor: "{colors.text}"
    rounded: "{rounded.lg}"
    borderColor: "{colors.warning-600}"
    borderWidth: 2px
  input-text-info:
    backgroundColor: "{colors.info-50}"
    textColor: "{colors.text}"
    rounded: "{rounded.lg}"
    borderColor: "{colors.info-600}"
    borderWidth: 2px
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.xl}"
    padding: "{spacing.lg}"
  card-hero:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.text-inverse}"
    rounded: "{rounded.2xl}"
    padding: "{spacing.3xl}"
  badge-success:
    backgroundColor: "{colors.success-100}"
    textColor: "{colors.success-800}"
    typography: "{typography.label}"
    rounded: "{rounded.full}"
    padding: 4px 12px
  badge-warning:
    backgroundColor: "{colors.warning-100}"
    textColor: "{colors.warning-800}"
    typography: "{typography.label}"
    rounded: "{rounded.full}"
    padding: 4px 12px
  badge-error:
    backgroundColor: "{colors.error-100}"
    textColor: "{colors.error-800}"
    typography: "{typography.label}"
    rounded: "{rounded.full}"
    padding: 4px 12px
  badge-info:
    backgroundColor: "{colors.info-100}"
    textColor: "{colors.info-800}"
    typography: "{typography.label}"
    rounded: "{rounded.full}"
    padding: 4px 12px
  alert-success:
    backgroundColor: "{colors.success-50}"
    textColor: "{colors.success-800}"
    borderColor: "{colors.success-600}"
    borderWidth: 1px
    rounded: "{rounded.lg}"
    padding: "{spacing.md}"
  alert-warning:
    backgroundColor: "{colors.warning-50}"
    textColor: "{colors.warning-800}"
    borderColor: "{colors.warning-600}"
    borderWidth: 1px
    rounded: "{rounded.lg}"
    padding: "{spacing.md}"
  alert-error:
    backgroundColor: "{colors.error-50}"
    textColor: "{colors.error-800}"
    borderColor: "{colors.error-600}"
    borderWidth: 1px
    rounded: "{rounded.lg}"
    padding: "{spacing.md}"
  alert-info:
    backgroundColor: "{colors.info-50}"
    textColor: "{colors.info-800}"
    borderColor: "{colors.info-600}"
    borderWidth: 1px
    rounded: "{rounded.lg}"
    padding: "{spacing.md}"
---

## Overview

Ultimate Performance Academy (UPA) redefines coaching for the modern man — by forging Kings who build powerful businesses, unlock their freedom, and rise to lead with purpose and legacy. The design system gives visual form to King Energy: the archetype of mature, steady leadership that defines the brand. The identity is bold and authoritative, expressed through a high-contrast palette of black with yellow accents, a typographic voice that commands presence across the scale, and a calm, direct tone. Layout is based on an 8-pixel grid system, with yellow as the accent for calls to action, bold statements, and full-surface emphasis.

The system is built on established design practice, drawing on Google Material Design, Apple Human Interface Guidelines, and WCAG 2.1, with contrast tested to AA as the floor, a traffic-light status system readable across colour-vision profiles, and a structure that scales cleanly from mobile to large displays.

## Voice & Tone

The voice is calm, direct, and grounded, mirroring the King Energy archetype. Copy is anchored in systems, decisions, and outcomes rather than hype or cliches. Sentences run short and confident. Qualifiers like "just," "maybe," or "hopefully" weaken the message and have no place in the system.

The brand avoids coaching cliches such as "10X," "crush it," "next level," and "live your best life," along with overhyped promise language. Metaphors only land when drawn from trades, physical performance, or pressure scenarios. Brand-specific terminology such as "Warrior mindset," "King," "friction," and "keystone" is used deliberately to signal UPA's distinct approach.

Copy must pass one test before it ships: would a successful Australian business owner recognise this as genuine understanding or as marketing manipulation? If it sounds like a pitch, it fails.

## Colors

The palette has three primary brand colours: black, white, and yellow. Multi-step scales for black, yellow, and slate support surfaces, text, and state, with success, warning, error, and info as the four traffic-light status tokens.

Black is power, authority, and discipline made visible. Brand-black, `{colors.brand-black}`, is a near-black that signals premium, sovereign command. It anchors the dark canvas in marketing, the headline weight on light surfaces, and the body text against white. A 12-step black scale, `{colors.black-50}` through `{colors.black-1000}`, supports the system across borders, surfaces, secondary text, and dark-mode infrastructure. Brand-black against white reaches 19.90:1, exceeding AAA.

Yellow signals attention, premium value, and decisive emphasis. The marketing yellow, `{colors.brand-primary}`, appears across marketing surfaces: funnels, landing pages, ads, print, and the logo. The application yellow, `{colors.app-primary}`, appears in the application interface: primary calls to action, highlighted phrases, focus rings, full-yellow hero blocks, and accent panels that need a bold colour-field treatment. Both yellows pair with brand-black text or dark backgrounds. As foreground type on white, app-primary measures 1.53:1 and brand-primary measures 1.17:1; both fail WCAG AA at all levels. Yellow runs as backgrounds and accent surfaces, not as foreground type. App-primary on brand-black reaches 12.99:1, AAA contrast.

Black and yellow function as a high-contrast pair: black holds the canvas, yellow strikes the eye where attention belongs. The combination signals the brand visually before a word is read. White, `{colors.brand-white}`, is breathing space, delivering clarity and calm.

The traffic-light status system uses `{colors.success-700}` for success, `{colors.warning-700}` for warning, `{colors.error-600}` for error, and `{colors.info-600}` for information. It reads clearly for all users including those with colour vision deficiencies, with icons and labels conveying meaning beyond colour alone. Cool slate, `{colors.slate-50}` through `{colors.slate-950}`, supplies dark-mode text and secondary dark surfaces, cool-toned for a professional read. Brand-black holds the primary dark surface.

## Typography

Three typefaces drive the system, each with a specific job: Inter for interface and content surfaces, JetBrains Mono for technical chips and code, Bebas Neue for the logo wordmark.

Inter sets the brand's voice on screen: confident, modern, highly legible. Headlines run Inter Extrabold 800 from `{typography.h3}` (24px) through `{typography.hero}` (64px), with negative letter-spacing that tightens as size grows: -0.03em at the 72-pixel display tier, scaling toward 0 at 32 pixels and below. The 72-pixel `{typography.display}` tier uses Inter Black 900 for high-impact marketing display. Body text uses `{typography.body}` at Inter Regular 400, 16px, 1.6 line-height. UI labels use `{typography.label}` at Inter Semibold 600, 14px.

`{typography.mono}` handles technical UI in JetBrains Mono Medium 500: property labels, keyboard shortcut hints, and inline code. `{typography.wordmark}` runs Bebas Neue Regular 400 for the logo wordmark and the campaign wordmark lockups that pair directly with the UPA mark.

The type scale follows an 8-pixel-led rhythm across nine tokens, with a 14-pixel floor for metadata and supporting labels: `{typography.small}` (14px), `{typography.body}` (16px), `{typography.h3}` (24px), `{typography.h2}` (32px), `{typography.h1}` (40px), `{typography.feature}` (48px), `{typography.marketing}` (56px), `{typography.hero}` (64px), `{typography.display}` (72px). Body copy stays at or above 16 pixels. Line length caps at 50 to 75 characters per line, and paragraph spacing sits at 1.5em.

WCAG 2.1 AA contrast holds across the type scale against the brand palette. Default text pairings are brand-black on white in light mode and `{colors.slate-200}` on brand-black in dark mode.

## Layout

The layout system is built on an 8-pixel base unit, with a nine-step spacing scale, a six-step border radius scale, and composition principles that set visual rhythm across surfaces.

Spacing groups elements that belong together and separates elements that don't. The scale runs from `{spacing.xs}` at 4px through `{spacing.5xl}` at 128px in 4- and 8-pixel increments, supporting icon-to-label bonding at the small end, internal padding for cards and form fields in the middle, and page-level rhythm at the large end. Tighter values bind, wider values separate.

Border radius shapes the silhouette of the brand. The UPA shape sits slightly soft, modern and approachable, with the edge of authority intact. The scale runs from `{rounded.sm}` at 4px to `{rounded.full}` at 9999px. Buttons, inputs, and form fields sit at `{rounded.lg}`. Cards, panels, and modals sit at `{rounded.xl}`, the dominant container shape. Hero blocks lean to `{rounded.2xl}`; pills, badges, and avatars take `{rounded.full}`. Inner elements sit at a slightly smaller radius than their container, so a `{rounded.xl}` card with `{rounded.lg}` buttons inside reads as a single object.

Hierarchy directs the eye to the primary element first. Size, weight, colour, position, and isolation each add weight, with the strongest hierarchy combining two or three at once. A focal element holds the eye through area, contrast, or isolation by additional space, so the primary moment, the supporting cluster, and the detail each read distinct at a glance.

Breathing room reinforces hierarchy. White space gives the eye rest and signals the calm authority of King Energy.

## Elevation & Depth

Five elevation levels establish depth and visual hierarchy across surfaces. Light mode uses soft black shadows; dark mode pairs a 1-pixel white ring at 10 per cent opacity with a gentle white glow.

The shadow scale runs sm, md, lg, xl, 2xl across the five levels. Small elevates inputs, chips, and inline actions a touch off the surface. Medium is the default for cards, dropdowns, tooltips, and hoverable surfaces. Large frames floating panels, navigation menus, and emphasised feature cards. Extra-large supports modals, dialogs, popovers, and overlays that need clear separation. 2X-large raises top-level overlays and full-screen dialogs, the highest surface in the system.

Shadows signal interactivity. Cards and buttons step up one level on hover or focus to give users a clear affordance. Primary buttons sit at medium by default and step to large on hover. The shadow change pairs with a ring or colour change so the affordance reads for users who cannot perceive the shadow transition alone.

Consistency runs through the elevation system. The same level produces a consistent shadow across cards, buttons, modals, and overlays, so hierarchy reads predictably from one surface to the next.

## Shapes

Shape sits at the intersection of Renaissance technical drawing and the intelligence-briefing diagram. The work is complex made simple: systems and frameworks rendered as diagrams that read at a glance. Precise line work, considered annotation, exploded views, callouts, and proportional studies define the register of a strategist's working journal. The execution is modern and ultra high-end: clean weights, generous space, and restrained colour across the system.

Line work is the primary visual instrument. Hairline strokes mark measurement, dimensioning, and connection lines; medium weights hold primary geometry and component boundaries; bold weights mark emphasis and focal forms. Stroke weight steps in clean ratios so the hierarchy of a diagram reads at a glance.

Annotation adds meaning alongside form. Numeric labels, letter callouts, leader lines, and short caption text mark the components of a framework, the points of friction, the keystones. Annotation sits in the brand's monospace voice for technical chips and structured data, in the sans voice for callouts and labels.

Iconography follows the same register. Line-style icons at consistent stroke weight, constructed on the 8-pixel grid. Filled icons appear where mass is the message: status indicators, primary marks, focal points.

Geometric primitives form the brand's quiet structural layer. The UPA symbol anchors the system; rectangles with `{rounded.xl}` corners hold containers and panels; circles frame avatars, marks, and focal stat treatments. Frameworks, diagrams, and schematics communicate the content; primitives provide the structure.

## Imagery

The imagery system gives visual form to the concept of King Energy: men who build powerful businesses, unlock their freedom, and rise to lead with purpose and legacy. The treatment is premium, professional, and serious in craft. The visual world is allegorical: the warrior is the modern business operator, the battlefield is the workplace, the kingdom is the business and the life it builds. Crown, sword, armour, fortress, and battle scene each map to a real business reality: sovereignty, decisive action, system and discipline, the empire under construction, the daily fight.

Allegorical illustration sets the brand's visual vocabulary. Cinematic concept art with warrior, king, archer, samurai, gladiator, and mercenary motifs. Atmospheric backdrops: storms, cliffs, deserts, fortresses, ships at port, royal roundtables, chess boards. Dark palette throughout: blacks, sepia, ochre, deep blues, with red on war imagery and yellow from the UPA crown mark as the accent. References sit closer to premium concept art and editorial film stills.

Strategic frameworks render in the Renaissance map register described in Shapes. Hand-drawn parchment, sepia line work, and territory rendering paired with clean modern diagram overlays: circular pathways, yellow accent nodes, black-banner labels. The Kings Pathways visual is the gold standard: framework as kingdom, strategy as map.

Documentary photography appears as ceremonial portrait. Real subjects shown in heightened warrior states: war paint, primal expression, ritual environment, the moment captured at full intensity. Production-grade craft with the unguarded feel of the real. This treatment fits retreat, transformation, and high-stakes brand moments.

## Components

The component library covers buttons, forms, inputs, cards, alerts, and badges. Each sits on the 8-pixel spacing scale, with `{rounded.lg}` for interactive elements and `{rounded.xl}` for containers.

Buttons drive the action layer. The primary button runs `{colors.app-primary}` background with brand-black text for the most important action on a surface. The secondary button inverts the brand pair: brand-black background with white text on light surfaces, white background with brand-black text on dark surfaces, for alternative paths. Outline buttons mark tertiary actions; ghost buttons handle minimal navigation. Status-coloured buttons follow the traffic-light scale: success for confirm, info for learn-more, danger for destructive operations. Sizes step from small to extra-large, all at `{rounded.lg}`.

Forms hold input. Labels run semibold above the field; the field sits at `{rounded.lg}` with a `{colors.black-300}` border in light mode and `{colors.black-700}` in dark mode. Focus moves the border to `{colors.app-primary}` and adds a 2-pixel `{colors.app-primary}` ring at 20 per cent opacity. Validation states pair colour with icon: success in green, error in red, warning in amber, info in blue. Helper text and error messages sit beneath the field in the matching status colour.

Alerts deliver status using the traffic-light system. Success in green for completed actions, warning in amber for cautionary states, error in red for failed operations, info in blue for system updates. Each alert combines an icon, a coloured surface, and a text label.

Pills, chips, and badges mark state. Pill shapes take `{rounded.full}` and run the `{typography.label}` voice in Inter Semibold 600 for status indicators, traffic-light tags, and inline state labels.

## Accessibility

Accessibility holds the system to WCAG 2.1 Level AA across colour, type, and interaction. The system is tested for reduced vision and the three major colour-vision profiles: protanopia, deuteranopia, and tritanopia.

Body text meets a 4.5:1 contrast minimum; large text and UI components meet 3:1. Interactive elements sit at 44-by-44-pixel touch targets with 8-pixel minimum spacing between them.

Focus shows a 2-pixel ring in a high-contrast colour, visible in both light and dark themes. Tab order matches the visual reading order. Skip links let users move past navigation to the main content.

Status indicators pair colour with icon and label. The traffic-light system reads across colour-vision profiles for protanopia, deuteranopia, and tritanopia. Yellow on white sits outside the contrast band — app-primary 1.53:1 and brand-primary 1.17:1 — and serves as background or accent surface rather than foreground type.

Verified contrast pairings across the palette: brand-black on white 19.90:1, black-800 on white 15.13:1, success-700 5.02:1, warning-700 5.18:1, error-600 4.83:1, info-600 5.17:1, app-primary on brand-black 12.99:1. Screen readers receive semantic HTML, ARIA labels, descriptive alt text, and announcements for dynamic content changes.

## Responsive Behavior

The system is mobile-first and scales up to large display through Tailwind's breakpoint scale at sm, md, lg, and xl.

Mobile sets the foundation. The type scale and touch-target floors hold across breakpoints; type steps up through the marketing tiers at larger viewports. Card grids step from single-column on mobile to two- or three-column at md and above.

Spacing scales with the viewport. Mobile uses tighter `{spacing.md}` and `{spacing.lg}` padding around content blocks; desktop opens to `{spacing.xl}`, `{spacing.2xl}`, and `{spacing.3xl}` for breathing room at larger scale.

Components respond across surfaces. Buttons keep their `{rounded.lg}` silhouette across viewports. Navigation shows as a mobile menu on small viewports and a horizontal bar on large viewports.

Marketing landing pages and ads scale through the same breakpoint system as application surfaces. Slides sit on a fixed 1920 × 1080 canvas in 16:9 and embed or export to their target without viewport scaling.

## Slides

The slide system runs on 27 codified rules: 20 drawn from research-backed slide design practice plus 7 UPA-specific decisions. The rules apply at generation time and combine with the brand layer above.

- **One idea per slide.** One headline (≤10 words) plus one supporting block; a second headline means a second slide.
- **Glanceable in 3s.** If the message takes longer to read, simplify or split.
- **Max 7±2 chunks.** Aim for 3–5; group with proximity so chunks read as units.
- **40% whitespace.** Minimum across the canvas; hero, title, and section dividers lift to ≥60%; quote slides to ≥70%.
- **5% safe-zone.** On all sides; on 1920×1080 that is 96 px; text, logos, and focal elements sit outside the band.
- **Modular type scale.** Pick one ratio (1.25, 1.333, 1.414, 1.5, or 1.618); every size derives from it.
- **Max 4 type sizes.** Per slide, 6 per deck; display, subhead, body, and caption cover the full hierarchy.
- **Body 24px+.** Body text 24 px minimum on screen, 28 pt on projection; title 48 px minimum; caption floor 18 px.
- **Line-height 1.4–1.6.** For body; 1.05–1.2 for display; tighter leading holds large display, looser leading opens small body.
- **Line length ≤60ch.** Slides avoid paragraphs; when prose appears, 45–60 characters keeps reading rhythm intact.
- **AAA contrast 7:1.** Body meets 4.5:1, large text 3:1; aim 7:1 AAA for projection — projectors wash 30–50% of contrast in a real room.
- **60-30-10 split.** 60% dominant surface, 30% secondary, 10% accent; the 10% accent is where the eye lands.
- **One accent per slide.** Two accents cancel each other and the slide loses focus.
- **Never hue-only meaning.** Colour pairs with shape, label, weight, or icon.
- **Snap to 8pt grid.** Spacing scale 8 / 16 / 24 / 32 / 48 / 64 / 96 / 128; 4 px allowed for tight icon work.
- **One grid, aligned.** 12-column grid with 24–32 px gutters; every element snaps.
- **Distance = relationship.** Related items ≤16 px apart; unrelated items ≥48 px apart.
- **Data-ink ratio ≥80%.** Data renders flat: no 3D, no data gradients, no decorative gridlines, no redundant legends.
- **F-pattern, top-left.** Headline and key visual sit in the top-left to top-right band; the first 200 px vertical is the primary attention zone.
- **Pick one mode, stay.** Presenter (≤15 words per slide, image-led) or document (denser, hierarchical, scannable); each deck commits to one mode, mixing breaks the reading rhythm.
- **Canvas 1920×1080.** Fixed canvas at 16:9; marketing surfaces and slides sit on this canvas; embed and export targets handle viewport scaling.
- **Yellow by deck type.** Marketing decks use `{colors.brand-primary}` as the accent yellow; operational, client-facing, and training decks use `{colors.app-primary}`. Marketing yellow holds funnels, ads, and print; application yellow holds operational and training surfaces.
- **Wordmark in safe zone.** The UPA wordmark anchors the bottom-left safe zone of title and closing slides; interior slides typically run logo-free so the focal element holds the eye.
- **Stat slides, one numeral.** Isolate a single dominant numeral at 72–112 px in the accent yellow against `{colors.brand-black}`; pair with a label in `{colors.slate-200}` at 24–32 px.
- **Quote slides, left-aligned.** Quote at 40–48 px, left-aligned; attribution sits beneath at 70% opacity for a quieter read.
- **Closing slides, one CTA.** Land on a single call-to-action with the wordmark in the safe zone; the CTA holds the focal point, supporting elements drop back.
- **Motion ≤300ms.** Transitions cap at 300 ms; no auto-play, no flashing above three times per second; the system honours `prefers-reduced-motion`.

## Motion

Motion is restrained and interface-led. Components transition through Tailwind's default 150 ms ease curve applied via `transition-all` across button, form, card, and shadow states. Hover steps colour by swapping to the hover background variant, or shadow by stepping elevation from `shadow-sm` or `shadow-md` to `shadow-lg`. Focus shows a 2-pixel ring with offset across interactive elements. The system honours `prefers-reduced-motion` through Tailwind's `motion-reduce:` variants.

## Do's and Don'ts

Use these constraints to keep future generations aligned with the current system instead of drifting into adjacent styles.

### Do

- Do use the documented palette for colour roles: brand pair as identity, multi-step scales for surfaces and text, traffic-light tokens for status.
- Do use `{colors.brand-primary}` for marketing surfaces and `{colors.app-primary}` for application interface.
- Do pair colour with icon and label across status states.
- Do keep type within the 8-pixel-led scale (with the 14-pixel small floor) and the Inter weight family.
- Do keep spacing aligned to the 4- and 8-pixel rhythm.
- Do keep corner radii within the documented family.
- Do nest inner elements at a smaller radius than their container.

### Don't

- Don't introduce accent colours outside the core palette roles unless a new semantic state requires it.
- Don't use yellow as foreground type on white, where contrast fails.
- Don't encode meaning by hue alone.
- Don't invent type sizes outside the 8-pixel-led scale (with the 14-pixel small floor) or use Inter weights below 400.
- Don't use spacing values off the 4- and 8-pixel rhythm.
- Don't match radii across nesting levels without a deliberate reason.
- Don't stack heavy shadow recipes on heavy borders.