DESIGN.md · measured October 21, 2026

Obsidian design system

Dark interface measured from obsidian.md: system-ui type, light violet accents, tonal surfaces and 6px corners.

Background: #0F0F0F
Primary: #A88BFA
Type: system-ui
Corners: 6px

Download DESIGN.md

From obsidian.md ↗ · 347 elements at 1440×900 and 390×844 · Independent analysis, not affiliated with Obsidian

Obsidian colors

15 roles measured on the page, grouped by where each color is used.

Surfaces

Charcoal#0F0F0FbackgroundPage background · 1×

Charcoal#1F1F1Fsurface-container-lowRaised areas one step from the page · 8×

Graphite#404040surface-container · --star-colorCards and panels · 1×

Violet 15%#8A5CF526overlayTranslucent fill for cards and controls · 3×

Near Black 50%#00000080overlay-strongStronger translucent fill · 1×

Text

Mist#EEEEEEon-surfacePrimary text and headings · 58×

Silver#BCBCBCon-surface-variantSecondary text · 33×

Gray#B3B3B3on-surface-mutedMuted text and metadata · 25×

Gray#A3A3A3on-surface-subtle · --color-gray-400Subtle text and placeholders · 7×

Near Black#000000on-primaryText and icons on primary

Accents

Light Violet#A88BFAprimary · --color-accent-400Most used accent color · 21×

Vivid Violet#7C3AEDsecondary · --color-violet-600Secondary buttons · 48×

Violet#8A5CF5tertiaryBrand accent (CSS variable) · 15×

Status

Green#22C55Esuccess · --color-green-500Success and positive states · 1×

Vivid Amber#EAB308warningWarnings and highlights · 1×

Obsidian fonts

One family carries the whole interface.

Aasystem-uiWeights 400, 500, 600ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont

headline-displayPage title (h1)Obsidian60px · 600 · 1 · -0.02em
mobile 44px

body-mdBody textThe quick brown fox jumps over the lazy dog16px · 400 · 1.25

body-lgLead paragraphsThe quick brown fox jumps over the lazy dog20px · 400 · 1.4

body-smSecondary and small textThe quick brown fox jumps over the lazy dog6px · 400 · 1.5

label-mdButtons, navigation and labelsThe quick brown fox jumps over the lazy dog16px · 500 · 1.25

label-smSmall labels and badgesThe quick brown fox jumps over the lazy dog14px · 400 · 1.43

Contrast

Text on #0F0F0F

AaAAA16.5:1

AaAAA10.1:1

AaAAA9.1:1

AaAAA7.6:1

Spacing

No strict grid · 76% are multiples of 4px

xs4px

sm8px

md12px

lg24px

xl48px

gutter24px

section96px

Breakpoints: 640px 768px 1024px 1280px 1536px

Shapes

Corner radii, most used first.

md6px · 60×

sm4px · 44×

lg8px · 40×

xs2px · 36×

xl12px · 28×

full9999px · 12×

Depth

Inset

Shadow

Inset

Shadow

Components

Rebuilt from the measured CSS.

Get Obsidian for Windows

button-primaryFilled button · hover to see the measured hover state

Download now

button-ghostText button

Card

cardCard

Inline link

linkInline link

Motion

Interface transitions

0.15s0.25s

cubic-bezier(0.4, 0, 0.2, 1)ease

Do’s and don’ts

Rules written from the measurements, so a coding agent stays on style.

Use #0F0F0F for the page and lift surfaces in small steps: #1F1F1F, #404040.
Keep text in 4 levels: #EEEEEE, #BCBCBC, #B3B3B3, #A3A3A3.
Reserve #A88BFA for primary actions and key highlights.
Set headlines in system-ui with tight tracking (-0.02em).
Reuse the measured spacing steps (8px, 12px, 24px).
Use 6px corners on most elements; larger surfaces also use 4px, 8px and 2px.
Use heavy drop shadows; keep depth to hairline rings and tonal surfaces.
Introduce new font families beyond system-ui.
Use #A88BFA for large backgrounds or body text.
Make interface transitions slower than 0.25s.

DESIGN.md199 lines

---
version: alpha
name: Obsidian
description: "Dark interface measured from obsidian.md: system-ui type, light violet accents, tonal surfaces and 6px corners."
colors:
  background: "#0F0F0F"
  surface: "#0F0F0F"
  on-surface: "#EEEEEE"
  on-background: "#EEEEEE"
  on-surface-variant: "#BCBCBC"
  on-surface-muted: "#B3B3B3"
  on-surface-subtle: "#A3A3A3"
  surface-container-low: "#1F1F1F"
  surface-container: "#404040"
  overlay: "#8A5CF526"
  overlay-strong: "#00000080"
  primary: "#A88BFA"
  on-primary: "#000000"
  secondary: "#7C3AED"
  tertiary: "#8A5CF5"
  success: "#22C55E"
  warning: "#EAB308"
