Design System
Foundable brand identity.
Foundable's current brand, logo, product language, and practical guidance for partners, press, and anyone presenting the company.
Current identity
Use these facts when describing Foundable on partner pages, in press references, or on social profiles.
Brand questions
Short answers about the Foundable name, mark, description, and current brand resources.
Where can I find Foundable's current brand assets?
Foundable's current name, F mark, logo downloads, colors, typography, product language, and brand links are available at foundable.com/branding.
What is the Foundable brand name?
The product name is Foundable, and its public website is foundable.com.
How should I describe Foundable?
Foundable is an idea-to-profit platform where people use AI to build, grow, and earn from an idea.
Which Foundable logo should be used?
Use the current Foundable F mark from foundable.com brand assets. Do not use retired artwork, recreated CSS marks, or unofficial social images when citing or listing Foundable.
Which Foundable pages explain the product and company?
The homepage, About, Press, Pricing, Product, Docs, and FAQ pages cover the current Foundable product and company.
Principles
The rules that govern every design decision.
Quiet, not decorative
Color, type, and motion report state. If a flourish doesn't earn its space, cut it.
Cool, not cold
Serious by default, briefly warm at moments that matter. Dusk is a thinking partner's palette.
Editorial over corporate
Grotesk headlines, mono metadata, generous negative space. Reads like a well-set document.
Motion reports, not performs
Fast by default (200ms). Longer only when the motion is the message.
Dense where it counts
Chat, tables, and live activity are compact and legible. Landing surfaces breathe.
One mark everywhere
Use the new Foundable logomark consistently across product, auth, onboarding, and social previews.
Logomark
The current Foundable mark. Use the PNG asset directly; do not recreate it with CSS gradients.
140px
64px
40px
24px / Inline
Never redraw the mark as a CSS gradient or mascot face. Use the exported PNG assets so the logo stays crisp, consistent, and recognizable everywhere.
Color: Dusk
Brand accent, a monochrome near-black (near-white in dark), used for links, active states, focus rings, and brand moments. Product actions use the action palette below.
| Token | Light | Dark | Preview | Usage |
|---|---|---|---|---|
| dusk | #14140F | #F4F5F6 | Brand accent (monochrome), links, focus states | |
| dusk-soft | #E8E8E4 | #2A2F3D | Tinted backgrounds, active nav | |
| dusk-hover | #000000 | #FFFFFF | Accent hover | |
| dusk-deep | #000000 | #D7D9DE | Gradient bottom, pressed | |
| dusk-lift | #3A3A34 | #FFFFFF | Legacy action lift |
Color: Actions
Filled product actions use the action palette, distinct from the dusk accent. Keep this palette for save, publish, install, invite, and other primary buttons.
| Token | Light | Dark | Preview | Usage |
|---|---|---|---|---|
| action-primary | #14140F | #F4F5F6 | Primary product actions | |
| action-primary-hover | #000000 | #FFFFFF | Primary action hover | |
| action-primary-lift | #3A3A34 | #D7D9DE | Primary action lift |
Surfaces
The carrier for 90% of the UI. Cool off-whites in light mode, near-blacks in dark.
| Token | Light | Dark | Preview | Usage |
|---|---|---|---|---|
| canvas | #FAFAFB | #0B0C0F | Page background | |
| surface | #FFFFFF | #14161C | Cards, modals, panels | |
| surface-raised | #F3F4F7 | #1C1F28 | Elevated surfaces, inputs |
Text
Three tiers of text color for hierarchy.
| Token | Light | Dark | Preview | Usage |
|---|---|---|---|---|
| ink | #181A22 | #ECEDF0 | Primary text, headings | |
| ink-secondary | #676A76 | #9EA2AE | Descriptions, captions | |
| ink-tertiary | #9598A3 | #6A6D78 | Placeholders, hints |
Semantic
Status colors are deliberately quiet. Never use raw CSS red or green.
| Token | Light | Dark | Preview | Usage |
|---|---|---|---|---|
| success | #2D7A4F | #4ADE80 | Completed, healthy | |
| caution | #B8860B | #FACC15 | Warnings, approval needed | |
| danger | #B8372A | #F87171 | Failed, destructive | |
| info | #3B5BA7 | #7E9CDD | System note, neutral |
Tint Palette
9 hues for badges, status pills, category tags. Each has a bg + ink pair.
Data Visualization
Six-color categorical set for charts on Dusk surfaces.
Typography
One shipped sans for the app and one shipped mono for technical text.
Type Scale
Components
The minimum set. Buttons, inputs, badges, chips, cards.
Buttons
Input
Badges
Card
Project: Automate invoicing
Ted is building a workflow to auto-generate and send invoices through QuickBooks.
Toast
Callout
Space & Radii
Everything rests on a 4px grid. Minimum body text: 13px.