Gamma — design system & UI screens
Split hero pairs left-aligned heavy navy serif-ish headline "Effortless AI design for presentations, websites, and more" against a bright blue sky-and-clouds product mockup with a floating hot-air-balloon festival slide on the right. The signature element is the dreamy gradient sky motif that recurs throughout — soft pastel clouds bridging sections, a giant translucent looping "GAMMA" wordmark band, and a surreal closing illustration of a woman gazing up at floating AI-generated slides under the headline "How good ideas get into the universe." Mid-page uses a clean two-column white feature grid (Presentations, Documents, API, Social Media, Websites, Graphics) with colorful pill-badge section labels and rounded screenshot cards.
This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/website/gamma.
Decoded design system
Gamma's decoded design system: background #FFFFFF, text #0A0A0B, accent #0540AD, link #002253, primary #0858F7; type scale h1 60px / h2 96px / body 18px; 4px spacing base; 7px base radius. The single interactive/action color is #0540AD — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.
Color roles
| Role | Value |
|---|---|
| bg | #FFFFFF |
| surface | #F0F0F0 |
| border | #DADADA |
| text | #0A0A0B |
| text_muted | #676767 |
| primary | #0858F7 |
| accent | #0540AD |
| link | #002253 |
| secondary | #0540AD |
| button_bg | #0540AD |
| button_text | #FFFFFF |
Using these colors
- Action color
#0540AD— the single interactive color; only on things you click or must notice, never large fills. accent,secondary,button_bgare all#0540AD— one role, not several (the action color).- accent
#0540AD— THE accent / action color — interactive & must-notice only (buttons, links, focus, one key highlight); never large fills or backgrounds. Scarcity is what makes it read as designed. - primary
#0858F7— a brand color — but the call-to-action uses #0540AD, not this. - link
#002253— inline text links and link-styled controls.
Typography
- Heading: ES Build
- Body: PP Mori
- h1: 60px
- h2: 96px
- body: 18px
Spacing
- base unit: 4px
- scale: 2px, 4px, 6px, 8px, 12px, 16px, 24px, 32px
Radii
- base: 7px
- button: 24px
Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →
Screens
- Effortless AI design landing with sky-and-cloud hero and dual-column feature grid
- Four-tier AI pricing page with annual toggle and giant glowing wordmark footer
Sections (13)
- Hero — Split hero with cloud-sky illustration + live deck mockup
- Hero — Centered headline with Individual/Team tabs + billing toggle
- Feature — Six use-case cards on sky background (Presentations, Documents, API, Social, Websites, Graphics)
- Pricing / Plans — Four-tier pricing cards, Pro highlighted as Most popular
- Logo Wall — 'In good company' brand logo strip on clouds
- CTA / Sign-up — Contact sales bar + SOC 2 trust note
- Feature — 'Creative content at the speed of light' headline + Generate feature
- FAQ — Frequently asked questions accordion
- Feature — 'Edit with AI in just a click' with translucent editor mockup
- Feature — 'Shareworthy content, wherever you need it' with report mockup
- Testimonial / Social Proof — 'Join 50+ million users' with founder testimonial cards
- Gallery / Showcase — 'How good ideas get into the universe' surreal illustration showcase
- Footer — Giant GAMMA wordmark band + dark multi-column footer