DESIGN.md · Analysis

getdesign.md

getdesign.md · 27 Oct 2026 · 47 colors · Geist, Geist Mono

getdesign.md

A dark, developer-tool catalogue that collects independent DESIGN.md design-system analyses for AI coding agents. Warm amber CTAs on a near-black canvas, pixel-mono wordmark, Geist type.

Colors

surface#161618

surface-dim#111113

surface-bright#232327

surface-container-lowest#0f0f10

surface-container-low#1b1b1e

surface-container#1d1d20

surface-container-high#26262a

surface-container-highest#2b2b30

on-surface#ececee

on-surface-variant#a0a0a8

inverse-surface#ececee

inverse-on-surface#161618

outline#4d4d55

outline-variant#303036

surface-tint#f5a623

primary#f5a623

on-primary#161618

primary-container#ffd27a

on-primary-container#1a1206

inverse-primary#b87a0c

secondary#ffb1ee

on-secondary#2d0f29

secondary-container#4a2a44

on-secondary-container#ffd9f5

tertiary#c7ff00

on-tertiary#161618

tertiary-container#2a3a05

on-tertiary-container#e6ffa3

error#f87171

on-error#2a0606

error-container#4a1414

on-error-container#fecaca

primary-fixed#ffd27a

primary-fixed-dim#f5a623

on-primary-fixed#1a1206

on-primary-fixed-variant#4a3008

secondary-fixed#ffd9f5

secondary-fixed-dim#ffb1ee

on-secondary-fixed#2d0f29

on-secondary-fixed-variant#5a2a52

tertiary-fixed#e6ffa3

tertiary-fixed-dim#c7ff00

on-tertiary-fixed#161618

on-tertiary-fixed-variant#2a3a05

background#161618

on-background#ececee

surface-variant#26262a

Typography

display: fontFamily: Geist · fontSize: 40px · fontWeight: 600 · lineHeight: 44.8px · letterSpacing: -1.4px
headline-lg: fontFamily: Geist · fontSize: 30px · fontWeight: 600 · lineHeight: 36px · letterSpacing: -0.025em
headline-md: fontFamily: Geist · fontSize: 24px · fontWeight: 600 · lineHeight: 30px · letterSpacing: -0.02em
title-lg: fontFamily: Geist · fontSize: 18px · fontWeight: 600 · lineHeight: 24px
body-lg: fontFamily: Geist · fontSize: 18px · fontWeight: 400 · lineHeight: 29px
body-md: fontFamily: Geist · fontSize: 16px · fontWeight: 400 · lineHeight: 24px
label-md: fontFamily: Geist · fontSize: 13px · fontWeight: 500 · lineHeight: 18.2px
label-sm: fontFamily: Geist Mono · fontSize: 10.5px · fontWeight: 400 · lineHeight: 14px · letterSpacing: 0.1em

Design guidance

Overview

