Skip to content

patternsoft_style_guide_v2.md

Latest commit

 

History

History
151 lines (107 loc) · 2.28 KB

patternsoft_style_guide_v2.md

File metadata and controls

151 lines (107 loc) · 2.28 KB
Raw

PatternSoft — Desktop Design System (v2)

Brand Direction

PatternSoft should feel:

  • Precise like CAD software
  • Clean and minimal
  • Serious but creative
  • Modern desktop-first (not mobile UI)

Avoid playful or craft-store aesthetics. This is a professional design tool.

1. Color System

Primary Brand

Primary Ink: #111827
Accent Teal: #0EA5A4

Backgrounds

App Background (Light): #F3F4F6
Surface: #FFFFFF
Panel Elevated: #FAFAFA

Neutrals

Gray 900: #0F172A
Gray 700: #334155
Gray 500: #64748B
Gray 300: #CBD5E1
Gray 200: #E2E8F0

Functional

Success: #16A34A
Warning: #F59E0B
Error: #DC2626
Info: #2563EB

Accent teal is used ONLY for:

  • Active tool
  • Selected object
  • Focus state
  • Primary action button

2. Typography

Primary Font: Inter
Fallback: system-ui

Scale

Window Title: 18px / 600
Panel Title: 16px / 600
Body: 14px / 450
Small labels: 12px / 450
Numeric measurements: monospace (Consolas, Menlo)

Use sentence case everywhere.

3. Layout Principles

Base spacing unit: 8px

Standard paddings: 16px (tight panels) 24px (normal panels) 32px (dialog layout)

Panel radius: 12px
Input radius: 8px

No heavy shadows. Use subtle borders instead.

4. Pattern Canvas

Canvas is the hero element.

Default background: Very light grid (#E5E7EB lines at low opacity)

Features:

  • Rulers on top and left
  • Snap indicators in accent teal
  • Measurement overlay in monospace font
  • Dark mode must preserve grid contrast

5. Components

Primary Button: Background: Accent Teal Text: White Hover: Slightly darker teal Focus: 2px teal outline

Secondary Button: White surface Gray border Ink text

Inputs: Border: Gray 300 Focus: Accent teal border Error: Red border + helper text

Toolbar: Flat, icon-first Active tool: teal underline Grouping by function: Draft | Edit | Grade | Export

6. Light & Dark Mode

Light Mode: Background: #F3F4F6 Surface: #FFFFFF Text: #111827

Dark Mode: Background: #0B1220 Surface: #111827 Text: #E2E8F0 Borders: rgba(255,255,255,0.08) Accent teal remains unchanged.

7. Tone

UI text should be direct and precise.

Good: "Add seam allowance" "Export DXF" "Lock grainline"

Avoid: Playful or overly friendly wording.

PatternSoft is a precision drafting tool — not a hobby app.