W
Workspace
Search
Favorites
📐 Design System ▶
🎯 Product Roadmap ▶
📋 Meeting Notes ▶
Private
📝 Quick Note
📚 Reading List ▶
✅ Tasks
🗂️ Archive ▶
New page
Change cover Reposition
Workspace / Favorites / Design System
📐
Design System
⠇

A comprehensive guide to our design tokens, components, and patterns. This document serves as the single source of truth for the product team.

⠇

Getting Started

⠇

All components use the --accent token for interactive elements. Typography follows a system font stack for native rendering performance.

⠇
💡 Tip: Use slash commands to quickly insert any block type. Type / to get started.
⠇

Color Tokens

⠇
▶ Primary palette
Background #ffffff, Sidebar #f7f6f3, Text #37352f, Accent #2383e2
⠇
▶ Semantic tokens
Success #4daa57, Warning #cb912f, Error #e03e3e, Info #2383e2
⠇
:root { --bg: #ffffff; --text: #37352f; --accent: #2383e2; }
⠇

Type '/' for commands...

Basic blocks
Aa
Text Just start writing with plain text.
H1
Heading 1 Big section heading.
H2
Heading 2 Medium section heading.
☐
To-do list Track tasks with a to-do list.
▶
Toggle list Toggles can hide and show content.

AI Request Prompt

Design a productivity app page in Notion style — minimal block-based editor UI with sidebar navigation.

COLOR TOKENS:
--bg: #ffffff
--sidebar-bg: #f7f6f3
--sidebar-hover: #e8e7e4
--text: #37352f
--text-muted: #787774
--accent: #2383e2
--accent-soft: #e8f0fe
--border: #e9e9e7
--block-hover: #f1f1ef
--code-bg: #f7f6f3
No other colors. Use rgba() variants of these tokens for transparency where needed.

TYPOGRAPHY:
Font stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif
Code font: "SFMono-Regular", Menlo, Consolas, monospace
Page title: 40px, font-weight 700, line-height 1.2
H1: 1.875em, font-weight 700
H2: 1.5em, font-weight 700
H3: 1.25em, font-weight 700
Body: 16px, line-height 1.5
Sidebar: 14px for items, 13px for search, 11px uppercase for section labels
Code blocks: 14px, line-height 1.6
Inline code: 0.9em, color #eb5757, background var(--code-bg), padding 2px 5px, border-radius 3px
-webkit-font-smoothing: antialiased on body

SIDEBAR (240px wide):
- Background: var(--sidebar-bg), border-right 1px solid var(--border)
- Workspace header: flex row, 22px icon (rounded 4px, gradient accent bg, white letter), font-weight 600
- Search bar: padding 6px 10px, border-radius 4px, color var(--text-muted), flex row with search icon
- Section labels: 11px, uppercase, letter-spacing 0.04em, font-weight 600, color var(--text-muted)
- Page items: padding 4px 14px, border-radius 4px, 16px emoji icon, hover background var(--sidebar-hover)
- Active item: background var(--sidebar-hover), color var(--text), font-weight 500
- Toggle arrows: 10px, opacity 0, show on item hover, transition 0.12s
- New page button: at sidebar bottom, border-top 1px solid var(--border), plus icon + text
- Page tree supports nested indentation (padding-left per level)

COVER IMAGE:
- Full-width, height 180px, gradient or image background
- On hover: show "Change cover" and "Reposition" buttons (absolute bottom-right)
- Cover buttons: padding 4px 10px, background rgba(0,0,0,0.4), color white, font-size 12px, border-radius 4px

PAGE HEADER:
- Max-width 720px, centered, padding 0 96px
- Page icon: 72px emoji, margin-top -36px (overlaps cover), hover scale 1.05
- Page title: 40px, font-weight 700, contenteditable appearance

BREADCRUMB:
- Below cover, padding 10px 96px, max-width 720px centered
- Font-size 13px, color var(--text-muted), separator "/" in #c8c7c5
- Items are clickable, hover color var(--text)

BLOCK SYSTEM:
- Each block: position relative, padding 3px 0, border-radius 3px
- Hover state: background var(--block-hover) with subtle transition 0.1s
- Drag handle: absolute left -24px, vertically centered, content "⁞" (6 dots), color #c3c2bf, opacity 0 on default, 1 on block hover, cursor grab, border-radius 3px
- Paragraph blocks: font-size 16px, line-height 1.5, padding 3px 2px
- Placeholder text: color #c3c2bf, shows "Type '/' for commands..."

CALLOUT BLOCK:
- Flex row, gap 8px, padding 16px 16px 16px 12px
- Background var(--code-bg), border-radius 4px
- Left emoji icon 20px, content text at 16px line-height 1.5

TOGGLE BLOCK:
- Clickable header: flex row, triangle arrow (10px, rotate 90deg when open)
- Arrow hover: background var(--sidebar-hover), border-radius 3px
- Content: padding-left 26px, hidden by default, shown on open state

DIVIDER BLOCK:
- Height 1px, background var(--border), margin 12px 0

CODE BLOCK:
- Background var(--code-bg), border-radius 4px, padding 16px
- Font-family monospace stack, font-size 14px, line-height 1.6, overflow-x auto

SLASH COMMAND POPUP:
- Width 320px, background #fff, border 1px solid var(--border), border-radius 6px
- Box-shadow: 0 0 0 1px rgba(15,15,15,0.05), 0 3px 6px rgba(15,15,15,0.1), 0 9px 24px rgba(15,15,15,0.2)
- Section header: 11px uppercase, font-weight 600, color var(--text-muted)
- Items: flex row, 46x46px icon box (border 1px solid var(--border), border-radius 4px, centered content), title 14px font-weight 500, description 12px color var(--text-muted)
- Selected/hover item: background var(--block-hover)
- Entrance animation: fadeUp from translateY(4px) opacity 0, 0.15s ease

LAYOUT:
- App frame: flex row, max-width 1200px centered, border-radius 12px, border 1px solid var(--border)
- Box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 12px 40px rgba(0,0,0,0.06)
- Content area: flex 1, overflow-y auto
- Content max-width: 720px centered with padding 0 96px
- Entrance animation: fadeUp from translateY(16px) opacity 0, 0.6s ease

MOTION:
- App frame: fadeUp 0.6s ease (translateY 16px to 0, opacity 0 to 1)
- Slash popup: popIn 0.15s ease (translateY 4px to 0, opacity 0 to 1)
- Page icon: scale hover 0.15s transition
- Sidebar items: background transition 0.12s
- Toggle arrow: transform rotate transition 0.15s
- Block hover: background transition 0.1s
- No scroll-triggered animations, no parallax, no 3D transforms

RESPONSIVE:
- Below 900px: stack sidebar on top (full width, max-height 200px), content padding 0 24px, hide block handles
- Below 600px: page title 28px, page icon 52px (margin-top -26px), cover height 120px, content padding 0 16px

FORBIDDEN:
- No colored backgrounds outside the token system
- No rounded pill shapes (border-radius max 12px on containers, 6px on popups, 4px on items)
- No heavy borders — all borders 1px solid var(--border) or lighter
- No serif or decorative fonts — system font stack only
- No gradients on UI elements (cover image gradient is the only exception)
- No drop shadows heavier than the specified values
- No bold/saturated accent colors — blue #2383e2 is the only accent

OUTPUT:
1. Single HTML file with inline CSS
2. Two-panel layout: sidebar + main content area with cover image
3. Block-based content with drag handles, callouts, toggles, code blocks, dividers
4. Slash command popup overlay with block type options
5. Breadcrumb navigation with workspace path
6. All color tokens as CSS custom properties in :root
7. System font stack, no external font dependencies