FOUNDY STACK · DESIGN SYSTEM · v1.0

The visual operating system
behind Web · AI · Growth.

Every token, type pairing, component, and pattern that ships on foundystack.vercel.app appears on this page. This document is the source of truth. If a screen disagrees with this page, the screen is wrong.

samik das · ali karrar · v1.0 · 2026-05-25 · canada / remote

Color

Twelve semantic tokens. Three pillar tints. Crimson is primary, Crimson Deep is accent. Ink Maroon is the site’s warm default surface.

Ink Maroon#2A0F10

--bg-base

DEFAULT SITE BACKGROUND. Warm, premium, on-brand without being loud. Most sections sit on this.

Crimson Maroon#3A1518

--bg-elevated

Elevated surface. Cards, nav-stuck state, feature sections that need lift.

Rose Maroon#4A0E1F

--section-rose

The "stand out" section. Testimonials only. Like Famishly’s saffron section break.

Ink#0A0807

--bg-ink

Near-black. ONLY for footer + data-dense sections that need to recede.

Crimson#DC2626

--accent-base

PRIMARY brand color. CTAs, italic emphasis, eyebrows, links on hover. The site’s pulse.

Crimson Deep#7F1D1D

--accent-deep

ACCENT. Hover/pressed states, recommended-tier borders, secondary emphasis.

Coral#F87171

--accent-bright

Accent-of-the-accent. One thing per section. The AI pillar tint.

Rose#E11D48

--accent-rose

Growth pillar tint. Cofounder identifier in author tags.

Burgundy#991B1B

--accent-burgundy

Mid-tone for charts and data viz where Crimson is too loud.

Bone#F5EFE0

--text-primary

Primary text. Warm white — NOT pure #FFF (which reads clinical/AI).

Bone Dim#B8AFA3

--text-secondary

Secondary text. Body copy paragraphs.

Bone Mute#6B6258

--text-tertiary

Tertiary. Captions, metadata, byline.

PILLAR · WEB

Web

Sites, brand, design systems.

Crimson · #DC2626

PILLAR · AI

AI

Agents, automations, internal tools.

Coral · #F87171

PILLAR · GROWTH

Growth

Content, SEO, LinkedIn, email.

Rose · #E11D48

Section background rhythm

Four background tones for variety, all warm. Most sections sit on Ink Maroon. One section per page goes Rose to stand out (testimonials).

Ink Maroonsection-default#2A0F10

Hero, services, pricing, onboarding — the bread of the site

Crimson Maroonsection-crimson#3A1518

Stack section, case studies, value-prop — when a section needs to lift

Rose Maroonsection-rose#4A0E1F

Testimonials only. The single warmest section. The "stand out" beat.

Inksection-ink#0A0807

Footer only. Closes the page with weight, recedes into the night.

The Rose Maroon testimonial section is the Foundy Stack equivalent of Famishly’s saffron break — one section per page warmer than everything around it, so the viewer’s eye lands there. Use it sparingly; if every section stands out, none of them do.

Type

Three families, three jobs. Fraunces for emphasis, Inter for reading, JetBrains for infrastructure.

Hero — Fraunces 300 with italic emphasis

You ship product.
We run everything else.

Section head — Fraunces 300 + italic crimson em

Three pillars. One stack.

Body — Inter 300 + Bone Dim · line-height 1.75 · max 64ch

Foundy Stack is the full operating system for SaaS founders and the agencies that serve them. Web, AI, and content marketing — engineered as one stack, delivered on one retainer.

Eyebrow — JetBrains Mono 12 · UPPERCASE · .28em tracking · Crimson

[ THE STACK ]

Button — Inter 600 · UPPERCASE · .14em tracking

START ONBOARDING

Metadata — JetBrains Mono 11 · .04em · Bone Mute

samik das & ali karrar · est. 2026 · canada / remote

Token	px	Family	Weight	Use	Sample
`display-3xl`	152	Fraunces	300	Hero H1 max	You ship product.
`display-2xl`	96	Fraunces	300	Section H2 max	Built for founders
`display-xl`	64	Fraunces	300	Card titles	The full stack
`display-lg`	44	Fraunces	300	Pricing tier name	Empire
`h1`	48	Fraunces	400	Subpage H1	Our services
`h2`	36	Fraunces	400	Section heads	What we ship
`h3`	24	Inter	500	Card heads	Custom AI Agents
`body-lg`	18	Inter	300	Hero subhead	Three pillars. One stack.
`body`	16	Inter	400	Default body	Default reading copy.
`body-sm`	14	Inter	300	Card descriptions	Description copy.
`caption`	13	Inter	400	Form labels	Your email
`mono-sm`	12	JetBrains	500	Eyebrows, step nums	STEP 01
`micro`	11	JetBrains	500	Tags, badges	BETA