typography:
  headline-display:
    fontFamily: system-ui
    fontSize: 60px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: -0.02em
  body-md:
    fontFamily: system-ui
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.25
  body-lg:
    fontFamily: system-ui
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.4
  body-sm:
    fontFamily: system-ui
    fontSize: 6px
    fontWeight: 400
    lineHeight: 1.5
  label-md:
    fontFamily: system-ui
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.25
  label-sm:
    fontFamily: system-ui
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
  headline-display-mobile:
    fontFamily: system-ui
    fontSize: 44px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: -0.02em
rounded:
  xs: 2px
  sm: 4px
  md: 6px
  lg: 8px
  xl: 12px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 24px
  xl: 48px
  gutter: 24px
  section: 96px
components:
  button-primary:
    backgroundColor: "{colors.secondary}"
    textColor: "#FFFFFF"
    typography: "{typography.body-lg}"
    rounded: "{rounded.lg}"
    padding: 16px 24px
    height: 60px
  button-primary-hover:
    backgroundColor: "#8B5CF6"
  button-ghost:
    textColor: "#A78BFA"
    rounded: 0px
    padding: 0px
  card:
    backgroundColor: "{colors.surface-container-low}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    padding: 0px
  link:
    textColor: "{colors.on-surface}"
---

# Obsidian Design System

## Overview

