Skip to content

.impeccable.md

Latest commit

 

History

History
41 lines (29 loc) · 3.13 KB

.impeccable.md

File metadata and controls

41 lines (29 loc) · 3.13 KB

Design Context

Users

Solo developers and small teams who want a fast, distraction-free AI coding workflow. They're technical, opinionated about their tools, and expect a desktop app that feels native and responsive. They use CodeForge for multi-threaded Claude conversations, code diffs, embedded browsing, and git integration — often with multiple sessions running in parallel.

Brand Personality

Modern. Aesthetic. Cool.

CodeForge should feel like a premium developer tool — the kind of app that makes you want to use it. It's confident without being loud, polished without being precious. Think high-end IDE meets sleek productivity tool.

Aesthetic Direction

  • Sleek and professional — clean lines, deliberate spacing, restrained use of color
  • Dark-first: Obsidian Forge theme is the flagship experience (near-black backgrounds, blue-indigo accents, purple undertones)
  • Never playful — no rounded bubbly shapes, no whimsical illustrations, no emoji-driven UI, no pastel palettes
  • Technical confidence — monospace accents (JetBrains Mono), semantic status colors, information-dense where appropriate
  • Subtle polish — micro-interactions, smooth transitions (0.12-0.15s), glow effects on focus — felt but not flashy
  • No anti-references specified, but avoid anything that reads as consumer/casual (Notion-cute, Slack-playful, VS Code-cluttered)

Design Principles

  1. Substance over decoration — Every visual element should serve a purpose. No ornamental flourishes. If it doesn't help the developer, remove it.

  2. Calm intensity — The interface should feel powerful and capable without being overwhelming. Dark backgrounds, controlled contrast, deliberate whitespace. High information density when needed, breathing room when not.

  3. Seamless confidence — Interactions should feel inevitable — smooth transitions, predictable layouts, no jank. The app should feel like it was built by someone who cares about craft.

  4. Dark-native design — Design for dark mode first. Light theme is supported but secondary. Color choices, contrast ratios, and glow effects should be optimized for the dark experience.

  5. Developer-grade precision — Pixel-perfect alignment, consistent spacing scale, monospace where data matters. Developers notice when things are off — nothing should be.

Design System Reference

  • Colors: CSS variables in frontend/src/styles/global.css, theme JSONs in crates/tauri-app/themes/
  • Typography: DM Sans (body), JetBrains Mono (code/technical), loaded via Google Fonts in index.html
  • Spacing: No formal tokens — derived scale: 2/4/6/8/10/12/16/20/24/40px
  • Radii: --radius-sm (6px), --radius-md (10px), --radius-lg (14px), --radius-xl (20px), --radius-pill (100px)
  • Borders: Translucent white overlays (rgba(255,255,255, 0.06-0.10))
  • Shadows: Deep layered shadows on modals, minimal elsewhere
  • Transitions: 0.12-0.15s ease for interactions, 0.2s cubic-bezier for overlays
  • Icons: Inline SVGs, stroke-based (2-2.5px), 14-16px
  • Components: Self-contained with inline <style> tags, all referencing CSS custom properties