01 — Brand

The marks.

Four expressions of one identity. The wordmark leads in navigation and signatures. The brandmark pairs icon + wordmark for hero lockups. The icon goes anywhere square: favicons, avatars, app tiles. The wave is a textural signature — use it large, behind, and cropped.

Wordmark · White

Wordmark · Black

Brandmark · White

Brandmark · Black

Icon · White

Icon · Black

Wave · Textural signature

Holographic signature

The animated conic gradient + wave overlay + black veil is Founding's most distinctive visual. Deploy it on marquee hero sections and rarely elsewhere — scarcity is the point.

Brand signature · Holo

We make things worth founding.

Flag textures

Animated holo flag loops — reserve for video and splash takeovers. Each background context demands a contrast-safe treatment: white flag on dark, black flag on medium and light.

Dark · #0A0A0A filter: invert(1) · 19.6:1

Medium · #5A5A5E native black · 4.7:1 AA

Light · #ECEEF2 native black · 16.1:1

Clear space & minimum size

Clear space

Reserve clear space equal to the height of the icon's "F" bar on all sides. Never crowd the wordmark with copy or UI chrome.

Minimum size

Wordmark: 80px wide on screen, 20mm in print. Icon: 24px on screen, 8mm in print. Below that, use the favicon variant.

Don't

No outlines, drop shadows, rotations, or rebuilds. Don't place the black wordmark on busy holographic backgrounds — use the white one instead.

02 — Color

Deep black. Mint green.
One prismatic spectrum.

The system lives on a black-first canvas. Mint Green #7EF893 is the single accent — it's what "points at things." The holographic spectrum (cyan, mint, lavender) only appears on hero backgrounds and inside SiteLaunch cards, never as general UI color.

Neutrals

Neutral Lightest#F2F2F2

Neutral Lighter#D8D8D8

Neutral Light#B2B2B2

Neutral#7F7F7F

Neutral Dark#4C4C4C

Neutral Darker#252424

Ink (surface)#1C1C1E

Black#000000

Mint Green — primary accent

Lighter#E5FDE9

Light#A4FAB3

Mint ✦#7EF893

Dark#64C675

Darker#32633A

Darkest#254A2C

Holographic spectrum — hero only

Holo Cyan#69EEFF

Cyan Lt#8EF2FF

Holo Mint#6EFFB6

Mint Pale#BFFFDF

Lavender#C6A2FF

Lavender Lt#DEC9FF

Deep anchors — SiteLaunch cards

Deep Navy · Prism#001441

Deep Teal · Rocket#003329

Deep Plum · Orbit#230035

Schemes in use

Scheme 1 — Dark (default)

Accent callouts use mint

Foreground surface on black background, mint accent, 10% white borders.

Scheme 2 — Mint (CTA / press)

Accent callouts use black

Darker mint foreground on mint background, 15% ink borders, black accent.

03 — Type

Gelica & Manrope.

A contemporary serif paired with a geometric grotesque. Gelica carries voice, pull-quotes, and display. Manrope carries everything readable — UI, body, captions.

Display · Gelica Medium 500 · italic for emphasis

AaBbCc

        ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 !?&
        OTF · 9 weights
      

Body · Manrope Variable 200–800

AaBbCc

        ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 !?&
        TTF Variable · wght axis
      

Scale · Desktop

H1 / Display

Creative foundations

84 / 100% · Gelica Medium

H2

Built to fit your process

60 / 120% · Gelica Medium

H3

Your custom website starts here

48 / 120% · Gelica Medium

H4

Prism SiteLaunch

40 / 130% · Gelica Medium

H5

Relationships first

32 / 130% · Gelica Medium

H6

Founding energy in every sprint

26 / 140% · Gelica Medium

Text Lg

We work with people, not logos. Projects start with a shared bar for craft.

20 / 150% · Manrope 400

Text Base

Body copy lives here. Manrope's tall x-height keeps longer paragraphs legible on dark backgrounds — the default reading size across the site.

