Naidis

Design System

Naidis Design System - Raycast-inspired Design for Obsidian

Naidis Design System

Raycast-inspired Design for Obsidian

Version: 1.0
Date: 2026-01-17

1. Design Philosophy

PrincipleDescriptionRaycast Reference
MinimalRemove unnecessary elements, focus on contentSolid background, thin borders
Monochrome+B&W based + single accent colorUse only purple accent
SpatialClear hierarchy, sufficient spacing8px grid system
FluidSmooth transitions, natural movement150-200ms ease-out
AdaptiveAuto-adapts to Obsidian themesCSS variable based

2. Color System

2.1 Obsidian CSS Variable Mapping

Wrap native CSS variables for auto-harmony with Obsidian themes:

:root {
  /* ========== Background ========== */
  --ul-bg-primary: var(--background-primary);
  --ul-bg-secondary: var(--background-secondary);
  --ul-bg-tertiary: var(--background-secondary-alt);
  --ul-bg-hover: var(--background-modifier-hover);
  --ul-bg-active: var(--background-modifier-active-hover);

  /* ========== Text ========== */
  --ul-text-primary: var(--text-normal);
  --ul-text-secondary: var(--text-muted);
  --ul-text-faint: var(--text-faint);
  --ul-text-on-accent: var(--text-on-accent);

  /* ========== Accent ========== */
  --ul-accent: var(--interactive-accent);
  --ul-accent-hover: var(--interactive-accent-hover);
  --ul-accent-rgb: var(--interactive-accent-rgb, 124, 58, 237);

  /* ========== Border ========== */
  --ul-border: var(--background-modifier-border);
  --ul-border-hover: var(--background-modifier-border-hover);
  --ul-border-focus: var(--interactive-accent);

  /* ========== Semantic Colors ========== */
  --ul-success: #34D399;
  --ul-success-bg: rgba(52, 211, 153, 0.1);
  --ul-warning: #FBBF24;
  --ul-warning-bg: rgba(251, 191, 36, 0.1);
  --ul-error: #F87171;
  --ul-error-bg: rgba(248, 113, 113, 0.1);
  --ul-info: #60A5FA;
  --ul-info-bg: rgba(96, 165, 250, 0.1);
}

2.2 Color Usage Guide

UsageVariableExample
Main Background--ul-bg-primaryCommand Palette background
Secondary Background--ul-bg-secondaryInput field, card
Hover State--ul-bg-hoverList item hover
Selected State--ul-bg-activeCurrently selected item
Primary Text--ul-text-primaryTitle, body
Secondary Text--ul-text-secondaryDescription, label
Faint Text--ul-text-faintShortcut, hint
Highlight--ul-accentButton, link, focus ring

3. Typography

3.1 Font Family

:root {
  /* Inherit Obsidian fonts */
  --ul-font-family: var(--font-interface);
  --ul-font-mono: var(--font-monospace);
}

3.2 Size Scale

:root {
  --ul-text-xs: 11px;
  --ul-text-sm: 12px;
  --ul-text-base: 14px;
  --ul-text-lg: 16px;
  --ul-text-xl: 18px;
  --ul-text-2xl: 24px;
  --ul-text-3xl: 30px;
}

3.3 Font Weight

:root {
  --ul-font-normal: 400;
  --ul-font-medium: 500;
  --ul-font-semibold: 600;
  --ul-font-bold: 700;
}

3.4 Line Height

:root {
  --ul-leading-tight: 1.25;
  --ul-leading-normal: 1.5;
  --ul-leading-relaxed: 1.75;
}

3.5 Typography Application

ElementSizeWeightColorLine Height
Command Palette Inputxl (18px)mediumprimarytight
List Item Titlebase (14px)mediumprimarytight
List Item Descriptionsm (12px)normalsecondarynormal
Shortcut Displayxs (11px)normalfainttight
Section Headersm (12px)semiboldsecondarytight
Modal Titlelg (16px)semiboldprimarytight
Button Textsm (12px)mediumvariestight

4. Spacing

4.1 8px Grid System

:root {
  --ul-space-0: 0px;
  --ul-space-0.5: 2px;
  --ul-space-1: 4px;
  --ul-space-2: 8px;
  --ul-space-3: 12px;
  --ul-space-4: 16px;
  --ul-space-5: 20px;
  --ul-space-6: 24px;
  --ul-space-8: 32px;
  --ul-space-10: 40px;
  --ul-space-12: 48px;
  --ul-space-16: 64px;
}

4.2 Spacing Usage Guide

ContextValueVariable
List Item Padding (Vertical)12px--ul-space-3
List Item Padding (Horizontal)16px--ul-space-4
Icon-Text Gap12px--ul-space-3
Section Gap8px--ul-space-2
Modal Internal Padding16px--ul-space-4
Button Internal Padding8px 16px--ul-space-2 --ul-space-4
Input Internal Padding12px 16px--ul-space-3 --ul-space-4
Card Gap16px--ul-space-4

