Productivity

Obsidian

obsidian.md12 colors6 componentsui-sans-serifMulti-page · 12 screens

The free and flexible app for your private thoughts.

Remix Visit

Remix

Visit

12 screenshots captured· obsidian.md

1 / 12 · Obsidian - Sharpen your thinking · Above the fold

Preview

the generated design system

Switch between the Visual preview, the rendered DESIGN.md and the Raw file.

Design tokens

Extracted from obsidian.md

Primary

#7C3AED

Primary CTA, brand accent, active state

#A88BFA

Secondary accent / hero band

#6C31E3

Accent / decorative

#8B5CF6

Accent / decorative

Neutral

#0F0F0F

Default page background

#1F1F1F

Card / panel background

#FFFFFF

Headings / primary text; label colour on brand surfaces

#EEEEEE

Body copy

#BCBCBC

Captions, secondary text

#B3B3B3

Tertiary / placeholder text

#262626

1px borders and dividers

#E5E5E5

Neutral

Typography · ui-sans-serif

body18px · 400 · 24px

body24px · 400 · 32px

body14px · 400 · 20px

h160px · 600 · 60px

link16px · 500 · 20px

body14px · 500 · 20px

body16px · 400 · 20px

body16px · 500 · 20px

list-item16px · 400 · 24px

body20px · 400 · 25px

body20px · 500 · 28px

body20px · 600 · 28px

body18px · 500 · 28px

body18px · 600 · 27px

h320px · 600 · 28px

body6px · 400 · 8px

quote14px · 400 · 19.6px

body24px · 500 · 32px

body24px · 600 · 32px

heading36px · 400 · 40px

body13px · 400 · 19.5px

caption10px · 400 · 20px

caption12px · 400 · 16px

caption6px · 400 · 9px

heading28px · 700 · 33.6px

body18px · 700 · 28px

h260px · 600 · 60px

button14px · 600 · 20px

heading36px · 600 · 40px

display48px · 600 · 48px

h224px · 600 · 32px

link16px · 400 · 20px

button14px · 500 · 20px

heading20px · 600 · 28px

heading18px · 600 · 28px

h248px · 600 · 48px

h418px · 600 · 28px

h230px · 600 · 36px

body16px · 700 · 24px

nav-link16px · 400 · 36px

heading30px · 500 · 36px

Spacing

4px

8px

16px

24px

12px

48px

32px

160px

Elevation

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 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px

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

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

rgba(255, 255, 255, 0.024) 0px 1px 0px 1px inset, rgba(0, 0, 0, 0.05) 0px 5px 10px 5px

Components · 6

Remixes of Obsidian

Latest remixes

No public remixes yet. Be the first to make one.

Remix it