getdesign.md is a browsable library of independent design-system analyses, each packaged as a DESIGN.md file that a coding agent can read as a reference. The product sits between a developer reference tool and a catalogue: it is dense, utilitarian and oriented toward fast scanning of 550+ entries. The aesthetic is Developer-Dark Utilitarianism: a near-black canvas (#161618) with layered panels (#1d1d20, #232327) separated by 1px borders (#303036) rather than shadow, letting the content and the single warm accent carry the visual weight.

The voice is direct, technical and instructive. Headlines are imperative or declarative ("Give AI-built websites a real design with DESIGN.md"), body copy explains the mechanism in plain sentences, and labels are terse nouns ("Website catalog", "Catalog Pass"). Example sentence: "Pick a DESIGN.md from a real site and hand it to your AI coder."

Colors

Primary (#f5a623, amber) is the signature accent. It fills the highest-priority CTAs ("Request a DESIGN.md" at 13px/500 on 4px radius, and the hero "Website Starter Kit" card) and the GitHub star icon, with on-primary #161618 text for maximum contrast. Secondary (#ffb1ee, pink) is the brand-highlight accent used for the "DESIGN.md" word in the hero headline and focus rings (box-shadow 0 0 0 3px #ffb1ee1f). Tertiary (#c7ff00, acid lime) is reserved for the EveryFeed sponsor band and inline status signals.

Surface stacking: canvas #161618 (surface), sidebar and header #1b1b1e, cards #1d1d20 (surface-container), hover lift to #26262a (surface-container-high). Text is #ececee on-surface, muted copy #a0a0a8 on-surface-variant, and rules use #303036 outline-variant. Never use the amber for body

Typography

The system uses Geist for UI and display, Geist Mono for metadata, eyebrow labels and counters ("550+", "CREATIVE ASSETS" at 10.5px with 0.1em tracking), and a pixel display face (GeistPixel-Square) for the wordmark only. The H1 is 40px/600 with -1.4px (-0.035em) tracking and 44.8px line-height, producing a tight, editorial headline. Body runs 16px/24px at weight 400; sub-labels use 13px/500. Apply font-feature-settings "ss01" only on display sizes; keep tracking at normal below 16px.

Layout

The layout is a fixed 248px left sidebar plus a fluid main column, with a 68px sticky header. Content is capped at 1120px on desktop and the page uses a 12-column grid at lg (64rem) and up. Gutter is 24px; page margin is 16px on mobile and 24px at sm (40rem). Section separation uses the xl spacing token (24px) with 1px outline-variant rules, and the spacing scale is 4px-based (spacing-1 through spacing-16) with lg (16px) as the default card-to-card gap.

Elevation & Depth

Depth is conveyed almost entirely by tonal layering and 1px borders, not shadows. Level 0: canvas #161618. Level 1: sidebar/header #1b1b1e with border-right 1px solid #303036. Level 2: cards #1d1d20 with 1px #303036 border and hover to #26262a. Level 3 (popovers and focus): 0 0 0 3px rgba(255,177,238,0.12) focus ring in accent pink. Where shadow is needed, use 0 4px 6px -1px rgba(0,0,0,0.10), 0 2px 4px -2px rgba(0,0,0,0.10).

Shapes

Shape language is Tight Technical: small radii that read as precise instruments. Buttons and inputs use 4px (rounded.sm), cards use 8px (rounded.lg), and the only fully round elements are pills and avatar dots at 9999px. The 4px radius on CTAs keeps the amber fill looking like a tool button, not a consumer pill. Icon buttons use 8px (rounded.lg) at 32px square.

Components

Action Elements Primary buttons are 36px tall, padding 10px 16px, 13px/500 label, background #f5a623, text #161618, radius 4px. Hover drops opacity to 0.9 over 150ms cubic-bezier(0.4,0,0.2,1) (default transition). Secondary buttons are transparent with a 1px #4d4d55 border, 6px 12px padding, and fill to #26262a on hover.

Containers & Surfaces Cards use #1d1d20 with 1px solid #303036, 8px radius and 24px internal padding. The hero side panel is a flat #1d1d20 frame with a vertical 1px divider. Hover on catalogue cards moves background to #26262a with a 150ms ease transition and no lift or shadow.

Inputs & Interaction Inputs sit on #1b1b1e with a 1px #303036 border, 4px radius and 8px padding; focus draws a 3px ring of rgba(255,177,238,0.12) and swaps the border to #ffb1ee. Sid

Do's and Don'ts

**Do**

Use the amber #f5a623 only for primary CTAs and the single highlight per view.
Separate panels with 1px #303036 borders and tonal steps before reaching for shadow.
Set all metadata, counters and eyebrow labels in Geist Mono at 10-12px with 0.1em tracking.
Keep radii at 4px for controls and 8px for cards to preserve the tool-like feel.

**Don't**

Don't introduce gradients or glassmorphism; the brand is flat and tonal.
Don't use the pink #ffb1ee for body text or buttons; it is an accent for emphasis only.
Don't place a pill (9999px) radius on rectangular CTAs.
Don't let cookie-consent or sponsor banners set the palette; they are not part of the brand system.

---
version: alpha
name: getdesign.md
description: >-
  A dark, developer-tool catalogue that collects independent DESIGN.md design-system analyses for AI coding agents. Warm
  amber CTAs on a near-black canvas, pixel-mono wordmark, Geist type.
logo:
  src: https://getdesign.md/favicon.svg?v=2
  srcDark: https://getdesign.md/favicon.svg?v=2
colors:
  surface: '#161618'
  surface-dim: '#111113'
  surface-bright: '#232327'
  surface-container-lowest: '#0f0f10'
  surface-container-low: '#1b1b1e'
  surface-container: '#1d1d20'
  surface-container-high: '#26262a'
  surface-container-highest: '#2b2b30'
  on-surface: '#ececee'
  on-surface-variant: '#a0a0a8'
  inverse-surface: '#ececee'
  inverse-on-surface: '#161618'
  outline: '#4d4d55'
  outline-variant: '#303036'
  surface-tint: '#f5a623'
  primary: '#f5a623'
  on-primary: '#161618'
  primary-container: '#ffd27a'
  on-primary-container: '#1a1206'
  inverse-primary: '#b87a0c'
  secondary: '#ffb1ee'
  on-secondary: '#2d0f29'
  secondary-container: '#4a2a44'
  on-secondary-container: '#ffd9f5'
  tertiary: '#c7ff00'
  on-tertiary: '#161618'
  tertiary-container: '#2a3a05'
  on-tertiary-container: '#e6ffa3'
  error: '#f87171'
  on-error: '#2a0606'
  error-container: '#4a1414'
  on-error-container: '#fecaca'
  primary-fixed: '#ffd27a'
  primary-fixed-dim: '#f5a623'
  on-primary-fixed: '#1a1206'
  on-primary-fixed-variant: '#4a3008'
  secondary-fixed: '#ffd9f5'
  secondary-fixed-dim: '#ffb1ee'
  on-secondary-fixed: '#2d0f29'
  on-secondary-fixed-variant: '#5a2a52'
  tertiary-fixed: '#e6ffa3'
  tertiary-fixed-dim: '#c7ff00'
  on-tertiary-fixed: '#161618'
  on-tertiary-fixed-variant: '#2a3a05'
  background: '#161618'
  on-background: '#ececee'
  surface-variant: '#26262a'
typography:
  display:
    fontFamily: Geist
    fontSize: 40px
    fontWeight: 600
    lineHeight: 44.8px
    letterSpacing: '-1.4px'
  headline-lg:
    fontFamily: Geist
    fontSize: 30px
    fontWeight: '600'
    lineHeight: 36px
    letterSpacing: '-0.025em'
  headline-md:
    fontFamily: Geist
    fontSize: 24px
    fontWeight: '600'
    lineHeight: 30px
    letterSpacing: '-0.02em'
  title-lg:
    fontFamily: Geist
    fontSize: 18px
    fontWeight: '600'
    lineHeight: 24px
  body-lg:
    fontFamily: Geist
    fontSize: 18px
    fontWeight: '400'
    lineHeight: 29px
  body-md:
    fontFamily: Geist
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
  label-md:
    fontFamily: Geist
    fontSize: 13px
    fontWeight: 500
    lineHeight: 18.2px
  label-sm:
    fontFamily: Geist Mono
    fontSize: 10.5px
    fontWeight: '400'
    lineHeight: 14px
    letterSpacing: 0.1em
rounded:
  sm: 4px
  DEFAULT: 5px
  md: 6px
  lg: 8px
  xl: 12px
  full: 9999px
spacing:
  unit: 4px
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  gutter: 24px
  container-max: 1120px
elevation:
  sm: 0 1px 3px 0 rgba(0,0,0,0.10), 0 1px 2px -1px rgba(0,0,0,0.10)
  md: 0 4px 6px -1px rgba(0,0,0,0.10), 0 2px 4px -2px rgba(0,0,0,0.10)
  lg: 0 10px 15px -3px rgba(0,0,0,0.10), 0 4px 6px -4px rgba(0,0,0,0.10)
layout:
  containerMaxWidth: 1120px
components:
  button-primary:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.label-md}'
    rounded: '{rounded.sm}'
    padding: 10px 16px
    height: 36px
  button-primary-hover:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    opacity: '0.9'
  button-secondary:
    backgroundColor: transparent
    textColor: '{colors.on-surface}'
    typography: '{typography.label-md}'
    rounded: '{rounded.sm}'
    padding: 6px 12px
    height: 34px
  button-secondary-hover:
    backgroundColor: '{colors.surface-container-high}'
  card:
    backgroundColor: '{colors.surface-container}'
    rounded: '{rounded.lg}'
    padding: '{spacing.xl}'
  card-hover:
    backgroundColor: '{colors.surface-container-high}'
  nav-link:
    backgroundColor: transparent
    textColor: '{colors.on-surface}'
    typography: '{typography.body-md}'
    rounded: '{rounded.sm}'
    padding: 7px 10px
  nav-link-hover:
    backgroundColor: '{colors.surface-container-highest}'
    textColor: '{colors.on-surface}'
  badge-new:
    backgroundColor: transparent
    textColor: '{colors.primary}'
    typography: '{typography.label-sm}'
    rounded: '{rounded.sm}'
    padding: 1px 3px
  input-field:
    backgroundColor: '{colors.surface-container-low}'
    textColor: '{colors.on-surface}'
    typography: '{typography.body-md}'
    rounded: '{rounded.sm}'
    padding: '{spacing.sm}'
  list-item:
    backgroundColor: transparent
    rounded: '{rounded.sm}'
    padding: '{spacing.sm}'
  list-item-hover:
    backgroundColor: '{colors.surface-container-high}'
    textColor: '{colors.on-surface}'
  announcement-banner:
    backgroundColor: '#ffffff'
    textColor: '#111111'
    typography: '{typography.label-md}'
    padding: 10px 16px
---

## Overview

## Colors

## Typography

## Layout

## Elevation & Depth

## Shapes

## Components

### Action Elements
Primary buttons are 36px tall, padding 10px 16px, 13px/500 label, background #f5a623, text #161618, radius 4px. Hover drops opacity to 0.9 over 150ms cubic-bezier(0.4,0,0.2,1) (default transition). Secondary buttons are transparent with a 1px #4d4d55 border, 6px 12px padding, and fill to #26262a on hover.

### Containers & Surfaces
Cards use #1d1d20 with 1px solid #303036, 8px radius and 24px internal padding. The hero side panel is a flat #1d1d20 frame with a vertical 1px divider. Hover on catalogue cards moves background to #26262a with a 150ms ease transition and no lift or shadow.

### Inputs & Interaction
Inputs sit on #1b1b1e with a 1px #303036 border, 4px radius and 8px padding; focus draws a 3px ring of rgba(255,177,238,0.12) and swaps the border to #ffb1ee. Sid

## Do's and Don'ts

**Do**
- Use the amber #f5a623 only for primary CTAs and the single highlight per view.
- Separate panels with 1px #303036 borders and tonal steps before reaching for shadow.
- Set all metadata, counters and eyebrow labels in Geist Mono at 10-12px with 0.1em tracking.
- Keep radii at 4px for controls and 8px for cards to preserve the tool-like feel.

**Don't**
- Don't introduce gradients or glassmorphism; the brand is flat and tonal.
- Don't use the pink #ffb1ee for body text or buttons; it is an accent for emphasis only.
- Don't place a pill (9999px) radius on rectangular CTAs.
- Don't let cookie-consent or sponsor banners set the palette; they are not part of the brand system.

Edit, then copy or download.