5. Border & Rounding

5.1 Border Radius

:root {
  --ul-radius-sm: 4px;
  --ul-radius-md: 6px;
  --ul-radius-lg: 8px;
  --ul-radius-xl: 12px;
  --ul-radius-2xl: 16px;
  --ul-radius-full: 9999px;
}

5.2 Usage Guide

ElementRadius
Command Palette Modalxl (12px)
List Itemlg (8px)
Buttonmd (6px)
Input Fieldlg (8px)
Tag/Badgefull
Avatar/Icon Backgroundlg (8px)
Tooltipmd (6px)

5.3 Border Width

:root {
  --ul-border-width: 1px;
  --ul-border-width-2: 2px;
}

6. Shadows

:root {
  /* Subtle shadow */
  --ul-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  
  /* Basic shadow */
  --ul-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
                  0 2px 4px -1px rgba(0, 0, 0, 0.06);
  
  /* Modal/Popover shadow */
  --ul-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
                  0 4px 6px -2px rgba(0, 0, 0, 0.05);
  
  /* Command Palette shadow */
  --ul-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
                  0 10px 10px -5px rgba(0, 0, 0, 0.04);
  
  /* Enhanced shadow for Dark Mode */
  --ul-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

7. Components

7.1 Command Palette

┌─────────────────────────────────────────────────────────────┐
│                                                             │
│   🔍  Type a command...                              ⌘K    │
│                                                             │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│   COMMANDS                                                  │
│                                                             │
│   ┌─────────────────────────────────────────────────────┐  │
│   │  🎥  YouTube Import                          ⌘ Y    │  │
│   └─────────────────────────────────────────────────────┘  │
│   ┌─────────────────────────────────────────────────────┐  │
│   │  💬  AI Chat                                 ⌘ I    │  │  ← selected
│   └─────────────────────────────────────────────────────┘  │
│   │  📄  PDF Process                             ⌘ P    │  │
│   │  📰  RSS Check                               ⌘ R    │  │
│   │  📎  Web Clip                                ⌘ C    │  │
│   │                                                             │
│   RECENT                                                    │
│                                                             │
│   │  🎥  React Tutorial Video                           │  │
│   │  📄  Q4 Report.pdf                                  │  │
│   │                                                             │
└─────────────────────────────────────────────────────────────┘

Specs:

.command-palette {
  width: 680px;
  max-width: 90vw;
  max-height: 70vh;
  background: var(--ul-bg-primary);
  border: 1px solid var(--ul-border);
  border-radius: var(--ul-radius-xl);
  box-shadow: var(--ul-shadow-2xl);
  overflow: hidden;
}

.command-palette-input {
  padding: var(--ul-space-4);
  border-bottom: 1px solid var(--ul-border);
}

.command-palette-list {
  padding: var(--ul-space-2);
  overflow-y: auto;
}

7.2 List Item

.list-item {
  display: flex;
  align-items: center;
  padding: var(--ul-space-3) var(--ul-space-4);
  border-radius: var(--ul-radius-lg);
  gap: var(--ul-space-3);
  cursor: pointer;
  transition: background var(--ul-transition-fast);
}

.list-item:hover {
  background: var(--ul-bg-hover);
}

.list-item.selected {
  background: var(--ul-bg-active);
}

.list-item.selected::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 60%;
  background: var(--ul-accent);
  border-radius: var(--ul-radius-full);
}

.list-item-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.list-item-content {
  flex: 1;
  min-width: 0;
}

