TDvorak/Excalidraw
1
0
Fork 0
mirror of https://github.com/Dvorinka/excalidraw-full.git synced 2026-06-03 22:02:57 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity
Files
ef0b51905819bec7afb413f8528224ddf975b24d
Excalidraw/frontend/DESIGN.md
T

8.9 KiB
Raw Blame History

Excalidraw FULL - Frontend Design System

Design Context

Target Audience

  • Product teams who need visual collaboration tools
  • Developers creating architecture diagrams, flowcharts
  • Designers wireframing and prototyping
  • Educators and facilitators running workshops
  • Anyone who prefers hand-drawn aesthetics over sterile diagrams

Use Cases

  • Brainstorming and ideation sessions
  • System architecture and technical diagrams
  • UI/UX wireframing and user flows
  • Kanban boards and project planning
  • Meeting notes and retrospectives
  • Mind mapping and knowledge organization

Brand Personality

Hand-crafted technical workspace

  • Human and approachable (hand-drawn aesthetic)
  • Professional but not sterile
  • Creative and collaborative
  • Calm, uncluttered interface
  • Self-hosted, privacy-conscious

Tone

Warm minimalism meets technical precision. The hand-drawn style softens technical content, making complex diagrams feel accessible and collaborative.

Color System

Primary Palette

--color-primary: #6965db;           /* Main purple */
--color-primary-darker: #5b57d1;  /* Hover states */
--color-primary-darkest: #4a47b1;  /* Active states */
--color-primary-light: #e3e2fe;     /* Subtle backgrounds */
--color-primary-hover: #5753d0;     /* Interactive hover */

Neutral Palette

--color-gray-10: #f5f5f5;  /* Lightest background */
--color-gray-20: #ebebeb;  /* Card backgrounds */
--color-gray-30: #d6d6d6;  /* Borders subtle */
--color-gray-40: #b8b8b8;  /* Disabled states */
--color-gray-50: #999999;  /* Muted text */
--color-gray-60: #7a7a7a;  /* Secondary text */
--color-gray-70: #5c5c5c;  /* Body text light */
--color-gray-80: #3d3d3d;  /* Body text */
--color-gray-85: #242424;  /* Headings */
--color-gray-90: #1e1e1e;  /* Strong text */
--color-gray-100: #121212; /* Near black */

Semantic Colors

--color-success: #cafccc;
--color-success-text: #268029;
--color-warning: #fceeca;
--color-warning-dark: #f5c354;
--color-danger: #db6965;
--color-danger-dark: #d65550;
--color-danger-text: #700000;

Surface Colors (Light Mode)

--island-bg-color: #ffffff;
--color-surface-low: #f8f9fa;
--color-surface-high: #e9ecef;
--color-surface-primary-container: #e3e2fe;
--color-on-surface: #1e1e1e;
--color-on-primary-container: #4a47b1;

Typography

Font Stack

--ui-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--editor-font: "Virgil", "Cascadia", "Segoe UI", sans-serif; /* Hand-drawn feel */

Type Scale

--text-xs: 0.75rem;    /* 12px - Captions, labels */
--text-sm: 0.875rem;   /* 14px - Secondary text */
--text-base: 1rem;     /* 16px - Body text */
--text-lg: 1.125rem;  /* 18px - Large body */
--text-xl: 1.25rem;   /* 20px - H4 */
--text-2xl: 1.5rem;   /* 24px - H3 */
--text-3xl: 1.875rem; /* 30px - H2 */
--text-4xl: 2.25rem;  /* 36px - H1 */

Font Weights

  • 400 Regular - Body text
  • 500 Medium - Emphasis, labels
  • 600 Semibold - Subheadings
  • 700 Bold - Headings, important text

Spacing System

Base Unit

--space-factor: 0.25rem; /* 4px base */

Scale

--space-1: 0.25rem;   /* 4px */
--space-2: 0.5rem;    /* 8px */
--space-3: 0.75rem;   /* 12px */
--space-4: 1rem;      /* 16px */
--space-5: 1.25rem;   /* 20px */
--space-6: 1.5rem;    /* 24px */
--space-8: 2rem;      /* 32px */
--space-10: 2.5rem;   /* 40px */
--space-12: 3rem;     /* 48px */
--space-16: 4rem;     /* 64px */

Component Patterns

Island Pattern (Excalidraw Signature)

Floating container with subtle shadow:

.island {
  background: var(--island-bg-color);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-island);
  padding: var(--space-4);
}

Buttons

Primary Button

