Design system.
Logo, color, type, space, motion and components for Invitebase. Every value on this page is read from @invitebase/design at build time: 160 tokens, no screenshots.
Logo.
The copper mark and porcelain wordmark are light artwork for graphite and iron surfaces. Use the supplied SVGs untouched: don't retype, recolor, outline or stretch them.
Clear space
Proposed Keep a quarter of the mark's height clear on every side. Nothing else enters the dashed area.
Minimum size
Proposed The smallest sizes in use today: the mark at 26px tall, the lockup at 146px wide. Below these, use the mark alone.
Color.
Graphite ground, iron panels, porcelain text. Patina is the one signal: the primary action or an earned success. Each swatch lists its role tokens and its contrast against Porcelain and Graphite text, computed at build time.
Palette
- Graphite
Page ground, terminal surface, primary-button ink. Also <meta name="theme-color">.
Roles:
background.pagetext.on-lighttext.on-primarytext.on-steelborder.focus-on-lightaction.primary-inkaction.primary-wipeaction.solid-on-lightselection.text- Porcelain text
- 14.22:1 AA Pass Large Pass
- Graphite text
- 1.00:1 AA Fail Large Fail
- Porcelain
Primary text on dark; light product/form surface; wordmark letters.
Roles:
background.lighttext.primary- Porcelain text
- 1.00:1 AA Fail Large Fail
- Graphite text
- 14.22:1 AA Pass Large Pass
- Iron fabric
Grouping surface (hero, cards, callouts) and the default section hairline.
Roles:
background.panelborder.default- Porcelain text
- 11.74:1 AA Pass Large Pass
- Graphite text
- 1.21:1 AA Fail Large Fail
- Patina
The Signal. Primary conversion action and earned success only.
Roles:
text.successaction.primarystatus.success- Porcelain text
- 2.04:1 AA Fail Large Fail
- Graphite text
- 6.98:1 AA Pass Large Pass
- Steel support
Secondary actions, labels, interactive borders, neutral states, selection.
Roles:
background.steeltext.supportingborder.interactiveaction.secondary-borderaction.secondary-wipeaction.steelstatus.pendingselection.background- Porcelain text
- 2.80:1 AA Fail Large Fail
- Graphite text
- 5.08:1 AA Pass Large Pass
- Copper
Brand mark colour; editorial accent; meaningful intermediate state.
Roles:
text.accentaction.copperstatus.withheld- Porcelain text
- 3.08:1 AA Fail Large Pass
- Graphite text
- 4.62:1 AA Pass Large Pass
- Content muted
Readable secondary prose on dark surfaces.
Roles:
text.secondary- Porcelain text
- 1.69:1 AA Fail Large Fail
- Graphite text
- 8.43:1 AA Pass Large Pass
- Divider
Quiet separation inside iron cards and lists.
Roles:
border.divider- Porcelain text
- 5.95:1 AA Pass Large Pass
- Graphite text
- 2.39:1 AA Fail Large Fail
- White
Auth inputs and OAuth buttons on porcelain (auth.css).
Roles:
background.input- Porcelain text
- 1.09:1 AA Fail Large Fail
- Graphite text
- 15.46:1 AA Pass Large Pass
- Slate ink
Muted text inside light (porcelain) demo cards. Used in journey.css and product.css.
Roles:
text.on-light-muted- Porcelain text
- 5.61:1 AA Pass Large Pass
- Graphite text
- 2.54:1 AA Fail Large Fail
- Mist line
Hairlines inside light demo cards. Used in journey.css and product.css.
Roles:
border.on-light- Porcelain text
- 1.37:1 AA Fail Large Fail
- Graphite text
- 10.36:1 AA Pass Large Pass
- Iron hover
Hover background for linked content cards. Used in motion.css.
Roles:
background.panel-hover- Porcelain text
- 10.18:1 AA Pass Large Pass
- Graphite text
- 1.40:1 AA Fail Large Fail
- Error ink
Auth error text. Used in auth.css.
Roles:
status.error-ink- Porcelain text
- 7.94:1 AA Pass Large Pass
- Graphite text
- 1.79:1 AA Fail Large Fail
- Error edge
Auth error left border (3px). Used in auth.css.
Roles:
status.error-edge- Porcelain text
- 5.48:1 AA Pass Large Pass
- Graphite text
- 2.59:1 AA Fail Large Fail
- Error wash
Auth error background. Used in auth.css.
Roles:
status.error-wash- Porcelain text
- 1.08:1 AA Fail Large Fail
- Graphite text
- 13.12:1 AA Pass Large Pass
Text roles on their surfaces
AA needs 4.5:1 for normal text and 3:1 for large text (24px, or 18.66px bold). Pairs come from the role tokens: text.on-* on its surface, other text roles on the page and panel backgrounds. Samples are pictures of the pairing; the result is written out beside each one.
| Text role | Surface role | Sample | Ratio | AA normal | AA large |
|---|---|---|---|---|---|
text.primary | background.page | 14.22:1 | Pass | Pass | |
text.primary | background.panel | 11.74:1 | Pass | Pass | |
text.secondary | background.page | 8.43:1 | Pass | Pass | |
text.secondary | background.panel | 6.96:1 | Pass | Pass | |
text.supporting | background.page | 5.08:1 | Pass | Pass | |
text.supporting | background.panel | 4.20:1 | Fail | Pass | |
text.accent | background.page | 4.62:1 | Pass | Pass | |
text.accent | background.panel | 3.82:1 | Fail | Pass | |
text.success | background.page | 6.98:1 | Pass | Pass | |
text.success | background.panel | 5.76:1 | Pass | Pass | |
text.on-light | background.light | 14.22:1 | Pass | Pass | |
text.on-light-muted | background.light | 5.61:1 | Pass | Pass | |
text.on-primary | action.primary | 6.98:1 | Pass | Pass | |
text.on-steel | background.steel | 5.08:1 | Pass | Pass | |
text.on-steel | action.steel | 5.08:1 | Pass | Pass | |
status.error-ink | status.error-wash | 7.33:1 | Pass | Pass |
Typography.
PP Editorial New for headlines, PP Neue Montreal for explanation, prices and emphasis, and one mono treatment for labels and buttons. Every specimen below is set from its token. PP Neue Montreal and PP Editorial New are licensed Pangram Pangram fonts; the docs and dashboard use PP Neue Montreal only, never Editorial New.
Families
- PP Neue Montreal
- Token
marketing.font.sans- Stack
'PP Neue Montreal', 'PP Neue Montreal Fallback', 'PP Neue Montreal Fallback Android', ui-sans-serif, system-ui, sans-serif- Weights
- 400, 500, 600, 700
- Axes
- —
- Used by
- heading, subsection, card-title, lede, body, prose, body-sm, supporting, price, emphasis
- PP Editorial New
- Token
marketing.font.display- Stack
'PP Editorial New', 'PP Editorial New Fallback', 'PP Editorial New Fallback Android', Georgia, serif- Weights
- 400
- Axes
- —
- Used by
- hero, display, page-title, h2, h3
- JetBrains Mono
- Token
marketing.font.mono- Stack
'JetBrains Mono', ui-monospace, monospace- Weights
- 700
- Axes
- —
- Used by
- mono, label, eyebrow, nav, button, legal, code
Type roles
-
Referrals, verified.
-
Referrals, verified.
-
Referrals, verified.
-
Referrals, verified.
-
Referrals, verified.
-
Rewards land only when a referral qualifies.
-
Rewards land only when a referral qualifies.
-
Rewards land only when a referral qualifies.
-
Rewards land only when a referral qualifies.
-
Rewards land only when a referral qualifies.
-
Rewards land only when a referral qualifies.
-
Rewards land only when a referral qualifies.
-
Rewards land only when a referral qualifies.
-
Rewards land only when a referral qualifies.
-
Rewards land only when a referral qualifies.
-
Payout queued
-
Payout queued
-
Payout queued
-
Payout queued
-
Payout queued
-
Payout queued
-
Payout queued
Size scale
- 10px
- 11px
- 12px
- 13px
- 14px
- 13px
- clamp(15px, 14.63px + 0.095vw, 16px)
- clamp(16px, 14.89px + 0.286vw, 19px)
- clamp(18px, 16.51px + 0.381vw, 22px)
- clamp(26px, 22.66px + 0.857vw, 35px)
- clamp(29px, 24.91px + 1.048vw, 40px)
- clamp(30px, 23.31px + 1.714vw, 48px)
- clamp(40px, 28.49px + 2.952vw, 71px)
- clamp(60px, 51.09px + 2.286vw, 84px)
- clamp(48px, 31.66px + 4.190vw, 92px)
- clamp(56px, 32.23px + 6.095vw, 120px)
- clamp(68px, min(8.333vw, 13svh), 180px)
Weights
- 400
- 500
- 600
- 700
Spacing & radius.
Every region sits in a 1px section box, 8px apart, with 3px corners. Controls are square. The only shadows are the two below.
Spacing
Sizes
Radius
- 3px
- 0px
Borders
- 1px
- 2px
- 3px
Shadows
0px 12px 28px 0px rgb(0 0 0 / 0.24)0px 12px 30px 0px rgb(32 37 41 / 0.1)
Breakpoints
- 600px
- 700px
- 800px
- 1200px
- 1440px
- 375px
- 430px
- 768px
- 1024px
- 1280px
Motion.
Motion confirms an action or reveals content; it never carries meaning on its own. Every animation has a reduced-motion equivalent.
Each dot travels for 850ms (marketing.motion.duration.entrance) on its own curve. Your system asks for reduced motion, so the dots jump to the end.
- wipe
- CSS
cubic-bezier(0.76, 0, 0.24, 1)
Button wipe (motion.css).
- gsap-out
- CSS
cubic-bezier(0.25, 1, 0.5, 1)- GSAP
power3.out
Entrances and reveals. GSAP uses the named ease power3.out ($extensions.invitebase.gsap); the value is its standard cubic-bezier equivalent (easeOutQuart) for CSS.
- gsap-in-out
- CSS
cubic-bezier(0.76, 0, 0.24, 1)- GSAP
power3.inOut
Scripted button wipe (0.48s). GSAP uses the named ease power3.inOut ($extensions.invitebase.gsap); the value is its standard cubic-bezier equivalent (easeInOutQuart), the same curve as the CSS wipe.
Durations
Other motion tokens
- 0.12
Components.
The site's own components in each state. Each state grid is a static picture: it is inert, so it doesn't trap keyboard focus. Use the live example under each grid to try the real thing. States the system doesn't define are marked as not defined.
Buttons
MotionLink: a square mono label with a wipe and a cap-height arrow. primary is the one patina action per view; secondary is the outline treatment.
That didn't send. Try again.
That didn't send. Try again.
Inputs
Native fields on a light surface, as on sign-in and sign-up: square, steel border, graphite focus ring.
Enter a full email address.
Cards
Linked content cards on iron with a divider border. On hover they lift 4px onto iron-hover.
Badges
Status badges from the product demos. They aren't interactive, so hover, focus, active and disabled don't apply.
Navigation
The compact grid header: mono labels in framed cells, iron fill on hover, and dropdown triggers that gain an underline while their menu is open. The footer below is the other navigation pattern, live on this page.
Panels
Section boxes frame every region. Iron panels group content. The error panel is the only error surface in the system.
Graphite, 1px iron border, 3px corners.
Iron fill with a divider border for heroes, cards and callouts.
Error panel: error ink on error wash with a 3px error edge.
Do's & don'ts.
Short rules that keep pages consistent. The contrast numbers here are computed from the tokens, so they update when the palette does.
Do
- Put every region in a 1px iron section box, 8px apart, with 3px corners.
- Use one patina element per view: the primary action or an earned success.
- Put Graphite text on Patina fills (6.98:1).
- Put Graphite text on Steel support fills (5.08:1).
- Put Graphite text on Copper fills (4.62:1).
- Use content-muted for small secondary text on iron.
- Write mono labels in uppercase and pair them with the cap-height arrow.
- Keep controls at least 44px tall and let button groups wrap.
- Give every animation a reduced-motion equivalent.
Don't
- Don't put Porcelain text on Patina: 2.04:1 fails AA at any size.
- Don't put Porcelain text on Steel support: 2.80:1 fails AA at any size.
- Don't put Porcelain text on Copper: 3.08:1 fails AA for normal text.
- Don't set body-size Steel support text on Iron fabric (
text.supportingonbackground.panel): 4.20:1. It passes for large text only. - Don't set body-size Copper text on Iron fabric (
text.accentonbackground.panel): 3.82:1. It passes for large text only. - Don't add gradients, glows or shadows beyond the shadow tokens.
- Don't round buttons or inputs, or use pill shapes.
- Don't use patina for decoration, idle states or tabs.
- Copper is reserved for sign-up and sales CTAs (header SIGN UP, Enterprise). Don't use it for general actions, and don't put it in a button group next to the patina primary.
- Don't recolor, retype or stretch the logo.