Identity system
Brand & Identity
Design System
The HoopAI Creative Studio style guide.
A living reference, rendered in the real CSS it documents. Premium and typography-driven, black & white with neutral tokens, flat surfaces with no shadows or gradients, the visual language of an AI-native creative studio. Every value below is a token; if a rule looks wrong on this page, the page is the bug report.
01 · The rule
Only display headings are fluid. Everything else is fixed.
The root is a clean 16px (1rem = 16px). Display headings scale with the viewport via clamp(min, vw, max). Body, labels, UI and tags use standard fixed px, made responsive with breakpoints, never viewport-fluid. The old fluid-everything root was the bug: it shrank whole layouts instead of reflowing them.
Fluid, display only
128
clamp(2rem, 4.5vw, 3.5rem): resize the window and this grows. The only place vw is allowed, and only inside clamp().
Fixed, everything else
This paragraph holds 17px at every width. On narrow screens the layout reflows; the text never shrinks below its readable size.
Standard px, responsive via breakpoints: not vw.
02 · Color
Achromatic tokens
Pure achromatic OKLCH neutrals: every token has chroma 0, no hue in the system. Dark mode is a true lightness inversion. These swatches read live from the active theme, so they re-paint when you toggle light / dark.
03 · Typography
The type scale
Inter carries everything, display and text. Hierarchy comes from scale contrast, not weight or color. Tracking is earned at display scale and never applied to controls.
Display tier, fluid (clamp)
Aa
Creative, accelerated.
Typography does the heavy lifting.
Text tier, fixed px
Section heading
Subsection heading
Lead paragraph copy. Body text holds a comfortable 1.58 line-height and zero tracking. Never negative, never fluid.
Default running text at the clean 16px root. This is the measure most of the site is read at.
Caption and meta: counts, timestamps, image credits.
Eyebrow label
Line-height: display 1.0–1.05 · headings 1.1–1.15 · body 1.58 · captions 1.4. Tracking: 0 under 28px → −0.01em at 28–40 → −0.015em at 40–64 → −0.02em above 64. Never negative on buttons, inputs, nav or tags.
04 · Spacing
The spacing scale
A 4px base in Tailwind-compatible steps. Section rhythm is built from these: compact, standard and editorial vertical padding all resolve to multiples of the same base.
space-10.25rem · 4px
space-20.5rem · 8px
space-30.75rem · 12px
space-41rem · 16px
space-61.5rem · 24px
space-82rem · 32px
space-123rem · 48px
space-164rem · 64px
space-246rem · 96px
05 · Buttons & controls
Pill buttons, animated links
Every button is a pill (rounded-full): black fill / white text by default, inverted in dark. Variants stay flat: outline and ghost lean on borders and opacity, never shadow.
06 · Components
Cards, tags & chips
Repeated items are flat bordered cards, no shadow. Tags and chips are a fixed size (28px tall, 12px text, 3px radius); they are UI, so they never scale with the viewport. Portfolio media corners stay sharp (0 radius).
AllBrand & IdentityImage & FilmWeb & Digital2026
Campaign film
Image & Film
Studio website
Web & Digital
07 · Layout
Containers & breakpoints
Pick a named container tier, never an arbitrary max-width. Side gutter is one value across every breakpoint: clamp(1.25rem, 3.5vw, 4rem) (20–64px). Design and QA against all five canonical breakpoints.
| Container | Width | Use |
|---|---|---|
--container-sm | 640 | Forms, prose measure |
--container-lg | 1152 | Standard content |
--container | 1360 | House default |
--container-stage | 1800 | Wide editorial / galleries |
--container-wide | 1912 | Full-bleed media |
--container-full | 100% | Immersive bleed |
| Breakpoint | Range | QA width |
|---|---|---|
| Mobile portrait | ≤ 479px | 390 |
| Mobile landscape | ≤ 767px | 667 |
| Tablet | ≤ 991px | 768 |
| Laptop | 992 – 1439px | 1280 |
| Desktop large | ≥ 1440px | 1920 |
08 · Hard rules
Non-negotiable
Break these and the site reads “template” no matter what else is right.
Always
- Black & white primary palette: neutral OKLCH tokens, color only as imagery or one accent.
- Pill buttons (rounded-full): black fill / white text, inverted in dark.
- Flat fills. Convey depth with borders, surface contrast and opacity.
- Display headings fluid (clamp); body, labels, UI and tags fixed px.
- Type-driven hierarchy: scale contrast over weight or color.
- Both light and dark correct. Reduced-motion always respected.
Never
- No box-shadow, drop-shadow or text-shadow. Anywhere.
- No gradients: flat fills only.
- No hardcoded hex. Always reference a token (var(--…)).
- No fluid (vw) sizing on body, UI or tags: only display, only inside clamp().
- No opacity-only reveals: transform / clip in, deliberate easing.
- No root font-size multiplier: the root is a clean 16px.
Source of truth: design/principles.md and the topic pages. Audit a diff with /brand-check; gate releases with /ship.