.btn-primary {
  background: var(--color-primary);
  color: white;
  border-radius: var(--border-radius-lg);
  padding: 0.625rem 1rem;
  font-weight: 500;
  
  &:hover { background: var(--color-primary-hover); }
  &:active { background: var(--color-primary-darkest); }
}

Secondary Button

.btn-secondary {
  background: var(--color-surface-low);
  color: var(--color-on-surface);
  border: 1px solid var(--color-surface-high);
  border-radius: var(--border-radius-lg);
  
  &:hover { background: var(--color-surface-high); }
}

Ghost Button

.btn-ghost {
  background: transparent;
  color: var(--color-on-surface);
  
  &:hover { background: var(--color-surface-low); }
}

Cards

Drawing Card

.drawing-card {
  background: var(--island-bg-color);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-island);
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-island-stronger);
  }
}

Form Inputs

Text Input

.input {
  background: var(--input-bg-color);
  border: 1px solid var(--input-border-color);
  border-radius: var(--border-radius-md);
  padding: 0.5rem 0.75rem;
  font-size: var(--text-base);
  
  &:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
  }
  
  &:hover:not(:focus) {
    background: var(--input-hover-bg-color);
  }
}

Layout Patterns

App Shell Structure

┌─────────────────────────────────────────────────────────┐
│  Sidebar    │  Header                                   │
│             ├─────────────────────────────────────────────┤
│             │                                             │
│  Navigation │              Main Content                   │
│             │                                             │
│             │                                             │
│             │                                             │
└─────────────┴─────────────────────────────────────────────┘

Dashboard Grid

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-6);
}

Sidebar Navigation

.sidebar {
  width: 260px;
  background: var(--island-bg-color);
  border-right: 1px solid var(--color-gray-20);
  padding: var(--space-4);
}

Shadows & Effects

--shadow-island: 0px 0px 1px 0px rgba(0, 0, 0, 0.17),
  0px 0px 3px 0px rgba(0, 0, 0, 0.08), 
  0px 7px 14px 0px rgba(0, 0, 0, 0.05);

--shadow-island-stronger: 0px 0px 1px 0px rgba(0, 0, 0, 0.17),
  0px 0px 3px 0px rgba(0, 0, 0, 0.08), 
  0px 7px 14px 0px rgb(0 0 0 / 18%);

--modal-shadow: 0px 100px 80px rgba(0, 0, 0, 0.07),
  0px 41.7776px 33.4221px rgba(0, 0, 0, 0.05),
  0px 22.3363px 17.869px rgba(0, 0, 0, 0.04);

Border Radius

--border-radius-sm: 0.25rem;  /* 4px */
--border-radius-md: 0.375rem;  /* 6px */
--border-radius-lg: 0.5rem;    /* 8px */
--border-radius-xl: 0.75rem;   /* 12px */
--border-radius-full: 9999px;  /* Pills, avatars */

Animation & Transitions

Timing

--duration-fast: 0.15s;
--duration-normal: 0.2s;
--duration-slow: 0.3s;

Easing

--ease-out: cubic-bezier(0.4, 0, 0.2, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
--ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

Common Transitions

/* Hover states */
transition: background-color var(--duration-fast) var(--ease-out);

/* Card interactions */
transition: transform var(--duration-fast) var(--ease-out),
            box-shadow var(--duration-fast) var(--ease-out);

/* Modal/dialog */
transition: opacity var(--duration-normal) var(--ease-out),
            transform var(--duration-normal) var(--ease-out);

Icon System

  • 16px (default-icon-size) for inline UI
  • 20px (lg-icon-size) for buttons
  • 24px for navigation
  • Lucide icons preferred for consistency
  • Stroke width: 1.5px - 2px

Responsive Breakpoints

--breakpoint-sm: 640px;
--breakpoint-md: 768px;
--breakpoint-lg: 1024px;
--breakpoint-xl: 1280px;
--breakpoint-2xl: 1536px;

Page Specifications

Dashboard

  • Grid of drawing cards with thumbnails
  • Recent activity sidebar
  • Quick actions header
  • Team selector

File Browser

  • Folder tree sidebar
  • Breadcrumb navigation
  • Sortable/filterable drawing list
  • Bulk actions toolbar

Auth Pages

  • Centered card layout
  • Clean, minimal design
  • Clear call-to-action
  • Social auth buttons (GitHub)

Editor (Canvas)

  • Full-screen canvas
  • Minimal surrounding UI
  • Floating toolbars (island pattern)
  • Collapsible side panels

Settings

  • Tabbed interface
  • Sidebar navigation for sections
  • Clear section headers
  • Form-based layout
Reference in New Issue View Git Blame Copy Permalink