Genesis

Genesis mockup preview
Click to expand

An editorial precision interface for a community platform where developers discover, share, and download design system files.

Primary#6366F1
Secondary#20970B
Neutral#9C9C9C
Background#FAFAFA
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

DisplayGeneral Sans · 72px · bold

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

HeadlineGeneral Sans · 60px · bold

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

Section headingGeneral Sans · 32px · bold

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

SubheadGeneral Sans · 24px · bold

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

BodyDM Sans · 15px · regular

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

SmallDM Sans · 13px · regular

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

CaptionDM Sans · 12px · regular

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

OverlineDM Sans · 11px · regular

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

Spacing

Base: 4px
4px
8px
12px
16px
20px
24px
32px
40px
48px
64px
80px
96px

An editorial precision interface for a community platform where developers discover, share, and download design system files.

Components

Buttons

Cards

Card Title

Sample body text for the card component.

Inputs

Please enter a valid email

Chips

DefaultActive

Elevation & Depth

Card
Primary Button
Focus State

Do's & Don'ts

Do

Use indigo (#6366F1) only for interactive elements — never for decoration or static text
Maintain the 4px spacing grid for all padding, margins, and gaps
Use General Sans for headings and DM Sans for body — never swap them
Keep kit cards at 12px radius and buttons/inputs at 6px — don't mix these values
Provide sufficient contrast in both light and dark modes — test both

Don't

Use pure black (#000000) or pure white (#FFFFFF) for text — use the defined palette values
Add decorative gradients or illustrations — the interactive dot grid is the only decorative element
Use shadows on static elements — reserve shadow elevation for hover and focus states
Use more than two font weights on a single screen
Place more than one primary (filled indigo) button in the same view section
Download .md
Chef Chef @chef
License MIT
Uploaded 2 days ago
Version v1
File size 5.7 KB
Downloads 2
accessible blue clean saas

Use with MCP

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

Don't have the MCP? Install it here