18 / 150% · Manrope 400

Text Sm

UI labels, navigation, card supporting text, captions.

16 / 150% · Manrope 400

Text Xs

Legal, meta, disclaimers, very small labels.

12 / 150% · Manrope 400

Weights · when to reach

Gelica 500 · Medium

The default display weight

Headlines, hero titles, section titles, big numbers.

Gelica 500 · Italic

Emphasis only

A single phrase per headline, usually mint-tinted, for the voicey beat.

Manrope 700 · Bold

Taglines & stats

Short all-bold labels under icons; large stat numbers; button labels at scale.

Gelica — full family

All 10 upright weights and their italic counterparts. Reach outside the default (Medium 500) rarely and intentionally — Gelica Black is for press only; Gelica ExtraLight for airy editorial layouts.

        WeightUprightItalic
      

200 · ExtraLightFounding CreativeFounding Creative

300 · LightFounding CreativeFounding Creative

400 · RegularFounding CreativeFounding Creative

500 · Medium ✦Founding CreativeFounding Creative

600 · SemiBoldFounding CreativeFounding Creative

700 · BoldFounding CreativeFounding Creative

900 · BlackFounding CreativeFounding Creative

Manrope — variable axis

One variable font file covers the full 200–800 weight range. Body copy sits at 400; UI labels and links at 600; section labels and stats at 700.

200 · ExtraLightCreative foundations for brands of all sizes.

300 · LightCreative foundations for brands of all sizes.

400 · Regular ✦Creative foundations for brands of all sizes.

500 · MediumCreative foundations for brands of all sizes.

600 · SemiBold ✦Creative foundations for brands of all sizes.

700 · Bold ✦Creative foundations for brands of all sizes.

800 · ExtraBoldCreative foundations for brands of all sizes.

04 — Spacing, Radius, Shadow

Measured, calm, generous.

An 8pt grid with a 12-column 1140px container inside a 150px gutter. Three radius tiers. Shadows are subtle on dark (real luminance is mostly from the holo gradient, not drop-shadows).

Radius

r-xs · 6

r-sm · 8

r-md · 12

r-lg · 16

r-xl · 24

r-2xl · 32

Shadows & glows

Shadows · use on light or colored surfaces

xs

sm

md

lg

xl

2xl

Glows · use on dark surfaces

mint

cyan

holo-mint

lavender

white

Spacing scale (8pt)

s-1 · 4
inline gaps
s-2 · 8
tag gaps
s-3 · 12
compact
s-4 · 16
card grid gaps
s-5 · 24
content gaps
s-6 · 32
card padding
s-8 · 48
section padding (tight)
s-10 · 80
section vertical
s-13 · 150
page gutter

05 — Components

The working set.

What ships on foundingcreative.com today. These are the living versions — pair with the React library in /Components.

Buttons

Hover any button to see the holographic spectrum glow ring — a slow conic gradient cycling cyan → holo-mint → lavender → magenta with a soft pulse. The link variant has no ring.

Navbar

Tags & chips

Default · neutral

Brand Websites Active engagement Design systems Motion

Holographic spectrum

Mint Cyan Cyan pale Holo mint Lavender Lavender lt

Dot vs micro-icon

With dot Check icon Info icon Star icon

Hover behaviors (click or hover to preview)

Fill on hover Glow on hover Lift on hover Underline on hover Fill · lt

Case study cards

Hover any card below to preview its interaction. Default cards are fully static — all hover effects are opt-in via modifier class.

Static · default

Website · Brand

Prism SiteLaunch — FinFlow

An unforgettable entrance for a Series A fintech.

Design system

Atlas — healthcare component library

96 components, 4 product surfaces, 1 quarter.

Event · Motion

Orbit — founder summit identity

Spatial brand for a 400-person gathering.

Hover · lift

Website · Brand

Prism SiteLaunch — FinFlow

An unforgettable entrance for a Series A fintech.

Design system

Atlas — healthcare component library

96 components, 4 product surfaces, 1 quarter.

