Overview
Platform: macOS native app + Web workspace | Date: 2026-03-08
Drawboard is a professional vector design tool for macOS, known for its clean, minimal interface and iconic yellow diamond logo. The marketing site features a modern, light design with generous whitespace, while the macOS app follows native platform conventions with a custom toolbar, sidebar layer list, and inspector panel.
Font note: Drawboard's website uses a geometric sans-serif (likely Cera Pro or Graphik). This reference uses Inter from Google Fonts as a close approximation. The macOS app uses the system SF Pro font family.
Colors
Brand Yellow / Orange — The iconic diamond gradient and primary CTA color
Accent Blue — Links, selection states, interactive elements
Status
Neutrals
Typography
Website specimens rendered with Inter as a substitute for Drawboard's proprietary font.
| Tag | h1 |
| Size | 56px |
| Line-height | 64px |
| Letter-spacing | -1.5px |
| Weight | 700 |
| Tag | h2 |
| Size | 40px |
| Line-height | 48px |
| Letter-spacing | -0.8px |
| Weight | 700 |
| Tag | h3 |
| Size | 28px |
| Line-height | 36px |
| Letter-spacing | -0.5px |
| Weight | 600 |
| Tag | h4 |
| Size | 22px |
| Line-height | 28px |
| Letter-spacing | -0.3px |
| Weight | 600 |
| Style | Body large |
| Size | 20px |
| Line-height | 30px |
| Letter-spacing | -0.2px |
| Weight | 400 |
| Style | Body default |
| Size | 16px |
| Line-height | 24px |
| Weight | 400 |
| Style | Body small |
| Size | 14px |
| Line-height | 20px |
| Weight | 400 |
| Style | Caption |
| Size | 12px |
| Transform | uppercase |
| Letter-spacing | 0.4px |
| Weight | 500 |
Spacing
Scale
Section Gaps
Borders & Shadows
Border Radius
Shadows
Cards
Feature Card
White card with subtle shadow and thin border ring. Used for feature highlights and content blocks.
Dark Card
Dark variant used in footer areas and testimonial sections.
Blog Card
Light gray card used for blog posts and update announcements.
Inputs
Clean input fields with 8px radius, gray border, and blue focus ring.
bg: #fff, radius: 8px, padding: 12px 16px, font: 16px, border: 1px solid #E0E0E0, focus-border: #4A90D9
Checkbox & Toggle
Layout
Container Widths
Breakpoints
Section Rhythm
80–120px vertical padding per section, 48–64px gaps between content blocks within sections.
Motion & Interaction
Hover Transitions
All interactive elements use transition: all 0.2s ease-in-out. Buttons darken on hover; cards lift with enhanced shadow.
Timing Functions
| Context | Value |
|---|---|
| Default | all 0.2s ease-in-out |
| Fast (tooltips) | all 0.15s ease-in-out |
| Slow (modals) | all 0.3s ease-in-out |
| Panel slide | all 0.25s ease-in-out |
App Overview
Drawboard is a native macOS design tool with a canvas-based interface featuring a toolbar, sidebar layer list, central canvas, and right-side inspector panel. The UI follows macOS design conventions with system fonts and native controls.
App Colors
UI Chrome — Toolbar, panels, and canvas background
Selection & Guides
Icon States
Toolbar
macOS-native toolbar with translucent background, 38px height. Icons are 20px with 4px radius on hover.
height: 38px, bg: rgba(246,246,246,0.92), border-bottom: 1px solid #D1D1D1, icon: 20px #666, active: #4A90D9
Layer List
Sidebar layer panel: 240px width, 24px row height, 13px font size, 16px indent per nesting level.
Inspector Panel
Right-side panel: 260px width, compact 24px inputs, 11px labels in uppercase. Sections divided by 1px #EEE borders.
App Components
Badges & Tags
App Typography Scale
The macOS app uses SF Pro (system font) at these sizes:
| Element | Size | Weight |
|---|---|---|
| Toolbar label | 11px | Regular (400) |
| Inspector label | 11px | Medium (500) |
| Inspector value | 12px | Regular (400) |
| Layer name | 13px | Regular (400) |
| Menu item | 13px | Regular (400) |
| Panel title | 13px | Semibold (600) |
| Tab label | 12px | Medium (500) |
| Tooltip | 11px | Regular (400) |
App Layout Dimensions
| Element | Dimension |
|---|---|
| Toolbar height | 38px |
| Layer list width | 240px (resizable) |
| Inspector width | 260px (resizable) |
| Layer row height | 24px |
| Input height | 24px |
| Color swatch size | 16px |
| Toolbar icon size | 20px |
CSS Custom Properties
:root {
/* Brand */
--Drawboard-yellow: #FDAD00;
--Drawboard-yellow-light: #FDD231;
--Drawboard-orange: #FEA500;
/* Accent */
--Drawboard-blue: #4A90D9;
--Drawboard-blue-hover: #3B7AC4;
/* Status */
--Drawboard-success: #34C759;
--Drawboard-warning: #FF9500;
--Drawboard-error: #FF3B30;
--Drawboard-info: #5AC8FA;
/* Neutrals */
--Drawboard-text-primary: #1A1A1A;
--Drawboard-text-secondary: #4A4A4A;
--Drawboard-text-muted: #757575;
--Drawboard-border: #E0E0E0;
--Drawboard-border-subtle: #EEEEEE;
--Drawboard-bg-page: #FFFFFF;
--Drawboard-bg-alt: #FAFAFA;
--Drawboard-bg-muted: #F5F5F5;
/* App UI */
--Drawboard-toolbar-bg: rgba(246,246,246,0.92);
--Drawboard-toolbar-border: #D1D1D1;
--Drawboard-sidebar-bg: #FAFAFA;
--Drawboard-inspector-bg: #FFFFFF;
--Drawboard-canvas-bg: #F5F5F5;
--Drawboard-selection: #4A90D9;
--Drawboard-guide: #FF3366;
/* Spacing */
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 32px;
--space-2xl: 48px;
--space-3xl: 64px;
/* Radius */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
/* Shadows */
--shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
--shadow-md: 0 4px 12px rgba(0,0,0,0.08);
--shadow-lg: 0 8px 24px rgba(0,0,0,0.10);
--shadow-card: 0 2px 8px rgba(0,0,0,0.06),
0 0 0 1px rgba(0,0,0,0.04);
/* Transitions */
--transition-fast: all 0.15s ease-in-out;
--transition-default: all 0.2s ease-in-out;
--transition-slow: all 0.3s ease-in-out;
}Tailwind Mapping
The paired JSON export now includes a tailwind section with theme extensions and component recipes. Use these mappings instead of default Tailwind tokens when recreating this system.
// tailwind.config.js
import designSystem from './design-system.json';
export default {
theme: {
extend: designSystem.tailwind.website.theme.extend,
},
};
// Swap to designSystem.tailwind.app.theme.extend for app/portal surfaces.
| Scope | Primary | Body Font | Radius | Shadow | Breakpoint |
|---|---|---|---|---|---|
| Website | — | — | 100px | — | {'max': '375px'} |
| App / Portal | — | — | 6px | — | — |
| Scope | Recipe | Class Pattern | Notes |
|---|---|---|---|
| Website | buttonPrimary | inline-flex items-center justify-center gap-2 rounded-pill bg-brand-primary text-text-inverse shadow-sm px-4 py-2 font-semibold transition-colors | Primary action button using exported brand, radius, and shadow tokens. |
| Website | surfaceCard | rounded-md bg-surface-base text-text-primary border border-border-subtle shadow-sm p-6 | Default surface/card treatment for high-visibility content areas. |
| Website | inputField | rounded-sm border border-border-subtle bg-surface-base text-text-primary px-3 py-2 focus:outline-none focus:ring-2 focus:ring-focus-ring | Base text input treatment aligned to the exported radius, border, and focus tokens. |
| App / Portal | buttonPrimary | inline-flex items-center justify-center gap-2 rounded-button bg-brand-primary text-text-inverse shadow-sm px-4 py-2 font-semibold transition-colors | Primary action button using exported brand, radius, and shadow tokens. |
| App / Portal | surfaceCard | rounded-md bg-surface-base text-text-primary border border-border-subtle shadow-sm p-6 | Default surface/card treatment for high-visibility content areas. |
| App / Portal | inputField | rounded-button border border-border-subtle bg-surface-base text-text-primary px-3 py-2 focus:outline-none focus:ring-2 focus:ring-focus-ring | Base text input treatment aligned to the exported radius, border, and focus tokens. |