# DESIGN SYSTEM SPECIFICATION v0.1 — APPROVED PLANNING BASELINE

**Studio 333 Ventures LLC · Phase 0 · 3 October 2026**  
Sources: Master Planning Completion §5; Constitution X/XI; Technical Direction A/F; Architecture §§6/14/24; Brand/IA v0.1. **Owner adoption, 3 October 2026: PASS WITH CONDITIONS**, Owner Planning Disposition §§1–3. Governing DESIGN DIRECTION AND SYSTEM CONTRACT; exact font/licensing, palette, geometry/tokens, logo and imagery remain OPEN through OD02. No components, product tokens or fonts installed; no final brand-specific ratification.

## Status and visual principles

Fixed experience direction: **PREMIUM · MODERN · CREATIVE · TECHNOLOGICALLY SOPHISTICATED**, achieved by art direction, expressive yet readable type, considered composition/spacing, credible imagery, purposeful controlled motion, micro-interactions, responsive craft, accessibility and performance—not mandatory WebGL/3D.

All exact scales, values, palette examples, font choices and geometry below are **PROPOSED FOR OWNER REVIEW**, not source-established brand facts. Review the direction as one coherent brand decision; routine reversible implementation tuning later belongs to valid delegated authority.

1. Editorial clarity before decoration: one primary message/action per region; actual proof has stronger hierarchy than ornamental graphics.
2. Confident corporate consistency with a Music expression in the same master brand, never an unapproved separate identity.
3. Structured CMS content populates bounded components; editors cannot inject scripts, arbitrary layout or color overrides.
4. Design truthful acceptance/failure/degraded states as carefully as promotional pages.
5. No meaning conveyed solely by color, movement, sound, hover or animation.

## Layout, grid and spacing proposal

| Token family | Candidate specification / constraints |
|---|---|
| Content container | Max 1280 px; reading measure 60–75 characters; fluid side padding 20–64 px |
| Grid | 4 columns compact, 8 medium, 12 wide; gaps 16–32 px; content-based breakpoints rather than device assumptions |
| Breakpoints | Proposed compact <640 px, medium 640–1023 px, wide ≥1024 px; verify reflow at 320 CSS px |
| Spacing | 4 px base; scale 4, 8, 12, 16, 24, 32, 48, 64, 96, 128 px; section rhythm adapts fluidly |
| Alignment | Shared container edges; deliberate asymmetric editorial layouts only when reading and focus order remain logical |
| Touch / focus | Proposed controls ≥44×44 px comfortable target; meet WCAG 2.2 AA target-size requirements/exceptions; visible non-obscured focus |
| Density | Generous marketing rhythm; more compact readable case-study/field layouts; no fixed heights clipping translated/error text |

## Typography and hierarchy proposal

Semantic H1–H6 define structure, not size alone. One clear page H1; concise body text; preserve readable legal and form instructions. No critical text as imagery.

| Role | Proposed scale / treatment |
|---|---|
| Display / hero | Fluid 40–72 px, 1.05–1.15 line height; restrained line length; never cramped mobile wrapping |
| Page/section headings | H1 36–56, H2 28–40, H3 22–28 px; 1.15–1.3; coherent weight hierarchy |
| Body | 16–18 px, 1.5–1.7 line height; no forced justified text |
| Supporting / labels | 14–16 px; maintain adequate contrast, no indispensable tiny labels |
| Evidence / metadata | 14–16 px; relation, maturity and publication labels remain separate |
| Numeric / code | Tabular numerals where needed; monospace only for justified technical evidence, not a stylistic requirement |

**Font family is unresolved.** Proposal: a performance-safe system sans-serif baseline; optional distinctive licensed display/body families only after Owner direction and license/privacy/payload assessment. No supplied logo/font was verified, no family installed, no license assumed. Avoid unnecessary multiple weights/third-party font connections; budget font payload and fallback shift.

## Color roles, surfaces and geometry proposal

Candidate role examples—not final brand values:

| Role | Proposed value / rule |
|---|---|
| Canvas light | #F5F7F8 |
| Surface | #FFFFFF; alternate #E9EFF1 |
| Ink | #152C36 |
| Muted text | #425B65, subject to pair testing |
| Brand accent / primary action | #006B67; paired with white after contrast verification |
| Warm editorial accent | #8A632B; restrained, not automatic small-text/focus use |
| Inverse | #152C36 background with #F5F7F8 text, pair verified later |
| Border | #B8C8CD; stronger role for essential controls, verified contrast |
| Focus | Dedicated high-contrast ring with offset; separate per-surface token, never brand color by assumption |
| Semantic | success/warning/error/info distinct text+icon+label; exact values proposed only after contrast checks |

Normal text ≥4.5:1; large text ≥3:1; essential UI/focus graphics ≥3:1 against adjacent colors where applicable. No contrast PASS claimed from listing hex values. Contrast matrix across default/hover/pressed/disabled/inverse/error states is required before design ratification/implementation acceptance.

Proposed border widths 1/2 px; radius roles 0–4 px editorial, 8 px cards/controls, no obligatory pill interface. Elevation: none by default; subtle 1–2-layer shadow for interactive overlays; never sole boundary indication. Surfaces distinguish sections without excessive gradients or glass blur. Icons: consistent simple stroke system, licensed source, explicit labels/accessible names; decorative icons hidden from assistive technology.

