Foray design system
From the Foray template.
Included with Everything
Colour
Type
- Schibsted Groteskdisplay · 400, 500, 600, 700, 800 · SIL Open Font License 1.1
- Display107 / 48px · 800Four steps. You own the third.
- H281 / 40px · 800The hire that starts on Monday.
- H326 / 26px · 800Small teams. Full calendars.
- Lead16 / 16px · 400Foray researches every account, writes one email and books the meeting.
- Body16 / 17px · 400Nothing sends until you say yes.
- Small14 / 14px · 400A Swiss-style website template for an AI SDR where every email waits for a person to approve it.
- Eyebrow14 / 14px · 80001
Components
ForayProductHow it worksPricingCustomersBook a demo
Book a demo
Learn more
01
Small teams. Full calendars.
Nothing sends until you say yes.
Works where you already sell.
A Swiss-style website template for an AI SDR where every email waits for a person to approve it.
Shape and motion
- sm · 0px
- md · 0px
- lg · 0px
- out ·
cubic-bezier(.16, 1, .3, 1) - fast · 180ms
- slow · 800ms
Exports
- DESIGN.md
DESIGN.md21 KBEverything - CSS variables
tokens.css5 KBEverything - Tailwind v4
tailwind.css6 KBEverything - shadcn/ui theme
shadcn.css5 KBEverything - Figma variables
figma-variables.json26 KBEverything - Webflow variables
webflow-variables.json8 KBEverything - W3C tokens (JSON)
tokens.json16 KBEverything
Everything unlocks every format of every system in the app and through the MCP server. Ask your agent for get_design_system("foray") with the MCP server.
- Source
- Foray template
- Fonts
- Schibsted Grotesk (OFL 1.1)
- Themes
- Light and dark
- Contrast
- Text 18.63:1 · muted 6.22:1
Inside DESIGN.md
- At a glance
- Setup
- Colour
- Typography
- Layout and spacing
- Shape and depth
- Motion
- Components
- Voice and copy
- Do and don’t
- Tokens