Obsidian

Overview

Obsidian is a knowledge management and note-taking application that embraces a dark-first, distraction-minimalist aesthetic rooted in what we call 'Focused Brutalism'—a design philosophy that combines austere, high-contrast dark surfaces with precisely placed vibrant accent colors to guide user attention. The brand serves knowledge workers, researchers, and creative thinkers who value privacy, flexibility, and the ability to build interconnected personal knowledge bases. The UI evokes a sense of calm focus: deep blacks (#0a0a0a), cool grays (#262626, #404040), and a signature violet primary (#7c3aed) that appears only on actionable elements, creating a visual hierarchy that whispers rather than shouts.

The voice is precise, technical yet approachable, and unapologetically opinionated about privacy and user agency. Obsidian speaks in declarative, benefit-driven language: 'Your thoughts, your rules.' 'Sharpen your thinking.' The tone avoids marketing hyperbole; instead, it emphasizes capability and control. Example sentence in brand voice: 'Sync your vault end-to-end encrypted, or keep it local—the choice is yours.'

Colors

The color system is built on a foundation of near-black surfaces (#0a0a0a to #2d2d2d) that provide maximum contrast for text and reduce eye strain in low-light environments. Primary (#7c3aed, a vibrant violet) is reserved exclusively for interactive elements—buttons, links, focus states, and active navigation items—creating an unmistakable visual signal for clickability. Secondary (#a882ff, a lighter violet) and tertiary (#53dfdd, a cyan) provide supporting accent roles for tags, badges, and secondary UI patterns. The error color (#fb464c, a warm red) maintains high contrast against the dark surface stack and is used sparingly for destructive actions and validation states. On-surface text is set to #eeeeee (a soft white with slight warmth) to reduce harshness; on-surface-variant (#aaaaaa)

Typography

The type system uses Inter exclusively, a geometric sans-serif that balances technical clarity with human warmth—critical for a tool used by knowledge workers for extended periods. Display (60px, 700 weight, -0.04em tracking) anchors hero sections with commanding presence; headline-lg (40px, 600 weight) and headline-md (28px, 600 weight) establish section hierarchy without aggression. Body text sits at 16px (body-md) with 24px line-height and 0.01em tracking, optimized for readability on screens; body-lg (18px) is used for prominent copy and introductory paragraphs. Labels (14px and 12px, 600 and 500 weights respectively) maintain legibility at small scales and include increased letter-spacing (0.02em to 0.03em) to prevent visual crowding. All type scales use -0.02em to -0.04em negative le

Layout

The layout system uses a 12-column grid with a maximum container width of 1280px, providing ample breathing room on desktop while maintaining focus on content. The spacing scale (unit: 8px, with semantic steps at 12px, 24px, 40px, 64px) creates a predictable rhythm: lg spacing (40px) separates major sections, md spacing (24px) divides cards and content blocks, and sm spacing (12px) provides breathing room within components. The gutter is set to 24px on desktop, reducing to 12px on tablets and 8px on mobile to respect smaller viewports. White-space is treated as a first-class design element—negative space around text and interactive elements is never squeezed; instead, it reinforces the calm, uncluttered aesthetic. Container max-width of 1280px ensures that even on ultra-wide displays, the

Elevation & Depth

Depth is conveyed through a restrained shadow system and subtle color shifts rather than dramatic layering. Level 1 (Base): the surface (#0a0a0a) serves as the foundation with no shadow. Level 2 (Standard Cards/Containers): surface-container (#1f1f1f) with a 1px border in outline-variant (#404040) and a soft shadow of 0 3px 8px rgba(0, 0, 0, 0.15), creating gentle separation from the background. Level 3 (Modals/Elevated Surfaces): surface-container-high (#262626) with a 1px border in outline (#525252) and a more pronounced shadow of 0 8px 24px rgba(0, 0, 0, 0.2). Focus states use a 2-3px ring

Shapes

The shape philosophy is 'Technical Softness'—rounded corners are used strategically to soften the austere dark aesthetic without introducing playfulness. Buttons and primary interactive elements use lg radius (1rem / 16px), creating a subtle pill-like appearance that signals interactivity without being cartoonish. Cards and containers use md radius (0.75rem / 12px), providing visual distinction from buttons while maintaining the technical feel. Input fields and smaller components use DEFAULT radius (0.5rem / 8px), balancing usability (easier to tap on mobile) with visual hierarchy. Tags and ba

Components

Action Elements Buttons are the primary call-to-action mechanism. The button-primary component uses the primary color (#7c3aed) with white text, 16px vertical padding, 24px horizontal padding, and lg radius (16px). On hover, the background shifts to primary-container (#6d28d9) with a smooth 150ms transition; on focus, a 3px ring in rgba(124, 58, 237, 0.3) appears around the button without displacing layout. Button-secondary provides a lower-emphasis alternative with a transparent background, on-surface text (#eeeeee), and a 1px border in outline (#525252); on hover, the background becomes surface-container-high (#262626). Both button variants use label-md typography (14px, 600 weight) and maintain a minimum height of 48px for touch accessibility.

Containers & Surfaces Cards are th

Do's and Don'ts

**Do**

• Do use primary (#7c3aed) exclusively for interactive elements—buttons, links, focus states, and active indicators—to create an unmistakable visual signal for clickability.
• Do maintain the dark surface stack (surface #0a0a0a through surface-container-highest #2d2d2d) as the foundation; never introduce light backgrounds without explicit design justification.
• Do apply smooth 150ms transitions (cubic-bezier(0.4, 0, 0.2, 1)) to all interactive state changes—hover, focus, active—to reinforce the calm, deliberate brand feel.
• Do use the spacing scale (12px, 24px, 40px, 64px) consistently; never introduce ad-hoc pixel values for padding or margins.
• Do reserve shadows for interactive states and elevated surfaces; the default card state uses only a subtle border in outline-variant (#404040).

**Don't**

• Don't use secondary (#a882ff) or tertiary (#53dfdd) colors for primary CTAs; these are supporting accents only and will dilute the visual hierarchy.
• Don't introduce light backgrounds or light-mode colors into the dark-first design; Obsidian's aesthetic depends on the contrast between deep blacks and precise accent colors.
• Don't apply multiple shadows or complex layering effects; the elevation system relies on color shifts and subtle 1px borders to maintain visual clarity.
• Don't use rounded corners larger than lg (16px) on buttons or primary interactive elements; excessive rounding introduces a playful tone that contradicts the technical, focused brand voice.
• Don't override the Inter typeface with system fonts or serif alternatives; the geometric clarity of Inter is essential to the brand's technical identity.