Theme · Product · Beginner
Notion-style Docs Workspace
Notion-style docs = a workspace tree sidebar, a page with properties, a milestone checklist, and a callout on one calm page.
Tips
Copy the paper calm: no shadows, hairline rules, and a single quiet accent. It should feel like writing, not a dashboard.
See also
Build a Notion-style docs workspace called "Quill" for a product team's internal wiki.
STYLE
- Warm white canvas (#fbfbfa), near-black type (#37352f) — the classic Notion paper feel
- One muted accent (blue #2383e2) for links and active states
- System sans for everything; generous line-height; no shadows, hairline dividers
LAYOUT
- Left sidebar (#f7f6f3): workspace "Q Quill"; WORKSPACE tree - Product, Q3 planning (on), Engineering wiki, Hiring loop, Meeting notes
- Page: breadcrumb "Product / Q3 planning"; title "Q3 planning"; properties row (Status "In review" blue tag, Owner Priya, Due Sep 30)
- "Milestones" checklist: checked "Ship design tokens v2" (struck through), open "Migrate docs to the new editor"; tall adds open "Audit component coverage"
- Blue callout: "Note - Freeze scope after Sep 20 so QA gets a full regression week."
COMPONENTS
- Sidebar: workspace identity, page tree with active page
- Page: breadcrumb, large title, properties row with status tag, owner, due date
- Milestone checklist with real checked states; blue callout
INTERACTION
- Checkboxes toggle real states; done items strike through; the callout carries the accent.
TECHNICAL
- React, Tailwind CSS, shadcn/ui for sidebar and callout