GBrosss

GBrosss mockup preview
Click to expand

An editorial precision interface for a community platform where developers discover, share, and download design system files. The aesthetic is quietly confident — bold display typography, generous spacing, and gallery-frame card surfaces. The mood is professional and modern without being sterile. High information density balanced by breathing room.

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 · Medium

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.

overlineJetBrains Mono · 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. The aesthetic is quietly confident — bold display typography, generous spacing, and gallery-frame card surfaces. The mood is professional and modern without being sterile. High information density balanced by breathing room.

Components

Buttons

Cards

Card Title

Sample body text for the card component.

Inputs

Please enter a valid email

Chips

tagstatus-publishedstatus-pendingstatus-rejected

List Item

default

hover

Toggle Switch

unchecked

checked

NavBar

default

hover

SearchBar

default

Elevation & Depth

Card Hover
Button Hover
Dropdown Shadow
Focus Ring

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

Don't use pure black (#000000) or pure white (#FFFFFF) for text — use the defined palette values.
Don't add decorative gradients or illustrations — the interactive dot grid is the only decorative element.
Don't use shadows on static elements — reserve elevation for hover and focus states.
Don't use more than two font weights on a single screen.
Don't place more than one primary (filled indigo) button in the same view section.
Download .md
Chef Chef @chef
License CC-BY
Uploaded today
Version v1
File size 5.7 KB
Downloads 0
component-library dark design-tokens open-source saas

Use with MCP

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

Don't have the MCP? Install it here