Articulate Digital Design SystemDESIGN.md alpha

A minimal editorial system for a solo product studio that sells websites, apps and a $99 website scan. The voice is declarative and structural. The surface should read like a well set document, not like a template.

primary{colors.primary-900}
accent-50#F5F0EB
primary-50#F8F8F8
primary-75#ffffff
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

displayDM Serif Display · 144px · Regular

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

h1-lgDM Serif Display · 100px · Regular

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

h1DM Serif Display · 92px · Regular

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

h1-smDM Serif Display · 84px · Regular

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

slabDM Serif Display · 80px · Regular

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

slab-smDM Serif Display · 64px · Regular

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

h2-lgDM Serif Display · 48px · Regular

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

h2DM Serif Display · 36px · Regular

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

h3DM Serif Display · 30px · Regular

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

h3-smDM Serif Display · 26px · Regular

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

editorial-statDM Serif Display · 60px · Regular

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

body-mdBarlow · 16px · Light

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

nav-linkBarlow · 14px · Light

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

button-labelBarlow · 16px · Medium

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

label-capsBarlow Condensed · 14px · SemiBold

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

label-caps-smBarlow Condensed · 12px · SemiBold

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

Corner Radius

0.5rem
0.75rem
9999px

Spacing

Base: 64px
64px
120px
280px

A minimal editorial system for a solo product studio that sells websites, apps and a $99 website scan. The voice is declarative and structural. The surface should read like a well set document, not like a template.

Components

Buttons

Cards

Card Title

Sample body text for the card component.

rule

default

default

default

hover

default

default

default

default

default

hover

default

default

default

secondary

muted

accent

Do's & Don'ts

Do

Let the type scale carry hierarchy.
Use the accent for the single most important action on a screen.
Use accent-400 for accents on dark slabs.
Keep primary-muted inside dark slabs.
Keep form inputs square.
Assert every contrast ratio in a test that reads the token file.

Don't

Reach for a shadow, a fill or a radius to separate two things.
Use the accent decoratively.
Use accent-500 on primary-900 as it measures 3.86 and fails.
Use primary-muted on white as it measures 3.58 and fails.
Add a corner radius to inputs, selects or textareas.
Combine a bold or black weight with the serif family.
Use primary-400 for text on white as it measures 2.78 and is decorative only.
Create icons as decoration in feature grids. List markers are 1px rules.
Write inline grid template styles.
Add a second skip link.
Add decorative large serif step numbers.
Assert contrast ratios from this document.
Use a sans utility as the theme never overrides the default font stack.
Download .md
rebirthofcode rebirthofcode @rebirthofcode
License CC-BY
Uploaded 2 weeks ago
Version v1
File size 22.5 KB
Downloads 20
Copies 3
Inspired by Source
accessible editorial minimal serif tailwind

Use with MCP

Using designmd mcp, download the design system https://designmd.ai/rebirthofcode/articulate-digital and implement it in my code

Don't have the MCP? Install it here