DESIGN SYSTEM
The foundations, components and section patterns that build Agentic. Use these styles and components for every new page.
Foreground/Primary
#000000 · Text, dark surfaces, buttons
Foreground/Muted
#808080 · Secondary meta text
Foreground/Subtle
#999999 · Captions, empty states, card meta
Background/Primary
#FFFFFF · Pages, sections, text on dark
Background/Dark
#1A1A1A · Dark cards and tiles
Accent/Primary
#FF3C00 · Accent, CTAs, the diamond motif
Border/Subtle
#E6E6E6 · Dividers, subtle surfaces
Two families: Inter for H1 and H3, Inter Tight for everything else. Inter Display is used only inside Menu Link. All sizes are Desktop / Tablet / Phone.
Heading/H1 · Inter 700 · 80 / 54 / 48
SELECTED WORKS
Heading/H2 Inverse · Inter Tight 700 · 60 / 60 / 36
Section title on dark
Heading/H2 Small · Inter Tight 700 · 36 / 28 / 24
Section title on light
Heading/H3 · Inter 700 · 36 / 28 / 24
Card and item titles
Display/CTA · Inter Tight 700 · 80 / 54 / 48 · Accent
MORE PROJECTS(…)
Body/XL · Inter Tight 500 · 48 / 42 / 24
Lead paragraphs, like the About intro.
Body/Large · Inter Tight 500 · 24 / 22 / 18
Standard body copy, service descriptions and quotes.
Body/Small · Inter Tight 500 · 16
(LABELS) META AND LINKS ON LIGHT
Body/Small Inverse · Inter Tight 500 · 16
(LABELS) META AND LINKS ON DARK
Menu/Display 80 · Inter Display 700 · fixed sizes 120–24 by Menu Link variant
WORK
Edge-to-edge wordmarks: the hero AGENTIC® is the FitTextEffect code component (Inter Display Black, letters slide in); SELECTED WORKS, 404 and the footer AGENTIC® are auto-fit text in Inter 700 / Inter Tight 900. They always fill the width.
10px
Small gaps inside components
24px
Outer page padding, card gaps
48px
Gaps between groups
72px
Tablet side gutter
96px
Section rhythm, card padding
136px
Desktop side gutter
184px
Sticky section label offset
60px
Section blocks, large cards
24px
Tiles, swatches, images
0px
Phone blocks
Reuse these instead of rebuilding. Folders in Assets → Components: Buttons, Cards, Navigation, Tickers, Sections, Utility. Code components live in Assets → Code.
Navigation / Logo
6 variants: Desktop or Mobile × Black-Orange, Black-White, Orange-White. Wraps Logo Mark.
Navigation / Scroll Down
Animated scroll cue for heroes.
Tickers / Chevron Ticker
Looping chevrons; color control.
Utility / QR Code
V1 - Desktop, V2 - Mobile.
Sections / Section Label
Sticky section label. Variants: Left, Right, Tablet Left, Tablet Right, Phone. Set position sticky, top 0.
Sections / Hero Wordmark · FitTextEffect (code)
The brand name at the bottom of the Home hero. Inter Display Black in Accent/Primary, auto-sized to the full width, letters slide in. Change the name only with the rebrand-template skill (it also updates the footer wordmark and every other mention).
Navigation / Menu Link
Hero menu link with icon, label and link. Text uses the Menu/Display styles.
Cards / Award Card
Bound to the Awards collection on Home.
Cards / Work Card
Bound to the Work collection. Variants: Desktop, Tablet, Mobile and their Black/White versions.
Cards / Team Member Card
Bound to Team Members. Variants: Desktop, Tablet, Phone.
Hover and pressed states are gesture variants on Button, Menu Link, Logo, View More Ticker and Sign Up Toggle: preview the page to try them. The variants below are the states you pick per placement.
Every Home section follows one shell: a full-width white section with 24px outer padding, a sticky Section Label (Left or Right), then 60px-radius content blocks. Pages share Template: Nav on top, page content, a 100vh Footer Spacer that reveals the fixed Footer.
Section shell
Section Label + content block (radius 60, padding 96 / 136).
Section content goes here, set in Body/Large on Background/Primary.
About intro · AboutIntro code component
One card per paragraph (max 360 characters). Edit with the edit-about-intro skill.
Services · Services code component
Sticky diamond number + one card per service (title max 40, description max 380). Edit with the edit-services skill.
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><path d="M 24.635 22.866 C 25.123 23.355 25.123 24.147 24.635 24.635 C 24.147 25.123 23.355 25.123 22.866 24.635 L 12.501 14.268 L 2.135 24.635 C 1.647 25.123 0.855 25.123 0.366 24.635 C -0.122 24.147 -0.122 23.355 0.366 22.866 L 10.734 12.501 L 0.366 2.135 C -0.122 1.647 -0.122 0.855 0.366 0.366 C 0.855 -0.122 1.647 -0.122 2.135 0.366 L 12.501 10.734 L 22.866 0.366 C 23.355 -0.122 24.147 -0.122 24.635 0.366 C 25.123 0.855 25.123 1.647 24.635 2.135 L 14.268 12.501 Z" fill="rgb(0, 0, 0)" height="25.00139023844741px" id="jBymG44fK" transform="translate(7.499 7.499)" width="25.001390238447406px"/></svg>)