A serverless compute platform for AI and data workloads. Fits AI infra SaaS, GPU-platform tools, dev-platform products, and ML-infra landing page designs.
Design tokens
35 colors · 13 type stylesLight gray (#e3e5e1) primary on a near-black (#040804) canvas, set in ABC Diatype throughout. The highlights below are read from the Modal DESIGN.md in the Pass bundle, which carries all 35 color tokens, 13 type styles and the full component rules.
Colors
- Primarylight gray
#e3e5e1 - Secondarydeep green
#124f11 - Canvasnear-black
#040804 - Surfacenear-black
#131412 - Inklight gray
#e3e5e1
Type
- ABC DiatypeDisplayweights 400, 500, 700, 37 to 44px
- ABC DiatypeBodyweights 400, 500, 700, 13 to 16px
- DM MonoMonoweight 400, 12px
Radius
- none 0px
- xs 3px
- sm 4px
- md 7px
- lg 10px
- pill 48px
Spacing
- xxs 2px
- xs 4px
- tight 6px
- sm 8px
- md 12px
- base 16px
- lg 20px
- xl 24px
- xxl 32px
- block 48px
Components
- Primary button
button-primaryPrimary buttons fill with light gray (#e3e5e1) and carry near-black (#10120f) text, set in ABC Diatype 14px at weight 500, with pill corners (48px) and 6px 16px padding.
- Card
feature-cardCards sit on near-black (#1a1c19), with 10px corners and 16px padding.
- Navigation
nav-barThe top navigation runs on near-black (#040804) with mid gray (#a8aba6) links, set in ABC Diatype 14px at weight 400, in a 64px bar.
Three ways to ship a Modal-style UI.
Use in your AI builder, no-code tool, or CMS
Paste the DESIGN.md in and ask the tool to restyle your existing site to match this design, or start a brand new one from scratch with the same visual language.
Not affiliated with Modal. All trademarks belong to their respective owners.