.list-item-title {
  font-size: var(--ul-text-base);
  font-weight: var(--ul-font-medium);
  color: var(--ul-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.list-item-description {
  font-size: var(--ul-text-sm);
  color: var(--ul-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.list-item-shortcut {
  font-size: var(--ul-text-xs);
  color: var(--ul-text-faint);
  font-family: var(--ul-font-mono);
}

7.3 Button

/* Primary Button */
.btn-primary {
  background: var(--ul-accent);
  color: var(--ul-text-on-accent);
  border: none;
  padding: var(--ul-space-2) var(--ul-space-4);
  border-radius: var(--ul-radius-md);
  font-size: var(--ul-text-sm);
  font-weight: var(--ul-font-medium);
  cursor: pointer;
  transition: background var(--ul-transition-fast);
}

.btn-primary:hover {
  background: var(--ul-accent-hover);
}

/* Secondary Button */
.btn-secondary {
  background: transparent;
  color: var(--ul-text-primary);
  border: 1px solid var(--ul-border);
  padding: var(--ul-space-2) var(--ul-space-4);
  border-radius: var(--ul-radius-md);
  font-size: var(--ul-text-sm);
  font-weight: var(--ul-font-medium);
  cursor: pointer;
  transition: all var(--ul-transition-fast);
}

.btn-secondary:hover {
  background: var(--ul-bg-hover);
  border-color: var(--ul-border-hover);
}

/* Ghost Button */
.btn-ghost {
  background: transparent;
  color: var(--ul-text-secondary);
  border: none;
  padding: var(--ul-space-2) var(--ul-space-4);
  border-radius: var(--ul-radius-md);
  font-size: var(--ul-text-sm);
  font-weight: var(--ul-font-medium);
  cursor: pointer;
  transition: all var(--ul-transition-fast);
}

.btn-ghost:hover {
  background: var(--ul-bg-hover);
  color: var(--ul-text-primary);
}

/* Icon Button */
.btn-icon {
  background: transparent;
  border: none;
  padding: var(--ul-space-2);
  border-radius: var(--ul-radius-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--ul-transition-fast);
}

.btn-icon:hover {
  background: var(--ul-bg-hover);
}

7.4 Input Field

.input {
  width: 100%;
  background: var(--ul-bg-secondary);
  border: 1px solid var(--ul-border);
  border-radius: var(--ul-radius-lg);
  padding: var(--ul-space-3) var(--ul-space-4);
  font-size: var(--ul-text-base);
  font-family: var(--ul-font-family);
  color: var(--ul-text-primary);
  transition: all var(--ul-transition-fast);
}

.input::placeholder {
  color: var(--ul-text-faint);
}

.input:hover {
  border-color: var(--ul-border-hover);
}

.input:focus {
  outline: none;
  border-color: var(--ul-accent);
  box-shadow: 0 0 0 3px rgba(var(--ul-accent-rgb), 0.1);
}

/* Large Input (Command Palette) */
.input-lg {
  font-size: var(--ul-text-xl);
  padding: var(--ul-space-4);
}

7.5 Tag/Badge

.tag {
  display: inline-flex;
  align-items: center;
  padding: var(--ul-space-0.5) var(--ul-space-2);
  border-radius: var(--ul-radius-full);
  font-size: var(--ul-text-xs);
  font-weight: var(--ul-font-medium);
}

.tag-default {
  background: var(--ul-bg-secondary);
  color: var(--ul-text-secondary);
}

.tag-accent {
  background: rgba(var(--ul-accent-rgb), 0.1);
  color: var(--ul-accent);
}

.tag-success {
  background: var(--ul-success-bg);
  color: var(--ul-success);
}

.tag-warning {
  background: var(--ul-warning-bg);
  color: var(--ul-warning);
}

.tag-error {
  background: var(--ul-error-bg);
  color: var(--ul-error);
}

7.6 Section Header

.section-header {
  font-size: var(--ul-text-sm);
  font-weight: var(--ul-font-semibold);
  color: var(--ul-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--ul-space-2) var(--ul-space-4);
}

7.7 Shortcut Display

.kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 var(--ul-space-1);
  background: var(--ul-bg-secondary);
  border: 1px solid var(--ul-border);
  border-radius: var(--ul-radius-sm);
  font-size: var(--ul-text-xs);
  font-family: var(--ul-font-mono);
  color: var(--ul-text-faint);
}

.kbd-group {
  display: inline-flex;
  align-items: center;
  gap: var(--ul-space-1);
}

8. Icons

8.1 Icon System

PropertyValue
LibraryLucide Icons
Base StyleOutline (stroke-width: 2)
Base Size18px
ColorInherit currentColor

8.2 Icon Sizes

:root {
  --ul-icon-sm: 14px;
  --ul-icon-md: 18px;
  --ul-icon-lg: 20px;
  --ul-icon-xl: 24px;
}

8.3 Module Icons

ModuleIcon NameColor
YouTubeyoutube / play-circle#FF0000
PDFfile-text#EF4444
AI Chatsparkles / message-circlevar(--ul-accent)
RSSrss#F97316
Web Clipclipboard / linkvar(--ul-accent)
Settingssettingsvar(--ul-text-secondary)
Searchsearchvar(--ul-text-secondary)
Externalexternal-linkvar(--ul-text-faint)

9. Animations

9.1 Transition Timing

:root {
  --ul-transition-fast: 100ms ease-out;
  --ul-transition-base: 150ms ease-out;
  --ul-transition-slow: 200ms ease-out;
  --ul-transition-slower: 300ms ease-out;
}

9.2 Easing Functions

:root {
  --ul-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ul-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ul-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ul-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

9.3 Keyframe Animations

/* Opening Modal */
@keyframes modal-in {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Closing Modal */
@keyframes modal-out {
  from {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  to {
    opacity: 0;
    transform: scale(0.95) translateY(-10px);
  }
}

/* List Item Appearance */
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Spinner */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Pulse (Loading) */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Slide-in (Sidepanel) */
@keyframes slide-in-right {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Backdrop Fade */
@keyframes backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

9.4 Animation Application

ElementAnimationDurationEasing
Open Command Palettemodal-in150msease-out
Close Command Palettemodal-out100msease-in
List Item Appearancefade-in-up100msease-out
List Stagger Delay-30ms per item-
Hover State Transitionbackground100msease-out
Focus Ringbox-shadow150msease-out
Backdropbackdrop-in150msease-out
Side Panelslide-in-right200msease-out

10. Dark/Light Mode

10.1 Auto Adaptation

Uses Obsidian CSS variables, so it auto-adapts when the theme changes:

/* Obsidian applies .theme-dark or .theme-light classes to body */
/* CSS variables update automatically */
/* No separate logic required */

10.2 Manual Override (If necessary)

/* Dark Mode only */
.theme-dark .ul-component {
  --ul-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.3),
                  0 10px 10px -5px rgba(0, 0, 0, 0.2);
}

/* Light Mode only */
.theme-light .ul-component {
  --ul-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
                  0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

11. Responsive Design

11.1 Breakpoints

:root {
  --ul-breakpoint-sm: 480px;
  --ul-breakpoint-md: 768px;
  --ul-breakpoint-lg: 1024px;
  --ul-breakpoint-xl: 1280px;
}

11.2 Command Palette Responsiveness

ViewportWidthPosition
Desktop (>768px)680px fixedTop-center
Tablet (480-768px)90vwTop-center
Mobile (<480px)calc(100vw - 32px)Top-center
.command-palette {
  width: 680px;
  max-width: calc(100vw - 32px);
}

@media (max-width: 768px) {
  .command-palette {
    width: 90vw;
  }
}

12. Accessibility

12.1 Focus Indication

/* All interactive elements */
*:focus-visible {
  outline: 2px solid var(--ul-accent);
  outline-offset: 2px;
}

/* Input fields use box-shadow */
.input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--ul-accent-rgb), 0.2);
}

12.2 Keyboard Navigation

KeyAction
↑ / ↓Move list item
EnterSelect/Execute
EscapeClose/Cancel
TabNext focus area
⌘K / Ctrl+KOpen Command Palette

12.3 ARIA Attributes

<!-- Command Palette -->
<div role="dialog" aria-modal="true" aria-label="Command Palette">
  <input type="text" role="combobox" aria-autocomplete="list" aria-expanded="true">
  <ul role="listbox">
    <li role="option" aria-selected="true">...</li>
    <li role="option" aria-selected="false">...</li>
  </ul>
</div>

12.4 Color Contrast

All text meets WCAG 2.1 AA standards:

  • Normal text: 4.5:1 or higher
  • Large text (18px+): 3:1 or higher

13. Implementation Checklist

Phase 1: Basic System

  • CSS Variable definition
  • Typography styles
  • Button components
  • Input field components

Phase 2: Command Palette

  • Modal container
  • Search input
  • List items
  • Section headers
  • Shortcut display
  • Animations

Phase 3: Module UI

  • YouTube module UI
  • PDF module UI
  • AI Chat module UI
  • RSS module UI
  • Settings UI

Phase 4: Polishing

  • Responsive testing
  • Dark/Light mode testing
  • Accessibility audit
  • Performance optimization

This document will be updated as development progresses.

Product Requirements Document

Naidis PRD - Raycast for Obsidian, Unified PKM Workstation

On this page

Naidis Design SystemRaycast-inspired Design for Obsidian1. Design Philosophy2. Color System2.1 Obsidian CSS Variable Mapping2.2 Color Usage Guide3. Typography3.1 Font Family3.2 Size Scale3.3 Font Weight3.4 Line Height3.5 Typography Application4. Spacing4.1 8px Grid System4.2 Spacing Usage Guide5. Border & Rounding5.1 Border Radius5.2 Usage Guide5.3 Border Width6. Shadows7. Components7.1 Command Palette7.2 List Item7.3 Button7.4 Input Field7.5 Tag/Badge7.6 Section Header7.7 Shortcut Display8. Icons8.1 Icon System8.2 Icon Sizes8.3 Module Icons9. Animations9.1 Transition Timing9.2 Easing Functions9.3 Keyframe Animations9.4 Animation Application10. Dark/Light Mode10.1 Auto Adaptation10.2 Manual Override (If necessary)11. Responsive Design11.1 Breakpoints11.2 Command Palette Responsiveness12. Accessibility12.1 Focus Indication12.2 Keyboard Navigation12.3 ARIA Attributes12.4 Color Contrast13. Implementation ChecklistPhase 1: Basic SystemPhase 2: Command PalettePhase 3: Module UIPhase 4: Polishing