Obsidian

Overview

Obsidian is a knowledge management and note-taking application built on a philosophy of privacy, flexibility, and interconnected thinking. The brand serves knowledge workers, researchers, and creative professionals who value ownership of their data and the ability to build personal knowledge graphs. The design aesthetic is **Minimalist Brutalism with Neon Accents**—a deliberate contrast between austere, near-black surfaces (rgb(10, 10, 10)) and vibrant, saturated accent colors (primary violet #7c3aed, secondary lavender #a882ff, tertiary cyan #53dfdd). This creates an environment that feels both serious and energetic, where the interface recedes and content takes center stage, yet interactive elements command immediate attention through chromatic intensity.

The brand voice is precise, unpretentious, and empowering. Obsidian speaks to users as capable thinkers, never condescending or over-explaining. Vocabulary favors clarity over marketing flourish: "sharpen your thinking," "flexible," "private," "sync securely." The tone is calm but purposeful—a tool for deep work, not casual browsing. Example sentence in brand voice: "Your vault is yours alone—encrypted, local-first, and ready to grow with your ideas."

Colors

The color system is built on a **dark-first, accent-driven** philosophy. The surface stack ranges from near-black (#0a0a0a for surface) through carefully calibrated grays (#1f1f1f for surface-container, #262626 for surface-container-high) to create subtle depth without sacrificing legibility. On-surface text is set at #eeeeee (rgb(238, 238, 238)), providing 16:1 contrast against the darkest surfaces for WCAG AAA compliance. The on-surface-variant (#aaaaaa) is reserved for secondary text, hints, and disabled states, maintaining visual hierarchy without introducing additional hues.

Primary (#7c3aed, a saturated violet) is the signature accent, applied exclusively to call-to-action buttons, focus states, and interactive highlights. It commands attention through chromatic contrast against the

Typography

The type system uses **Inter** exclusively across all scales, a humanist sans-serif chosen for its clarity and neutrality in dense information environments. The hierarchy spans from display (60px, 600 weight, -0.02em tracking) for hero headlines down to label-sm (12px, 500 weight, 0.02em tracking) for captions and metadata. Body text is set at 16px with 24px line-height (1.5x), providing comfortable reading rhythm for extended note content. Headlines use tighter line-heights (headline-lg: 40px / 48px = 0.83x) to create visual compression and emphasis. Letter-spacing is negative for large sizes (-0.02em at display) to tighten the visual mass, and positive for small labels (0.02em) to improve legibility at reduced sizes. Apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) on small labels (label-

Layout

The page layout uses a **fluid 12-column grid** with a max-width of 1280px, centered on viewport. The gutter is 24px (md spacing), applied consistently between columns and sections. White-space is generous: section separation uses lg spacing (40px) vertically, creating clear visual breaks between hero, feature blocks, and footer. Horizontal padding on the container is md (24px) on mobile, increasing to lg (40px) on tablet and desktop. The hero section occupies the full viewport height with centered text alignment, establishing visual dominance. Feature cards are arranged in a 3-column grid on desktop, collapsing to 2 columns on tablet and 1 column on mobile. Container padding follows the spacing scale: xs (4px) for tight internal spacing in badges, sm (12px) for input fields, md (24px) for

Elevation & Depth

Depth is conveyed through **layered shadows and subtle background shifts** rather than bright highlights or glassmorphism. The elevation system defines three levels: sm (0 1px 2px rgba(0, 0, 0, 0.12)) for hover states on small elements, md (0 4px 12px rgba(0, 0, 0, 0.15)) for cards and modals, and lg (0 16px 40px rgba(0, 0, 0, 0.2)) for prominent overlays and dropdowns. Shadows use pure black with opacity, never colored shadows, to maintain the minimalist aesthetic. The surface-container stack provides secondary depth: surface-container-low (#131313) for recessed areas, surface-container (#1f1

Shapes

The shape philosophy is **Technical Minimalism**—rounded corners are used sparingly and purposefully, never decoratively. Buttons and primary interactive elements use lg (1rem / 16px) border-radius, creating a soft but deliberate appearance. Cards and containers use md (0.75rem / 12px) for a slightly sharper profile, signaling secondary importance. Input fields and small UI elements use DEFAULT (0.5rem / 8px), maintaining consistency with Tailwind conventions. Badges and pills use full (9999px) for maximum roundness, creating a distinct visual category. The rationale: larger radius on primary

Components

Action Elements Buttons are the primary interactive component. The button-primary uses backgroundColor: {colors.primary} (#7c3aed), textColor: {colors.on-primary} (#ffffff), padding: 16px 24px, height: 48px, and rounded: {rounded.lg} (1rem). On hover, the background shifts to {colors.primary-container} (#6d28d9), darkening the violet without losing saturation. On focus, apply a 3px ring of rgba(124, 58, 237, 0.3) with 2px offset. The button-secondary is transparent with a 1px border at {colors.outline} (#525252), text in {colors.primary}. On hover, the background becomes {colors.surface-container-high} (#262626) with border shifting to {colors.outline-variant} (#404040). Transition all properties over 150ms cubic-bezier(0.4, 0, 0.2, 1).

Containers & Surfaces Cards use backgroundCo

Do's and Don'ts

**Do**

• Do use primary (#7c3aed) exclusively for CTAs and focus states—never apply it to passive elements or backgrounds.
• Do maintain the 8px spacing grid rigorously; all padding, margin, and gap values must be multiples of 8px.
• Do apply transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1) to all interactive state changes (hover, focus, active).
• Do use Inter at 400, 500, or 600 weight only; never use 300, 700, or other weights.
• Do ensure text contrast is at least 16:1 for body text on dark surfaces; use {colors.on-surface} (#eeeeee) as the default.
• Do apply focus rings (3px, rgba(124, 58, 237, 0.3)) to all keyboard-interactive elements for accessibility.

**Don't**

• Don't use secondary or tertiary colors for primary CTAs; they are reserved for badges, status indicators, and supplementary UI.
• Don't apply rounded corners larger than lg (1rem) to buttons or cards; it dilutes the technical minimalism.
• Don't use box-shadow for depth on cards; rely on the surface-container stack and subtle background shifts instead.
• Don't mix typefaces; Inter is the only font family in this system—no serif, monospace, or system fonts in UI.
• Don't apply opacity or transparency to text; use the on-surface and on-surface-variant tokens instead.
• Don't use bright, saturated colors (secondary, tertiary, error) on large surfaces; reserve them for small, focused interactive elements.