Skip to content

.impeccable.md

Latest commit

 

History

History
122 lines (87 loc) · 5.27 KB

.impeccable.md

File metadata and controls

122 lines (87 loc) · 5.27 KB

Dillinger Design System

Design Context

Users

Developers, technical writers, and content creators who need a distraction-free, cloud-connected markdown editor. They arrive with a document to write or edit, often context-switching from code. The job: write and preview markdown with zero friction, optionally syncing to GitHub, Dropbox, Google Drive, OneDrive, or Bitbucket. They value speed, keyboard-driven workflows, and tools that stay out of the way.

Brand Personality

Focused. Capable. Understated.

The interface should feel like a precision instrument — confident and quiet, never flashy. Dillinger earns trust through reliability and polish, not through decoration. Every pixel should serve the writing experience.

Emotional Goal

Calm focus. The user should feel the same ease as opening a well-worn notebook — immediate, distraction-free, ready. The UI recedes; the content leads.

Aesthetic Direction

  • Visual tone: Polished minimal. Clean lines, generous whitespace, refined typography. More refined than StackEdit (reference for layout/function, but Dillinger should feel more visually considered and premium).
  • Anti-references: Cluttered toolbars, gratuitous gradients, loud colors, "app-store widget" aesthetics. Nothing that competes with the user's content.
  • Theme: Full theme support — light, dark, and system-preference modes. The dark chrome sidebar/navbar with light editor is the signature look in light mode; dark mode should feel equally native, not bolted on.
  • Polish targets: Smoother transitions, more intentional spacing, refined typography hierarchy, subtle depth cues (shadows, borders) that feel modern without being heavy.

Design Principles

  1. Content is king. The editor and preview are the product. Every UI element exists to serve the writing experience — if it doesn't, remove it.

  2. Quiet confidence. Use restraint. The plum accent (#35D7BB) is the single bright voice in an otherwise neutral palette. Let it speak by keeping everything else calm.

  3. Polished, not decorated. Quality is in the details — consistent spacing, aligned elements, smooth transitions, thoughtful typography. Never add ornament for its own sake.

  4. Progressive disclosure. Show what's needed, hide what isn't. Sidebar collapses, preview toggles, zen mode strips everything. The interface adapts to the user's focus level.

  5. Accessible by default. WCAG AA compliance minimum. Visible focus rings, sufficient contrast, keyboard navigability, motion-reduced alternatives. Accessibility is not an add-on.

Color Palette

Brand

Token Value Usage
plum #35D7BB Primary accent — links, active states, focus rings, CTAs

Backgrounds

Token Value Usage
bg-primary #ffffff Editor/preview background (light mode)
bg-sidebar #2B2F36 Sidebar background
bg-navbar #373D49 Navbar, modals, toasts
bg-highlight #1D212A Deepest dark — code blocks, hover states
bg-button-save #4A5261 Secondary button background

Text

Token Value Usage
text-primary #373D49 Body text on light backgrounds
text-invert #ffffff Text on dark backgrounds
text-muted #A0AABF Secondary/disabled text

Borders & UI

Token Value Usage
border-light #E8E8E8 Dividers, table borders
border-settings #4F535B Modal/settings borders
icon-default #D3DAEA Default icon fill
dropdown-link #D0D6E2 Dropdown menu text
switchery #4B5363 Toggle switch inactive

Typography

Role Font Stack Usage
UI / Sans Source Sans 3, Helvetica Neue, Helvetica, Arial, sans-serif All interface text
Prose / Serif Georgia, Cambria, serif Markdown preview body (optional)
Code / Mono Ubuntu Mono, Monaco, monospace Code blocks, inline code

Scale

  • Base: 14px (preview), 13px (UI small text)
  • Headings: h1=2em, h2=1.5em, h3=1.25em, h4=1em
  • Line height: 1.6 (prose), 1.4 (UI)

Spacing

Token Value Usage
sidebar 270px Fixed sidebar width
gutter 32px Primary content padding
Base unit 4px Tailwind default scale

Z-Index Scale

sidebar:   1    page:     2    editor:   3    preview:  4
overlay:   5    navbar:   6    settings: 7
modal:    50    toast:   60

Interaction Patterns

  • Hover: Color transitions (transition-colors), never abrupt. Buttons shift to plum; dropdowns gain bg-highlight.
  • Focus: 2px plum ring with offset matching the background. Always visible on keyboard navigation.
  • Transitions: 200ms ease-out default. Slide-in-from-right for toasts/panels.
  • Motion: Respect prefers-reduced-motion — disable slide animations, keep opacity fades.

Theme Modes

Mode Editor BG Chrome BG Text Accent
Light #ffffff #2B2F36 / #373D49 #373D49 #35D7BB
Dark #1D212A #1D212A / #2B2F36 #D3DAEA #35D7BB
System Follows prefers-color-scheme

The plum accent remains constant across all themes for brand consistency.