A customer success and lifecycle platform. Fits customer-success SaaS, account-management tools, B2B-revenue apps, and CS-platform landing page designs.
Design tokens
11 colors · 11 type stylesNear-black (#121211) primary on a pure white (#ffffff) canvas, set in Geigy LL Duplex for headlines and Inter for body text. The highlights below are read from the Planhat DESIGN.md in the Pass bundle, which carries all 11 color tokens, 11 type styles and the full component rules.
Colors
- Primarynear-black
#121211 - Secondaryorange
#b27e33 - Canvaspure white
#ffffff - Surfaceoff-white
#f6f6f8 - Inknear-black
#121211
Type
- Geigy LL DuplexDisplayweight 400, 48 to 113px
- InterBodyweights 400, 500, 600, 14 to 16px
Radius
- xs 4px
- sm 6px
- md 8px
- lg 100px
- full 999px
Spacing
- xxs 2px
- xs 6px
- sm 8px
- md 12px
- lg 16px
- xl 20px
- xxl 24px
- xxxl 36px
Components
- Primary button
button-primaryPrimary buttons fill with pure white (#ffffff) and carry pure black (#000000) text, set in Inter 12px at weight 600, with 8px corners and 9px 14px padding.
- Card
feature-cardCards sit on off-white (#f6f6f8), with 6px corners and 24px padding.
- Navigation
nav-barThe top navigation runs on cool near-black (#121218) with pure white (#ffffff) links.
Three ways to ship a Planhat-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 Planhat. All trademarks belong to their respective owners.
Related designs