Spacing

8px grid. Sections snap to 120 / 160 / 200 only.

space-4

4px

space-8

8px

space-12

12px

space-16

16px

space-20

20px

space-24

24px

space-32

32px

space-40

40px

space-48

48px

space-56

56px

space-64

64px

space-80

80px

space-96

96px

space-120

120px

space-160

160px

space-200

200px

space-240

240px

Section vertical padding snaps to space-120 / space-160 / space-200 only. Cards: space-40 space-32. Inline gaps: 4 / 8 / 12 / 16.

Radius

Zero radius. The discipline that makes the site feel architectural.

CARD · BUTTON · INPUT

0px

Default. Always. The architectural signal.

PILLS · STATUS BADGES

999px

Full pill. The only exception, used for live state.

AVATARS

50%

Testimonial author circles. Nothing else.

Shadow

Four named shadows with specific jobs. Never decorative.

shadow-blueprint

0 1px 0 0 rgba(220,38,38,0.18)

Hairline under sticky headers

shadow-stack

0 12px 32px -16px rgba(220,38,38,0.25), 0 1px 0 rgba(220,38,38,0.12) inset

Cards on hover — "rises out of the stack"

shadow-ember

0 0 32px rgba(220,38,38,0.35), 0 0 64px rgba(220,38,38,0.15)

Recommended pricing tier glow. One per page max.

shadow-print

0 1px 0 rgba(255,255,255,0.04) inset

Card inner-top highlight

Motion

Three easings with personality. Six named animations. Three scroll-choreography patterns.

Token	Curve	Use	Personality
`ease-precise`	`cubic-bezier(0.4, 0, 0.2, 1)`	Default UI transitions	Precise. Default.
`ease-architect`	`cubic-bezier(0.16, 1, 0.3, 1)`	Section reveals	Draws like a blueprint.
`ease-publish`	`cubic-bezier(0.76, 0, 0.24, 1)`	Hero text rises, dramatic motion	Type going to press.

Token	Duration	Easing	Use
`rise`	800ms	`ease-architect`	Scroll reveal — opacity 0 + y:36 → 1 + 0
`unfold`	900ms	`ease-publish`	Hero H1 line-by-line text mask, stagger 150ms
`pulse-ember`	3s	`ease-in-out`	Recommended tier border glow, infinite
`pulse-status`	2s	`ease-in-out`	Nav status pill dot, infinite
`marquee-warm`	28s	`linear`	Horizontal scroll, hover-paused, infinite
`count-up`	1400ms	`cubic-out`	JS-driven, triggered on intersection

Token	Choreography
`scroll-pin-hero`	Hero pins for 100vh. Three lines unfold in sequence. Crimson seam draws from hero bottom down into next section.
`scroll-marquee-stack`	Horizontal pin of the 9-service Stack section (desktop only). Cards translateX from right to left as user scrolls.
`scroll-cinema-case`	Case studies pin per card for ~80vh of scroll. Title → metrics count up one-by-one → quote types out → unpin.

Page transitions

Four randomized transitions on internal navigation. Same pattern as Famishly’s noodle-wipe + order-bell, themed for a warm mentor.

ID	Label	Duration	Choreography	Metaphor
`type-set`	Type-set wipe	700ms	A Bone-cream slab slides up from below. Centered: an italic Fraunces "F" draws in via SVG stroke-dashoffset, then fills crimson. Feels like a magazine page setting itself.	Editorial. The page composes itself like print.
`ledger-turn`	Ledger turn	750ms	The current page flips on its horizontal center axis like turning a page in a leather journal. A subtle paper-curl shadow follows the fold. CSS 3D rotateX with perspective.	Mentor / craftsman. Turning the page in our shared notebook.
`filament`	Filament glow	650ms	Screen dims to Ink Maroon. A thin horizontal crimson filament-line draws across center, glows briefly (box-shadow pulse), then the new page rises from beneath it.	Lighting the next room. Warm electrical / atelier metaphor.
`ink-bloom`	Ink bloom	800ms	A crimson ink-drop expands from cursor position (radial mask), swallows the screen, then recedes to reveal the new page. Like watching ink bloom on heavy paper.	Editorial / mentor-journal. Wet ink spreading across the page.