## Imagery, Work and Music presentation

Use approved actual work, licensed art-directed photography/graphics or accurate diagrams. No fake screenshots, fabricated clients/artists or stock photos suggesting actual engagements. Verify permission and publication/withdrawal provenance for derivatives; write informative alt text, empty alt for decoration and captions for context.

Portfolio cards distinguish relationship, maturity and public permission; no invented badge hierarchy. Case studies use readable context/role/evidence/media flow and omit unsupported outcomes. Music proof uses the same layout language with approved expressive artwork, exact role/relationship captions and dedicated CTA; never a faux artist-management dashboard or EPK.

Responsive media with explicit dimensions/aspect ratio, useful crop/focal-point metadata and optimized derivatives. No autoplay hero video/splash sequence; no heavy GPU requirement. Optional media lazy loads below fold; critical text/CTA remains usable if media/CDN fails. Captions/transcripts and controls for approved meaningful audiovisual material.

## Component taxonomy and candidate contracts

| Family | Components / state and interaction requirements |
|---|---|
| Foundations | Containers, grid/stack/cluster, typography, divider, icon, link; semantic DOM order |
| Navigation | Brand/Home, primary nav, mobile disclosure, footer, optional breadcrumbs; keyboard/touch, visible focus, current-page label |
| Actions | Primary inquiry action, secondary evidence link, tertiary contextual link; distinguish links from buttons; loading never false completion |
| Editorial | Hero, practice summary/detail, proof strip, company narrative, CTA band; one main action, no fabricated empty modules |
| Evidence | Work card/index, case-study sections, separate relationship/maturity labels, curated Music proof, permitted media/captions |
| Forms | Label, hint, required indicator, input/select/textarea, error summary, inline error, submit, privacy context; no upload/login control |
| Feedback | Loading, invalid input, confirmed acceptance, ambiguous response, server rejection, journal unavailable, media/CMS degradation |
| Supporting | Accessible disclosure, callout, permitted legal text, metadata, empty result only if a real approved collection warrants it |

Primary CTA: high prominence, only one competing primary per region. Secondary CTA: visible but subordinate. Music CTA carries specific context. Forms retain readable labels; no placeholder-only labels or decorative mandatory custom widgets. Supported practice context cannot substitute for server validation.

## Responsive and motion system

Mobile-first reading order; grids collapse cleanly, forms normally single column, navigation stays reachable without covering focused elements. Reflow at 320 CSS px and 200% text zoom; WCAG resize/reflow requirements tested separately. No horizontal page overflow; genuine wide evidence tables receive labeled scrolling where necessary.

Proposed duration tokens: instant 0 ms, feedback 100–160 ms, disclosure 160–240 ms, entrance ≤320 ms. Subtle opacity/transform; no scroll hijack, essential scroll-trigger reveal or parallax dependence. Do not delay content for decorative animation. Focus and loading feedback immediately perceptible.

Reduced motion: remove decorative transforms/parallax/animated background/scroll effects; preserve state feedback with immediate changes. No flashing or auto-moving content without appropriate controls. Motion must not add disproportionate JavaScript or impair interaction metrics.

## Form/loading/error/degraded acceptance contract

- Validate and focus an accessible error summary/field without erasing useful safe in-page input; no browser-persistent inquiry queue by default.
- Submit-pending is neutral: avoid duplicate clicks, announce processing, timeout safely; it is not success.
- Confirm acceptance **only after server-confirmed atomic journal plus required delivery intent commit**.
- Lost/ambiguous response: honest uncertainty with approved retry guidance; no claimed dedup guarantee until proven.
- Journal unavailable/rejected: no acceptance success; clear retry/contact fallback and explicit privacy considerations.
- Notification failure after commit does not reverse visitor acceptance or expose internal delivery logs.
- CMS API outage: last approved release text remains; media outage fallback preserves reading/navigation/intake.

## Token architecture and accessibility/performance gates

Documentary token hierarchy: **primitive → semantic role → component token**. Example identifiers: `space.4`, `type.body`, `color.text.primary`, `surface.inverse`, `action.primary.default`, `focus.onLight`, `form.error`, `motion.feedback`, `radius.card`. References, not scattered raw values; status labels never used as a substitute for semantic state. No executable tokens file or component library is created here.

Acceptance requires keyboard/focus/name/role/value checks, screen-reader form errors/status announcements, contrast matrix, reduced motion, responsive/zoom/reflow, non-color state differentiation, approved media accessibility and correct no-JS core reading.

Ratified targets: WCAG **2.2 AA**; field CWV **LCP ≤2.5 s, INP ≤200 ms, CLS ≤0.1 at p75** when sufficient field data exists. Initial compressed JS **≤100 KB content / ≤150 KB intake**, including initially loaded third-party scripts. Fonts/images have measured budgets within LCP/transfer constraints; exact per-asset caps require later evidence, not invented ratified limits. Exceptions require measured cost/value and applicable approval.

Deliver reviewable tokens/component/state matrix, contrast evidence and responsive compositions during separately authorized later design work. This candidate currently supplies documentary contracts only. Brand specifics, actual assets, provider mechanics and runtime implementation remain unresolved; no design or accessibility test is claimed as executed.