Guidelines / Components

Flat, bordered, token-native.

shadcn/ui (new-york, neutral) plus the section library, all retokenized to the house palette. Pill buttons, flat cards, sharp media. No shadow ever earns its way in. For the full type / spacing / token reference see the style guide.

01 · Primitives

Pill buttons, flat cards, fixed chips

Every button is a pill: black fill / white text, inverted in dark. Variants stay flat (outline + ghost lean on border and opacity). Chips and tags are a fixed size; they’re UI, so they never scale with the viewport.

AllBrand & IdentityImage & FilmWeb & Digital2026

Identity system

Brand & Identity

Campaign film

Image & Film

Studio website

Web & Digital

Media corners stay sharp (0 radius); cards + chips use the small on-system radius.

02 · Where things live

The folder map

src/components/ui/shadcn primitives: button, card, badge, input, tabs, carousel, marquee

src/components/sections/page sections: hero, services, case-studies, process, testimonials, gallery, cta

src/components/chrome/shared header, search, mobile nav + the premium footer (root-agnostic px)

src/components/motion/MaskedText, Magnetic, AnimatedLink, RollingNumber, Reveal

src/components/{vucko,pentagram}/clone-bubble components: isolated, see design/clones.md

New sections follow the /new-section conventions: token-native, flat, reduced-motion safe.

03 · Section inventory

The building blocks

The base section set, all retokenized to the palette. Compose pages from these; add new ones the same way.

04 · The law

Strip these on sight

Never ships

No box-shadow / drop-shadow: borders + contrast + opacity instead.
No gradients: flat fills only.
No hardcoded hex: reference a token.
No rounded-md/lg on buttons: pills only.

Always

shadcn + house tokens, retokenized before it lands.
Flat cards (bg-card border), sharp media corners.
Both light + dark correct; reduced-motion respected.
Audit a diff with /brand-check, gate with /ship.

Source of truth: design/components.md + design/principles.md.