All four ship together. A PageTransitionProvider intercepts internal link clicks, calls pickRandomTransition(), runs the chosen transition for its duration, then router.pushes. Pattern lifted directly from /home/admin/sync/projex/famishly/app/src/components/transitions/PageTransitionProvider.tsx. Skips dashboard / api / auth routes. Respects prefers-reduced-motion. Skipped on same-section navigation (e.g., /work → /work/123).

Buttons

Three variants. Zero radius. UPPERCASE Inter 600. .14em tracking.

btn-crimson-glow · lg

btn-crimson · lg

btn-crimson · md

btn-outline · lg

btn-outline · md

btn-ghost · md

Cards

Three card patterns: ink, spotlight, bare.

Hover over any card — a crimson glow follows your cursor. The radial-gradient lights from where you point. Linear-style premium signal that says this thing is alive.

CARD · INK

Default card

Glass-frosted bg, dual-stroke border (Hairline White outer + Ink contrast). Lifts on hover with crimson border hint and weighted shadow. The workhorse — used for services, case studies, and most content.

Recommended tier

Crimson-tinted glass + ember glow shadow. Marks the editor’s pick in any grid — pricing recommended tier, featured case study, the one we want you to read. One per section, max two per page.

CARD · BARE

Bare metric row

Just hairlines top + bottom. No bg, no shadow. Lives inside other cards — the metric rows in a case study, the feature list in a pricing tier. Quiet by design.

For the aspirational top tier:the card-aspirational below has an animated crimson border-beam rotating around it. Reserved for the $10K Empire tier on the pricing page — and used once per site.

CARD · ASPIRATIONAL

Empire — for the founders we pick.

The full stack, end to end. Brand, site, AI, content, and a partner who runs it with you. Border-beam rotates continuously. Used exclusively for the top-of-tier offering — the one we want to be remembered.

Pills, Badges, Tags

The status pill is the site's most-noticed real-company signal.

Booking from June 2026 · 4 slotspill-status

SaaS · B2BWebAIGrowthpill-tag

MOST POPULARBETANEWbadge / badge-coral / badge-rose

Inputs

Zero radius. Crimson focus state. JetBrains Mono labels.

YOUR EMAIL

TELL US ABOUT YOUR STACK

WHICH PILLAR(S)?

Eyebrow + Heading combos

The signature opening of every section.

[ THE STACK ]

Three pillars. One stack.

We're not three vendors stapled together. Foundy Stack is one team running Web, AI, and Growth as a single coordinated system — so everything you ship compounds.

[ CASE STUDIES ]

Results that speak for themselves.

We pick our work. Every retainer is a long-term build, not a project. Here's what the last twelve months looked like.

Pillar identifiers

Each of Web / AI / Growth carries its own tint. Three reds, one palette.

[ WEB ]

We build web.

Sites, brand, design systems.

[ AI ]

We build ai.

Agents, automations, internal tools.

[ GROWTH ]

We build growth.

Content, SEO, LinkedIn, email.

Pattern library

Three composition patterns the home page is built from.

pattern-hero

Full viewport, Ink Maroon bg + film-grain SVG + slow drift radial-gradient. Hero H1 unfolded by line. Pins for 100vh of scroll.

pattern-editorial

Ink bg, eyebrow + H2 with italic emphasis, body in Bone Dim, optional inline <em> callout. Wide negative space.

pattern-data

Ink 2 bg, 2px-gap card grid, monospace metadata, count-up numbers. Used for The Stack, Case Studies, Pricing.

Voice & Tone

Declarative, not promotional. Italic-emphasis carries the punchline.

You ship product. We run everything else.
Three pillars. One stack.
One team. One retainer. Three pillars.
We pick our work.
Built for SaaS founders and the agencies that serve them.

DON'T

Transform your business with our amazing services!
We help startups grow their pipeline.
Let us help you scale to the next level.
Trusted by industry leaders worldwide.

No exclamation points. No “amazing.” No “transform your business.” No generic SaaS template copy.

Brand identifiers

The signatures that mark every page as Foundy Stack.

LOGO LOCKUP

FOUNDY STACK

Inter 600 + Fraunces 600 italic. The system part is italic.

STATUS PILL

Booking from June 2026 · 4 slots

Always in nav top-right. Real, time-stamped scarcity. Auto-updates current quarter.

COFOUNDER LINE

samik das · ali karrar · cofounders

JetBrains 11px Bone Mute. Lives in nav corner + footer.

FOOTER TIMESTAMP

canada · 14:00 ET · last shipped today

JetBrains 11px. Live timezone + last-deploy time. Feels like a real, alive company.