Event · Motion

Orbit — founder summit identity

Spatial brand for a 400-person gathering.

Hover · glow

Website · Brand

Prism SiteLaunch — FinFlow

An unforgettable entrance for a Series A fintech.

Design system

Atlas — healthcare component library

96 components, 4 product surfaces, 1 quarter.

Event · Motion

Orbit — founder summit identity

Spatial brand for a 400-person gathering.

Hover · reveal CTA

View case study →

Website · Brand

Prism SiteLaunch — FinFlow

An unforgettable entrance for a Series A fintech.

View case study →

Design system

Atlas — healthcare component library

96 components, 4 product surfaces, 1 quarter.

View case study →

Event · Motion

Orbit — founder summit identity

Spatial brand for a 400-person gathering.

Hover · tint (desaturated until hover)

Website · Brand

Prism SiteLaunch — FinFlow

An unforgettable entrance for a Series A fintech.

Design system

Atlas — healthcare component library

96 components, 4 product surfaces, 1 quarter.

Event · Motion

Orbit — founder summit identity

Spatial brand for a 400-person gathering.

SiteLaunch trio

↗

Prism SiteLaunch

For brands ready to make an unforgettable entrance.

↗

Rocket SiteLaunch

For growth-focused brands ready to fuel conversions.

↗

Orbit SiteLaunch

For scaling companies needing clarity, structure, and alignment.

List item · icon + copy

Relationships firstWe work with people, not logos.

Creative systemsAlways building together to drive outcomes.

Founding energyEvery project is a chance for something big.

06 — Patterns

Sections, assembled.

Three canonical page sections as shipping examples. These are the recipes — same ingredients, consistent outcomes.

Pattern · Hero

Creative agency · Est. 2021

Creative foundations for brands of all sizes.

Web, brand, and design systems that drive better outcomes and stronger growth for businesses.

Pattern · Full-bleed CTA

Your custom website starts here.

Tailored web packages designed to match your goals.

Pattern · Footer

07 — Usage

Pick up the system.

Link the two stylesheets, choose a scheme, and build.

HTML

<link rel="stylesheet" href="css/tokens.css">
<link rel="stylesheet" href="css/components.css">

<body>
  <nav class="navbar">…</nav>
  <button class="btn btn--primary">
    See our work
  </button>
</body>

Tokens (CSS vars)

color: var(--mint);
background: var(--n-black);
border-radius: var(--r-lg);
font-family: var(--font-display);
box-shadow: var(--glow-mint);

/* Swap schemes */
<div class="scheme-mint">…</div>

Creative foundations for brands of all sizes.

The marks.

Holographic signature

Flag textures

Clear space & minimum size

Deep black. Mint green.One prismatic spectrum.

Neutrals

Mint Green — primary accent

Holographic spectrum — hero only

Deep anchors — SiteLaunch cards

Schemes in use

Gelica & Manrope.

Scale · Desktop

Weights · when to reach

Gelica — full family

Manrope — variable axis

Measured, calm, generous.

Radius

Shadows & glows

Spacing scale (8pt)

The working set.

Buttons

Navbar

Tags & chips

Case study cards

Prism SiteLaunch — FinFlow

Atlas — healthcare component library

Orbit — founder summit identity

Prism SiteLaunch — FinFlow

Atlas — healthcare component library

Orbit — founder summit identity

Prism SiteLaunch — FinFlow

Atlas — healthcare component library

Orbit — founder summit identity

Prism SiteLaunch — FinFlow

Atlas — healthcare component library

Orbit — founder summit identity

Prism SiteLaunch — FinFlow

Atlas — healthcare component library

Orbit — founder summit identity

SiteLaunch trio

Prism SiteLaunch

Rocket SiteLaunch

Orbit SiteLaunch

List item · icon + copy

Sections, assembled.

Creative foundations for brands of all sizes.

Your custom website starts here.

Pick up the system.

Deep black. Mint green.
One prismatic spectrum.