Design System

Reference for DevBoard's visual language — palette, type, and components. Use this when building the app UI to stay consistent with the landing pages.

Foundations

Color

Two modes — dark (default) and light — sharing the same warm earthy family. All values are CSS custom properties in site.css. Toggle via data-theme="light" on <html>. Never hardcode hex values in component CSS.

Dark (default)

Canvas#1c1916
Panel#242019
Hover#2d2820
Border#3c3529
Text hi#ece6dd
Text md#afa294
Text lo#8a7b6c
Accent#b87750
Accent 2#cc9468
Green#7aaa72
Yellow#e2be72

Light

Canvas#f6f1ea
Panel#ede7dd
Hover#e3dbd0
Border#cdc4b6
Text hi#28201a
Text md#6b5e52
Text lo#7a6b5a
Accent#a06038
Accent 2#b87848
Green#528a4a
Yellow#b8921e

Supporting Colors

Neutral and utility colors for shapes, strokes, and secondary elements. These pair with the main palette to provide contrast and visual distinction.

Dark Mode

White#e2e8f0
Dark#334155
Indigovar(--c-line)
Bright Green#22c55e

Usage: Shape fills (white), dark strokes, UI accents (indigo), alerts (green).

Light Mode

White#e2e8f0
Dark#334155
Indigovar(--c-line)
Bright Green#22c55e

Usage: Shape fills (white), dark strokes, UI accents (indigo), alerts (green).

Live preview — toggle mode to see both
Free & open source Bezier curves Smart anchors ⌘D

Text Color Hierarchy

Establish visual hierarchy and accessibility by using the text color tokens intentionally. Ensure adequate contrast on both light and dark backgrounds.

Dark Mode

Text hi#ece6dd
Heading text
Primary content
Text md#afa294
Body copy goes here with secondary labels
Text lo#8a7b6c
Helper text & metadata
Text off#4a3a28
Disabled state

Light Mode

Text hi#28201a
Heading text
Primary content
Text md#6b5e52
Body copy goes here with secondary labels
Text lo#7a6b5a
Helper text & metadata
Text off#bbb5af
Disabled state
Example: File explorer status message
assets/
Single-click to preview · double-click to place
Foundations

Typography

Plus Jakarta Sans across all weights. Headings use tight tracking (-0.02em); body is tracking-neutral. No italic — use weight contrast instead.

Display 3.4rem / 800 / -0.025em
Canvas
Heading 1 1.8rem / 700 / -0.02em
Start creating
Heading 2 1.4rem / 700 / -0.02em
Built for makers
Heading 3 1rem / 600 / -0.01em
Smart connectors
Body 0.85rem / 400 / 0
Draw bezier connector lines between any two nodes. Arrows snap to anchor points and reroute when you move things around.
Small / meta 0.72rem / 400–600 / 0
Free forever · No account · Works offline
Eyebrow 0.65rem / 600 / 0.1em / upper
All features

Visual Hierarchy

Structure → Plus Jakarta Sans
Interaction → Plus Jakarta Sans (buttons, labels, UI controls)
Data / Output → Monospace (timer display, code, numeric output)
Personality → Monospace (sparingly, for visual interest)
Foundations

Spacing

4px base unit. Most layout gaps are multiples of 4 or 8. Section padding is 72–80px vertically.

4px — icon gap, tight spacing
8px — pill/badge gap, card icon margin
12px — card padding (sm), eyebrow–heading gap
20px — card padding, button padding
28px — wrap horizontal padding, nav gap
48px — hero sub-section gap
80px — section vertical padding
Components

Buttons

Two variants: primary (terracotta fill) and ghost (panel border). Sizes: default and sm. Border-radius 8px for default, 6px for sm.

Buttons use font-family: inherit — they will always match the site font automatically.
Primary
Ghost
Mixed row (typical CTA)
Components

Badges & pills

Badges appear at the top of hero sections and sections to add a label. Pills tag feature categories inside feature strips.

Badge Free & open source Now in beta
Pills Bezier curves Smart anchors Arrowhead styles PNG / JPG
Components

Cards

Used in the feature grid. Panel background with border, hover lifts to --c-hover and accent border. Icon tile sits above title.

Infinite canvas

Pan with spacebar + drag or middle mouse. Pinch-to-zoom. Dot grid tracks your position.

Sticky notes

Place, drag, resize, double-click to edit. Great for brainstorming game mechanics or story beats.

Components

Inputs

Panel background, border that highlights to --c-accent on focus. Used for board title, search, dialogs.

Text input
Components

Keyboard

<kbd> elements for individual keys. Combine into a .kbd-row for shortcut listings.

V ⌘ ⇧ ⌥ ⌫ drag ↑↓←→
Select tool
V
Duplicate
⌘D
Group
⌘G
Undo
⌘Z
Components

Icons

Stroke-based SVG icons throughout. stroke-width: 1.75, stroke-linecap: round, stroke-linejoin: round. Size: 18px inside card icons, 14px inline, 16px in buttons. Color via currentColor so they inherit from parent.

Components

Panels & UI Elements

Floating panels, toolbars, and dialog components used throughout DevBoard.

Floating Toolbar (Sticky Color Picker)

Floating toolbar with text formatting (bold, italic, underline), bullet list toggle, font size selector, and color picker. Appears above selected sticky notes.

Shape Toolbar

Toolbar for editing shapes: shape type selector (with icon), fill color, and stroke color. Appears above selected shapes.

Modal / Welcome Dialog

Welcome to DevBoard

A thinking canvas for solo devs. Drop ideas, connect them, ship faster.

Sticky notes, shapes, text, connectors
Pan & zoom with keyboard + mouse

Modal dialog with title, description, feature list, and action button. Appears on first visit or logo click.

Color Swatch Grid

10-color palette grid for sticky notes and shapes: 7 soft pastels (Cream, Apricot, Mint, Rose, Lavender, Blue, Slate) + 3 richer accent colors (Gold, Rust, Forest).

Floating Top Bar

Top bar with editable board title, export button, and share button. Persists at the top of the canvas.