Create challenges, compete with friends, and track your progress in this award-winning app.
Design tokens
9 colors · 10 type stylesVivid yellow (#ffd939) primary on a near-black (#1e1e1e) canvas, set in Lastik for headlines and DM Sans for body text. The highlights below are read from the Moti DESIGN.md in the Pass bundle, which carries all 9 color tokens, 10 type styles and the full component rules.
Colors
- Primaryvivid yellow
#ffd939 - Secondaryvivid violet
#c879f2 - Canvasnear-black
#1e1e1e - Surfacegraphite
#313131 - Inkoff-white
#f3f3f3
Type
- LastikDisplayweights 700, 900, 52 to 280px
- DM SansBodyweights 300, 500, 700, 16px
Radius
- none 0px
- sm 8px
- md 14px
- lg 24px
- full 9999px
Spacing
- xxs 5px
- xs 10px
- sm 12px
- base 16px
- md 20px
- lg 24px
- xl 32px
- xxl 40px
- xxxl 48px
- huge 96px
Components
- Card
photo-cardCards sit on graphite (#313131), with 24px corners.
- Navigation
sticky-app-barThe top navigation runs on graphite (#313131) with vivid yellow (#ffd939) links, set in DM Sans 16px at weight 300, in a 60px bar.
- Hero
hero-bandThe hero band opens on vivid yellow (#ffd939) with near-black (#1e1e1e) type, headlines in Moti 52px at weight 700.
Three ways to ship a Moti-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 Moti. All trademarks belong to their respective owners.
Related designs
