Fast to start
Hits a ceiling when ideas need to connect.
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
Surface Hierarchy
Use surface colors to separate structure before adding borders, shadows, or extra copy. The second surface shade is for passive information inside panels: visible enough to scan, quiet enough that it does not look clickable.
Canvas
Base workspace
Use --c-canvas for app backgrounds, modal columns, and breathing room around active surfaces.
Panel
Primary container
Use --c-panel for dialogs, cards, toolbars, and areas that hold controls or selected content.
Second surface
Passive inset
Use a subtle mix of --c-canvas over --c-panel for counts, local contents, empty states, and beta notes.
Interactive
Hover surface
Use --c-hover only for hover, selected rows, or controls. If it changes on hover, it should be actionable.
Readability rule: headings and values use
--c-text-hi, body copy uses --c-text-md, and --c-text-lo is only for metadata or helper text. Avoid long paragraphs on low-contrast text, especially inside second-surface panels.
Passive information: use second surface, no hover state, no pointer cursor, and minimal border treatment.
Clickable rows/cards: use panel surface plus border, hover to
--c-hover, and a visible selected/accent state.Dense modals: alternate canvas, panel, and second surface instead of stacking multiple card-like boxes that all compete for attention.
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.
Canvas
Start creating
Built for makers
Smart connectors
Draw bezier connector lines between any two nodes. Arrows snap to anchor points and reroute when you move things around.
Free forever · No account · Works offline
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
Three variants: primary (terracotta fill), ghost (panel border), and tertiary (quiet bordered utility). 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. Utility actions like refresh should still look like controls, not text links.
Primary
Ghost
Tertiary utility
Use tertiary buttons for: low-risk utilities such as refresh, create local workspace, sort, filter, or reveal more detail.
Keep them readable: pair a small icon with a short verb label, use
--c-text-md by default, and raise to --c-text-hi on hover.Avoid text-link buttons: reserve plain text actions for dismissive secondary choices like "Keep local-only", not core utilities.
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 and for clickable/selectable rows. Panel background with border, hover lifts to --c-hover and accent border. Do not use hover-card styling for passive status, empty states, beta notes, or local contents; those should use the second surface shade instead.
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
Comparison pattern
Use this for landing-page comparisons where DevBoard is positioned between a basic notes file and heavier project tools. Desktop uses an open matrix. Mobile becomes two compact alternatives plus one full-width DevBoard recommendation.
More than a notepad. Less fuss than a system.
The usual choice is a quick note file or a full workspace. DevBoard sits in the middle.
How it compares
DevBoard
Best fit
A notes file
eg. Apple Notes
Obsidian
Linked notes
Notion
Full workspace
Quick notes without an account
✓
✓
✓
Account
A visual canvas beside your notes
✓
-
Plugin
Limited
Simple enough to just start writing
✓
✓
Steep
-
The usual choice is a quick note file or a full workspace. DevBoard sits in the middle.
Powerful once set up
Often more system than the task needed.
Structure on demand.
Write quickly. Link ideas when they connect. Open the canvas when a thought needs more room.
Keep comparison language plain. Prefer “A notes file” and “A project workspace” over technical category labels. Use green only for the positive DevBoard recommendation; keep alternatives neutral.
Components
Inputs
Panel background, border that highlights to --c-accent on focus. Used for board title, search, dialogs. Default radius is 8px so fields align with default button corners.
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.