flowmanceAppify Design System
Appify is a bright, cheerful landing page for a mobile app. The page is white with near-white (#F9F9FB) bands, the type is almost all Inter 600 with slightly tight tracking, and a single warm sandy orange (#F4A261) on peach (#FFEEE1) does the highlighting. Phone mockups with chat bubbles and cut-out avatars sit on large orange-to-coral gradient circles.
Four signatures make it recognisable:
- Floating black pill nav. A fixed #111111 capsule, max 850px wide and centred, with white links and a peach Download App pill inside it. It stays on top of everything as you scroll.
- Peach and orange pairs. The peach buttons, icon circles and pricing circles share one recipe: #FFEEE1 fill with #F4A261 text or line icon.
- Phone on a gradient circle. The hero phone mockup is cut off at the bottom and stands in front of a large circle filled linear-gradient(56deg, #F4A261, #F46264), with small orange squares, outline squares and rings scattered around.
- Grey two-tone statements. Some 26px statements (the messaging split card) start in dark grey #555555 and drift to a lighter grey for the second half; others stay one grey. Appify is light-only, with a black footer.
Colors
Surfaces
#FFFFFFPage background, hero, plain sections, feature and testimonial cards
#F9F9FBGrey bands (section gray), pricing cards, split cards, the email field (CSS var --white-smoke-2)
#FFFFFFWhite cards on a surface-1 band
#111111Nav capsule and footer
Ink
#F4A261Text on primary
#555555Text on secondary
#FFFFFFText on accent
#111111Headlines, card titles, the nav and footer fill (CSS var --black-3)
#2C2C2CPrices, underline links, input text (CSS var --black-2)
#555555The dark half of two-tone statements, secondary button text (CSS var --dim-grey-2)
#8F8F8FMost paragraphs, the hero lead, list items and placeholders (base p, CSS var --grey)
#2C2C2C · 30%.gray-text spans for faded words
#FFFFFFText on inverse-canvas
#FFFFFF · 70%Nav links / footer links
#FFFFFF · 60%Nav links / footer links
Action
#FFEEE1Peach pill buttons, icon circles, pricing circles (CSS vars --linen, --sandy-brown)
#FFEEE1#F5F5F7The grey View Packages pill
#F4A261Solid button hover, the Popular ribbon, decorative squares, link hover
#F46264Gradient stops: hero circle 56deg #F4A261 → #F46264; circle button 14deg #F47961 → #F4A261
#F47961Gradient stops: hero circle 56deg #F4A261 → #F46264; circle button 14deg #F47961 → #F4A261
Lines & effects
#FAE2D0Pale peach decoration rings (2px) and fills
#E1E1E1Form borders / 1px underline on text links
#C5C5C5With line: Form borders / 1px underline on text links
#3347FFA feature panel filled linear-gradient(27deg, #3347FF, #B26CF1 70%)
#B26CF1A feature panel filled linear-gradient(27deg, #3347FF, #B26CF1 70%)
Typography
Inter · display-hero
The quick brown fox jumpsHero h1 Never miss a beat with our intuitive, easy-to-use app. 67px · 600 · 0.95 · -2px
Inter · headline-lg
The quick brown fox jumpsSection titles: Packages and Features. 37px · 600 · 1.1 · -1px
Inter · title-lg
The quick brown fox jumpsBlog titles (.blog-title). 29px · 600 · 1.2
Inter · body-lg
The quick brown fox jumpsHero lead in #8F8F8F. 23px · 600 · 1.22 · -1px
Inter · label-lg
The quick brown fox jumpsNav links, the solid .button. 17px · 600 · 1.18
Inter · caption
The quick brown fox jumpsPricing notes *subscription fee, taxes additional, categories. 15px · 500 · 1.3 · -0.5px
Spacing & shape
| Purpose | Value |
|---|---|
| Container | .container max-width 1200px, centred |
| Section rhythm | padding: 100px 5% |
| Breakpoints | 991px, 767px, 479px, plus min-width steps at 768 and 1440px |
Spacing scale
| Token | Value | Preview |
|---|---|---|
hair | 7px | |
xs | 10px | |
sm | 15px | |
md | 25px | |
lg | 30px | |
xl | 50px | |
2xl | 80px | |
3xl | 100px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
band | 70px | |
hero-bottom | 80px | |
section | 100px | |
section-first-bottom | 150px | |
hero-top | 200px |
Border radius
Surfaces
How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.
Motion
| Peach pill and circle button | background-color .2s cubic-bezier(.645, .045, .355, 1); the circle's gradient angle changes from 14° to 149° |
| Solid button | Fills #F4A261 with white text on hover |
| Underline link | Text and 1px border turn #F4A261 |
| Nav links | White 70% → 90%, transition: opacity .3s |
| Footer links | White 60% → 100%, transition: all .3s |
| Social icons | Opacity to 0.7 on hover |
Do’s and don’ts
- Keep the page white and #F9F9FB, with #111111 headlines and #8F8F8F paragraphs, mostly in Inter 600.
- Use the floating black capsule nav (#111111, 100px radius, max 850px) on every page.
- Pair #FFEEE1 with #F4A261 for buttons, 100px icon circles and 120px pricing circles.
- Put phone mockups on large 56deg #F4A261 → #F46264 gradient circles and scatter small orange squares and rings around them.
- Use 12px radius cards with about 40px padding and 25px grid gaps.
- Write intro statements as two-tone 26px sentences starting in #555555.
- Use #F4A261 on #FFEEE1 (about 1.8:1) or white on #F4A261 (about 2.1:1) for anything but short 16px+ weight-600 button labels and the ribbon; this is the template's real pairing, so keep labels short and bold.
- Use #8F8F8F for text below 15px or lighter than weight 500; it measures about 3.2:1 on white and only works because the paragraphs are semibold.
- Use Satoshi or any second family.
- Add drop shadows to cards; depth comes from the white/#F9F9FB step.
- Use the blue-purple gradient for anything other than one feature panel.
- Square off buttons or fields; every control is a pill.
Example prompt
Any page in the Appify style
More design systems like this
Tech design systems, the same colors first.
Bring any of them to your AI tool
All Access unlocks all 398 design systems, ready for Claude, ChatGPT, Gemini, Cursor, v0 and Lovable, plus 400+ templates on all 5 platforms.
Get All AccessUpgrade to All AccessHow to use the Appify design system
Pick a file to see what it’s for and where it goes.
What it is
The whole design system in one markdown file, written for AI: every color, type style, spacing value, component and motion rule, plus do's, don'ts and a ready prompt.
Best for
Claude, ChatGPT, Gemini, Cursor and v0, or any other AI tool that builds pages or code.
How to use it
- Put
DESIGN.mdin your project and mention it in your request, or save it as.cursor/rules/appify.mdc - For the rule file, start it with a front-matter block that sets
alwaysApply: true, so every chat uses it - Ask: “Build a pricing page using DESIGN.md.” Cursor follows the colors, fonts, spacing and rules
- Put
DESIGN.mdin the project root - Add one line to
CLAUDE.md: “Follow DESIGN.md for all UI.” - Ask for any page or component; Claude reads the file first
- Attach
DESIGN.mdto the chat (or paste it in) - Ask: “Build a landing page in this design system.”
- Keep the file in the chat or project knowledge, so follow-up pages stay on style
What it is
Every token as data, in the W3C Design Tokens format: colors with their roles, type styles, radius, spacing, and component tokens that point at them.
Best for
Figma (Tokens Studio), Style Dictionary and other design-token tools, and build scripts.
How to use it
- In Figma, open Tokens Studio, choose Import, and pick
tokens.json - Or point Style Dictionary’s
sourceat it to generate tokens for any platform - In code, import it like any JSON file
What it is
A Tailwind CSS v4 theme: every color, font, type style, radius and spacing value becomes a Tailwind utility, like bg-canvas, text-headline-lg or rounded-md.
Best for
Tailwind v4 projects, and AI builders that write Tailwind (v0, Lovable, Bolt).
How to use it
- Save
theme.cssnext to your main CSS file - Import it after Tailwind:
@import "tailwindcss"; @import "./theme.css"; - Use the classes:
bg-canvas text-ink rounded-md p-lg
What it is
The same tokens as plain CSS variables on :root. Component values point at the color variables, so changing one color updates everything that uses it.
Best for
Any website: plain CSS, Webflow custom code, Framer, WordPress.
How to use it
- Add it to your stylesheet, or in Webflow paste it into Site settings → Custom code inside a
<style>tag - Use the variables anywhere:
color: var(--color-ink) - Change a token once and every place that uses it follows