obsidian-ui-skills

Apply Obsidian-inspired dark mode UI constraints with Inter font and a 4px grid system.

73|9|Updated Jan 25, 2026
One-click install
npx skills add https://github.com/ihlamury/design-skills --skill obsidian-ui-skills
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: obsidian-ui-skills
Source: https://github.com/ihlamury/design-skills/tree/main/skills/obsidian
Command: npx skills add https://github.com/ihlamury/design-skills --skill obsidian-ui-skills

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides opinionated constraints and guidelines for building user interfaces that are visually consistent with the Obsidian application's aesthetic.

Core Features & Use Cases

  • Dark Mode UI Design: Enforces dark backgrounds and specific color palettes suitable for dark themes.
  • Typography & Spacing: Implements the 'Inter' font family, a 4px grid system, and specific text styles for hierarchy.
  • Component Styling: Defines guidelines for borders, buttons, and input fields.
  • Use Case: When developing a new productivity tool or a personal dashboard that should evoke the clean, focused feel of Obsidian, these guidelines ensure consistency.

Quick Start

Apply Obsidian's UI design system to a new dark-mode interface.

Frequently Asked Questions about obsidian-ui-skills

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a dark mode UI inspired by Obsidian's design system?

To build an Obsidian-inspired dark mode UI, apply specific color tokens, the Inter font family, and a strict 4px grid system for spacing and layout. This enforces visual consistency with Obsidian's aesthetic across components like borders, buttons, and inputs.

What typography and spacing rules does an Obsidian-inspired design system use?

An Obsidian-inspired design system uses the Inter font family for typography and a 4px grid system for spacing. These constraints define specific text styles for hierarchy and ensure consistent layout principles across the interface.

Can I use Inter font and a 4px grid for building productivity tool interfaces?

Yes, you can use the Inter font and a 4px grid when building productivity tools to evoke Obsidian's clean, focused feel. These guidelines ensure consistent UI development for dark mode personal dashboards and similar interfaces.

What's the best way to ensure visual consistency in dark mode UI design?

The best way to ensure visual consistency in dark mode UI design is to enforce opinionated constraints like specific color tokens, defined typography scales, and strict spacing rules. This approach guarantees a cohesive aesthetic across all interface components.

Does this UI design approach provide specific color tokens for dark themes?

Yes, this UI design approach provides specific color tokens for dark themes. It enforces dark backgrounds and specific color palettes suitable for dark mode, ensuring borders, buttons, and input fields maintain visual consistency.