Design teardown
Obsidian
A near-black product page with one violet accent, short period-ended headlines, and large app mocks.
obsidian.md
Design character
Dark product stage
The page is a wide black stage with a slim top bar and a centered column. The first screen pairs a short headline and one violet action with a desktop window and a phone. Later sections keep the same rhythm: a two- or three-word title, one muted sentence, then a mock or a row of cards. Copy stays short, second person, and plain. Titles are sentence case and end with a period. Actions are imperative and brief.
Typography
One system sans carries every level. Computed family starts with ui-sans-serif; Inter is loaded at 400, 500, 600, and 700 and sits later in the stack. Display titles are 60px, weight 600, line height 60px, tracking -1.2px. The hero support line is 36px on 40px. Claims and section support are 24px on 32px. Feature titles are 24px weight 600; their explanations are 20px on 25px. Community card titles are 20px weight 600; their descriptions are 18px on 22.5px. Body, footer, and in-app reading text sit at 16px on 24px. Nav is 14px weight 500. In-product chrome is 13px.
Color system
The page is #0f0f0f with text at #eeeeee and muted copy at #bcbcbc. Raised cards are #1f1f1f. The only strong color is violet: buttons #7c3aed, links and tags #a78bfa, switches #8b5cf6.
Spacing and geometry
Spacing follows a 4px step. The column is 1120px wide, about 90% of the viewport. Sections breathe: 96px above the hero, 48px under it, 24px inside cards, and 128px of vertical padding around the closing band.
Layout
A 60px header spans the viewport. Content sits in a 1120px column. The hero is left aligned: title, support line, button plus text link, then a product stage. A two-column band follows, claims on the left and a logo tile on the right. Feature areas are centered titles over a two-up card grid. The close is centered: one title, one button, then three community cards, then a multi-column footer.
Motion
The page sits still. Motion is short color fades and slow hover lifts. Nothing on the homepage loops on its own.
UI fingerprint
- Black stage Almost the whole page is #0f0f0f, so the product window is the brightest object.
- One violet Buttons, text links, tags, and on-switches share one purple and nothing else competes.
- Period titles Section titles are two or three words, sentence case, large, and end with a period.
- Mock first Explanations stay to a sentence or two, then a framed app window does the rest.