mirror of
https://github.com/Dvorinka/excalidraw-full.git
synced 2026-06-03 22:02:57 +00:00
Tomas Dvorak
378 lines
8.9 KiB
Markdown
378 lines
8.9 KiB
Markdown
# 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
|
|
```css
|
|
--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
|
|
```css
|
|
--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
|
|
```css
|
|
--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)
|
|
```css
|
|
--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
|
|
```css
|
|
--ui-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
--editor-font: "Virgil", "Cascadia", "Segoe UI", sans-serif; /* Hand-drawn feel */
|
|
```
|
|
|
|
### Type Scale
|
|
```css
|
|
--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
|
|
```css
|
|
--space-factor: 0.25rem; /* 4px base */
|
|
```
|
|
|
|
### Scale
|
|
```css
|
|
--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:
|
|
```css
|
|
.island {
|
|
background: var(--island-bg-color);
|
|
border-radius: var(--border-radius-lg);
|
|
box-shadow: var(--shadow-island);
|
|
padding: var(--space-4);
|
|
}
|
|
```
|
|
|
|
### Buttons
|
|
|
|
**Primary Button**
|
|
```css
|
|
.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**
|
|
```css
|
|
.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**
|
|
```css
|
|
.btn-ghost {
|
|
background: transparent;
|
|
color: var(--color-on-surface);
|
|
|
|
&:hover { background: var(--color-surface-low); }
|
|
}
|
|
```
|
|
|
|
### Cards
|
|
|
|
**Drawing Card**
|
|
```css
|
|
.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**
|
|
```css
|
|
.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
|
|
```css
|
|
.dashboard-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
|
gap: var(--space-6);
|
|
}
|
|
```
|
|
|
|
### Sidebar Navigation
|
|
```css
|
|
.sidebar {
|
|
width: 260px;
|
|
background: var(--island-bg-color);
|
|
border-right: 1px solid var(--color-gray-20);
|
|
padding: var(--space-4);
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## Shadows & Effects
|
|
|
|
```css
|
|
--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
|
|
|
|
```css
|
|
--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
|
|
```css
|
|
--duration-fast: 0.15s;
|
|
--duration-normal: 0.2s;
|
|
--duration-slow: 0.3s;
|
|
```
|
|
|
|
### Easing
|
|
```css
|
|
--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
|
|
```css
|
|
/* 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
|
|
|
|
```css
|
|
--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
|