Components

UI components

12 shared primitives. Raw HTML elements are banned. Every interactive element routes through a governed component.

All primitives

Button

11 variants

Card

4 variants × 5 paddings

Input

default, sm, search

Select

default, sm

Textarea

default

Label

wrapper

SectionHeader

left/center, h1-h4

Badge

category badges

ImageCard

editorial hover

Alert

status banners

FormField

label+input+error

EmptyState

centered placeholder

Buttons

On light surface

On dark surface

Primary.btn-primary0.95rem/600 · 1rem 2rem · Purple bg → Gray 900

Secondary.btn-secondary0.75rem/700 UPPERCASE · 0.85rem 1.5rem · border → Purple

Outline.btn-outline0.95rem/500 · underline scales to 60%

Solid White.btn-solid-white0.75rem/700 UPPERCASE · 1.1rem 2.5rem · white → Gray 900

Outline White.btn-outline-white0.75rem/700 UPPERCASE · 30% border → 50%

Ghost.btn-ghost0.7rem/700 UPPERCASE · no bg · gray → purple

Link.btn-link0.72rem/700 UPPERCASE · bottom border → purple

Inline.btn-inline0.72rem/700 UPPERCASE · 4rem height · fills dark

Carousel.btn-carouselicon button · border-hairline → dark fill

Nav CTA.nav-cta0.75rem/700 UPPERCASE · purple → gray 900

Trailing SVGs auto-translate +0.25rem on hover. Link variant moves diagonally. Transition: var(--motion-fast) var(--ease-out).

Cards

Default

White bg · gray-100 border · standard container

Interactive

Purple border on hover · clickable content

Brand

Purple/20 border · branded sections

Muted

Gray fill · secondary info

Padding scale

none0Custom layout

sm16px (p-4)Compact, badges

md24→32px (p-6 lg:p-8)Standard cards

lg40→48px (p-10 lg:p-12)Feature cards

xl64→96px (p-16 lg:p-24)Hero panels

Form inputs

Minimalist editorial fields. Bottom-border only. No box outlines until focus.

Default

Focus

Error

Height4rem (64px) · sm: 3rem (48px)

FontDM Sans 1rem · sm: 0.9rem

Border defaultBottom 1px --border-section

Border focusBottom 2px --brand-primary

Border errorBottom 2px --crimson

PlaceholderGray 500

SectionHeader

Solutions

What we do best

Brands, websites, and digital experiences that connect across cultures.

labelstring?Eyebrow · .t-label · text-purple

titlestringHeading · maps to t-h1/h2/h3/h4

descriptionstring?Body · .t-body · max-w-prose

ash1|h2|h3|h4Semantic tag · default h2

alignleft|centerdefault: left

revealbooleanGSAP scroll reveal · default true

Media patterns

.media-reveal

Grayscale image → color + scale(1.05) on group:hover · 1s ease-out

.media-reveal-sm

Compact variant · scale(1.03) · 0.5s ease-out

.img-cinematic

Grayscale(1) → grayscale(0) + scale(1.03) · 1.2s ease-out

.icon-circle

Circular indicator → brand-primary fill on group:hover