02 / 04 · Component Library

Components.

12 component sets · ~62 variants · auto-layout · variables · text styles. Drag-and-drop from the Figma Assets panel. Swap variants via right panel. Edit copy via instance overrides.

COMPONENT SETS
12
TOTAL VARIANTS
~62
AUTO-LAYOUT
100%
VARIABLES BOUND
all fills
Component 01 / 12

Button

Primary action button. 3 variants × 2 sizes × 4 states.

VARIANTS 24
src/components/Button.astro
Component 02 / 12

Tag

Label / chip. 3 visual variants × 2 states.

VARIANTS 6
src/components/Tag.astro
mono amber cream
Component 03 / 12

Breadcrumb

Wayfinding on /project/[slug] and /blog/[slug]. Light + Dark.

VARIANTS 2
src/components/Breadcrumb.astro
Component 04 / 12

Nav

Global nav. Transparent/solid × desktop/mobile.

VARIANTS 4
src/components/Nav.astro

See in use: navigate the site (Nav appears in /home, /about, /work, /process, /contact or /blog).

Component 05 / 12

Footer

Global footer. Desktop + mobile.

VARIANTS 2
src/components/Footer.astro

See in use: navigate the site (Footer appears in /home, /about, /work, /process, /contact or /blog).

Component 06 / 12

PageHero

Internal-page hero. Light/Dark × desktop/mobile + text props.

VARIANTS 4
src/components/PageHero.astro

See in use: navigate the site (PageHero appears in /home, /about, /work, /process, /contact or /blog).

Component 07 / 12

CtaBlock

Final conversion block. Primary/secondary × desktop/mobile.

VARIANTS 4
src/components/CtaBlock.astro

See in use: navigate the site (CtaBlock appears in /home, /about, /work, /process, /contact or /blog).

Component 08 / 12

WorkCard

Case study card. Default/featured × desktop/mobile.

VARIANTS 4
composição inline /work

See in use: navigate the site (WorkCard appears in /home, /about, /work, /process, /contact or /blog).

Component 09 / 12

Metric

Numeric metric + label + sublabel. Card/inline.

VARIANTS 4
src/components/Metric.astro
−25% Lead time
+36% Eficiência
+29% Time-to-market
Component 10 / 12

CaseListItem

Numbered list item for cases. Desktop + mobile.

VARIANTS 2
composição inline /home + /work

See in use: navigate the site (CaseListItem appears in /home, /about, /work, /process, /contact or /blog).

Component 11 / 12

PillarCard

Numbered pillar card. Dark/light × desktop/mobile.

VARIANTS 4
composição inline /home + /about + /process

See in use: navigate the site (PillarCard appears in /home, /about, /work, /process, /contact or /blog).

Component 12 / 12

MobileDrawer

Mobile full-screen drawer opened by Nav hamburger. 6 links 40px Bold.

VARIANTS 1
src/components/Nav.astro (drawer)

See in use: navigate the site (MobileDrawer appears in /home, /about, /work, /process, /contact or /blog).