Gradient Story

Gradient Story is a vibrant, visual-first design system inspired by the warmth and energy of photo-sharing culture. It embraces bold gradient accents that flow from deep purple through hot pink to sunset orange, creating an atmosphere of creativity, self-expression, and connection. Every element is designed to recede behind visual content, letting images and stories take center stage.

Primary#E1306C
Secondary#833AB4
Neutral#8E8E8E
Background#FFFFFF
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

captionPlus Jakarta Sans · 12px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

bodyPlus Jakarta Sans · 14px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

subtitlePlus Jakarta Sans · 16px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

titlePlus Jakarta Sans · 20px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

section headingPlus Jakarta Sans · 24px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

page headingPlus Jakarta Sans · 32px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

usernamePlus Jakarta Sans · 14px · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

interactive labelPlus Jakarta Sans · 14px · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Spacing

Base: 4px

Gradient Story is a vibrant, visual-first design system inspired by the warmth and energy of photo-sharing culture. It embraces bold gradient accents that flow from deep purple through hot pink to sunset orange, creating an atmosphere of creativity, self-expression, and connection. Every element is designed to recede behind visual content, letting images and stories take center stage.

Components

Buttons

Cards

Card Title

Sample body text for the card component.

Inputs

Chips

Story HighlightCategory

Checkbox

Unchecked

Elevation & Depth

Primary
Dropdown

Do's & Don'ts

Do

use the gradient sparingly — reserve it for story rings, primary CTAs, and brand moments
keep the interface minimal so visual content remains the hero
maintain square or 4:5 aspect ratios for content images
use circular avatars consistently at 32px (feed), 44px (lists), 56px (stories), and 150px (profile)
animate interactions subtly — heart pop, double-tap burst, smooth transitions under 300ms

Don't

use heavy drop shadows; prefer flat design with subtle borders
use more than two font weights in a single component
place text over images without a proper gradient scrim overlay
introduce new colors outside the defined palette; the gradient is the only decoration needed
Download .md
Chef Chef @chef
License MIT
Uploaded 1 months ago
Version v1
File size 6.5 KB
Downloads 28
Copies 0
mobile-app social vibrant warm

Use with MCP

Using designmd mcp, download the design system https://designmd.ai/chef/gradient-story and implement it in my code

Don't have the MCP? Install it here