Obsidian describes itself as: “The free and flexible app for your private thoughts.” The interface is dark, built on **Charcoal (#0F0F0F)** with **Mist (#EEEEEE)** text, and **Light Violet (#A88BFA)** as the main accent.

Type is set in **system-ui**. Headlines run large with tight negative tracking; body text is 16px. Depth comes from hairline borders and inset highlights rather than drop shadows. Corners are mostly 6px.

Measured from [obsidian.md](https://obsidian.md/) on October 21, 2026 at 1440×900 and 390×844 from 347 rendered elements. Values are computed styles from the live page, not the original source files.

## Colors

The palette has 15 roles.

- **Charcoal (#0F0F0F):** Page background, seen 1 time. Token `background`.
- **Mist (#EEEEEE):** Primary text and headings, seen 58 times. Token `on-surface`.
- **Silver (#BCBCBC):** Secondary text, seen 33 times. Token `on-surface-variant`.
- **Gray (#B3B3B3):** Muted text and metadata, seen 25 times. Token `on-surface-muted`.
- **Gray (#A3A3A3):** Subtle text and placeholders, seen 7 times. Token `on-surface-subtle`, CSS `--color-gray-400`.
- **Charcoal (#1F1F1F):** Raised areas one step from the page, seen 8 times. Token `surface-container-low`.
- **Graphite (#404040):** Cards and panels, seen 1 time. Token `surface-container`, CSS `--star-color`.
- **Violet 15% (#8A5CF526):** Translucent fill for cards and controls, seen 3 times. Token `overlay`.
- **Near Black 50% (#00000080):** Stronger translucent fill, seen 1 time. Token `overlay-strong`.
- **Light Violet (#A88BFA):** Most used accent color, seen 21 times. Token `primary`, CSS `--color-accent-400`.
- **Near Black (#000000):** Text and icons on primary. Token `on-primary`.
- **Vivid Violet (#7C3AED):** Secondary buttons, seen 48 times. Token `secondary`, CSS `--color-violet-600`.
- **Violet (#8A5CF5):** Brand accent (CSS variable), seen 15 times. Token `tertiary`.
- **Green (#22C55E):** Success and positive states, seen 1 time. Token `success`, CSS `--color-green-500`.
- **Vivid Amber (#EAB308):** Warnings and highlights, seen 1 time. Token `warning`.

## Typography

**system-ui** carries the whole interface. Fallback stack: `ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont`.

- **headline-display:** system-ui 60px at weight 600, line height 1, tracking -0.02em (44px on mobile). Page title (h1).
- **body-md:** system-ui 16px at weight 400, line height 1.25. Body text.
- **body-lg:** system-ui 20px at weight 400, line height 1.4. Lead paragraphs.
- **body-sm:** system-ui 6px at weight 400, line height 1.5. Secondary and small text.
- **label-md:** system-ui 16px at weight 500, line height 1.25. Buttons, navigation and labels.
- **label-sm:** system-ui 14px at weight 400, line height 1.43. Small labels and badges.

## Layout

Spacing is mostly on a 4px grid (76% of measured values), with some off-grid steps. Match the measured scale rather than rounding everything.

- **Scale:** xs 4px, sm 8px, md 12px, lg 24px, xl 48px.
- **Sections:** 96px vertical padding between major sections.
- **Gaps:** 24px is the most common gap in flex and grid layouts.
- **Breakpoints:** 640px, 768px, 1024px, 1280px, 1536px.

## Elevation & Depth

Depth comes mostly from hairline rings and inset highlights on tonal surfaces (#1F1F1F → #404040):

- `rgb(255, 255, 255) 0px 0px 0px 0px inset, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- `rgb(255, 255, 255) 0px 0px 0px 0px inset, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px`

A few raised panels add a soft drop shadow: `rgb(255, 255, 255) 0px 0px 0px 0px inset, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px`.

## Shapes

Most elements use 6px corners. Measured radii, most used first:

- **md (6px):** 60 elements.
- **sm (4px):** 44 elements.
- **lg (8px):** 40 elements.
- **xs (2px):** 36 elements.
- **xl (12px):** 28 elements.
- **full (9999px):** 12 elements.

## Components

Measured from the rendered page. Token values reference the tokens above.

- **button-primary (“Get Obsidian for Windows”):** #7C3AED fill, #FFFFFF text, 20px/500, 8px radius, padding 16px 24px, shadow `rgb(255, 255, 255) 0px 0px 0px 0px inset, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px`.
- **button-primary-hover:** background #8B5CF6, text #FFFFFF on hover.
- **button-ghost (“Download now”):** transparent fill, #A78BFA text, 24px/500, padding 0px.
- **card:** #1F1F1F fill, #EEEEEE text, 16px/400, 20% radius, padding 0px, shadow `rgba(255, 255, 255, 0.024) 0px 1px 0px 1px inset, rgba(0, 0, 0, 0.05) 0px 5px 10px 5px`.
- **link:** transparent fill, #EEEEEE text, padding 0px.

## Do's and Don'ts

- Do use #0F0F0F for the page and lift surfaces in small steps: #1F1F1F, #404040.
- Do keep text in 4 levels: #EEEEEE, #BCBCBC, #B3B3B3, #A3A3A3.
- Do reserve #A88BFA for primary actions and key highlights.
- Do set headlines in system-ui with tight tracking (-0.02em).
- Do reuse the measured spacing steps (8px, 12px, 24px).
- Do use 6px corners on most elements; larger surfaces also use 4px, 8px and 2px.
- Don't use heavy drop shadows; keep depth to hairline rings and tonal surfaces.
- Don't introduce new font families beyond system-ui.
- Don't use #A88BFA for large backgrounds or body text.
- Don't make interface transitions slower than 0.25s.

## Motion

Interface transitions are quick: 0.15s, 0.25s. Longer ambient animations run 1s, 2s.

- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`, `ease`, `ease-in-out`.

Generated by [Sitepeel](https://sitepeel.dev/design-md/obsidian.md/), the free DESIGN.md generator.

What you can build with it

Landing pages, pricing tables, dashboards: your AI coding agent builds them in this style, with these colors, fonts, spacing and buttons instead of its defaults.

Download DESIGN.md, put it in your project’s root folder, then ask your agent for a page.

Prompt · DESIGN.md attached

Build a landing page for my product. Follow for every color, font, spacing value, corner and button.

Guides

Need more than one page?

Design MD in the Sitepeel tools for Chrome measures pages behind a login, combines several pages into one file and works on any site you open.

Explore the tool

More designs

See all →

GrammarlyBrand grammarly.com · matter

HootsuiteBrand hootsuite.com · Montserrat

SmartSkill smartskill.shop · IRANYekanX

Just Falafel jfvegancafe.com · Bodoni Moda

Greenpaktourism greenpaktourism.com/destinations · Poppins

Pusho pusho.fun · Yatra One

FAQ

Questions

What can I build with the Obsidian DESIGN.md?

Any page or component in this style: a landing page, pricing table, dashboard or sign-up form. Your AI coding agent uses the measured colors, system-ui type, spacing, corners and buttons instead of its own defaults.

How do I use it with Claude Code or Cursor?

Download the file and put it in your project’s root folder, then ask your agent to follow DESIGN.md. Step-by-step guides: Claude Code, Cursor, Codex, GitHub Copilot.

Is this Obsidian’s official design system?

No. Sitepeel measured it from obsidian.md’s public page on October 21, 2026. It is an independent analysis, not made or approved by Obsidian.

Can I use Obsidian’s style in my own product?

Use it to learn, prototype and compare. For a real product, make the style your own, and never copy Obsidian’s logo, name, pictures or text.

How accurate are the values?

Each value was measured on the rendered page after it fully loaded, on desktop and mobile: colors where they appear, type with tracking, spacing, corners, shadows and hover states. Sites change, so check the date at the top.