Create

Persimmon

Warm persimmon pop: colour-blocked rounded cards, giant squishy verbs, a bottom dock.

For consumer apps, payments, social, games.

Use this lookLive page
Fig. 05 · Persimmon, top of the sample page
Persimmon look, top of the sample page
Palettes
Persimmon, Cherry, Tangerine, Grape
Type
Bricolage Grotesque, DM Mono
Motion
Bouncy
Mode
Light
01IdeaSheet 01/07

Warm consumer optimism: a persimmon field, soft rounded shapes and bouncy, squishy motion.

Why

Friendly consumer pages tend to default to cool lavender. Persimmon owns warm, and turns its steps into giant verbs that squash and stretch across the screen.

Hero

The whole hero is a solid persimmon field. A two-line headline sits bottom-left, rounded buttons bottom-right, and a floating dock nav at the bottom centre.

02PaletteSheet 02/07

4 palettes, one accent at a time.

Pick a palette or an accent: this page switches to it. Click a color to copy it.

Text on background16.1:1AAA
Muted on background7.8:1AAA
Label on accent5.0:1AA

Swap the accent

Every kit can take one of these accents. The page above follows your pick.

03TypeSheet 03/07

3 faces, each with one job.

Specimen · hero headline

Live price comparison of AI API credits.

A live comparison site for AI API credits.

01 Display

Bricolage Grotesque

02 Text

Bricolage Grotesque

03 Accent

DM Mono

04CompositionSheet 04/07

Verb Sequence

The three steps become full-screen moments, one verb each, like Pick, Tap, Done. Each pairs a coloured rounded icon with a huge word in its own colour.

  1. 01Hero: full persimmon field, headline bottom-left
  2. 02Floating dock nav at the bottom
  3. 03Steps as three full-screen verbs
  4. 04Colour-blocked rounded feature cards
  5. 05Token as a friendly stat with a receipt line
  6. 06FAQ
  7. 07Closing statement
Persimmon look: the whole desktop page
Persimmon look: the whole phone page
05MotionSheet 05/07

Bouncy: springs, overshoot and a squish on press.

Signature

Verb Sequence

The three steps become full-screen moments, one verb each, like Pick, Tap, Done. Each pairs a coloured rounded icon with a huge word in its own colour.

Moment

Verb Squish

As each verb gives way, it squashes flat while the next springs up and thickens from light to heavy. The background changes colour with every step.

  • 01Words squash out in 0.25s and spring back in over 0.9s.
  • 02Buttons shrink slightly when pressed and bounce back on release.
  • 03Cards lift 6px and tilt by one degree on hover.
  • 04The dock's active blob slides between items with an elastic 0.7s move.
  • 05The scroll hint bobs gently inside a small pill.

Built with

  • Smooth scroll
  • Scroll reveals
  • Magnetic buttons

No intro: the page is there at once. Under reduced motion, everything lands in place.

06DetailsSheet 06/07

The small parts.

Dock
64px tall, radius 30, ink fill, four 48px items with a sliding persimmon blob on the active one
Buttons
Radius 999, 56px, ink with white text, or white with ink text on accent; a squish on press
Cards
Radius 32, solid peach, green or accent fills; hover lifts 6px and tilts 1 degree
Cursor
Native
Radii
32 cards, 30 dock, 999 buttons, 20 icon squares
Grain
None; flat colour
Spacing
24px between cards
Type
Bricolage Grotesque at 800 for display and 400 for text, DM Mono labels
07WordingSheet 07/07

[Thing] that [does it] for you. Or: [Verb] it. [Verb] it. Done. Two lines, max 8 words, second person.

Tone: warm, upbeat, everyday words.

Button verbs

  • Get
  • Try
  • Start
  • Join

Lowercase mono chips like new, how, token and help; section titles are short friendly statements, never questions or exclamations.

Token

The token stat reads like a tap-to-pay receipt, 1 tap · $TICKER, next to the buy button, with a green check that pops in 0.4s and no speed claim.

Start with Persimmon.

Use this look
Next lookNo. 06Zine