DevLog

DevLog mockup preview
Click to expand

Technical, monospaced, terminal-inspired design system for developer blogs and technical writing platforms with a dark-mode aesthetic.

#4ADE80#4ADE80
#FBBF24#FBBF24
#22D3EE#22D3EE
#0F172A#0F172A
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Brand Palette

Surface Palette

Content Palette

Border Palette

Semantic Colors

Typography

DisplayJetBrains Mono · 36px · Bold

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

HeadlineJetBrains Mono · 28px · Bold

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

SubheadJetBrains Mono · 20px · SemiBold

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

Body LargeInter · 18px · Regular

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

BodyInter · 16px · Regular

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

Body SmallInter · 14px · Regular

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

CaptionInter · 12px · Medium

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

OverlineJetBrains Mono · 11px · SemiBold

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

CodeJetBrains Mono · 14px · Regular

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

Spacing

Base: 8px
8px
16px
32px
48px
64px
96px

Technical, monospaced, terminal-inspired design system for developer blogs and technical writing platforms with a dark-mode aesthetic.

Components

Buttons

Cards

Card Title

Sample body text for the card component.

Card Title

Sample body text for the card component.

Card Title

Sample body text for the card component.

Inputs

Please enter a valid email

Chips

defaultselectedsuccesswarningerror

Elevation & Depth

Subtle
Medium
Large
Overlay

Do's & Don'ts

Do

Use JetBrains Mono for all headings and code — consistency with the terminal aesthetic is key.
Give code blocks generous padding (24px) and distinguish them clearly with #1E293B backgrounds.
Use the green glow sparingly — reserve it for hover, focus, and active states only.
Ensure all text meets WCAG AA contrast against #0F172A (minimum 4.5:1 for body).
Provide a visible focus ring on all interactive elements using the green glow for keyboard navigation.

Don't

Never invert the dark navy-black #0F172A foundation.
Mix Amber and Cyan accents in the same component — one accent per element.
Use heavy box shadows — glow effects should be subtle and atmospheric, not prominent.
Download .md

License MIT
Uploaded yesterday
Version v1
File size 10.6 KB
Downloads 0

Use with MCP

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

Don't have the MCP? Install it here