StyleKit/Notion Style/Showcase

📝

Notion Style

A design system inspired by quiet productivity. Every block is a building unit. Every interaction is a gentle acknowledgment. Content first, always.

Created Feb 20, 2026Status PublishedCategory Design SystemVersion 1.0

Welcome to Notion Style

The block-based editor model

Every element in this design system is a discrete block. Hover any block to reveal the drag handle on the left. Blocks can be rearranged, nested, and transformed into different types without leaving the keyboard.

\u{1F4A1}

Hover any block to see the ⋮⋮ drag handle appear at opacity-100. This Drag Handle Illusion is Notion's signature interaction — present only when needed, invisible otherwise.

“The best interface is the one you don't notice. Notion's design achieves invisibility through restraint.”

\u26A0

Important

Never add translate or scale animations on hover or active states. The entire philosophy of Notion-style interaction relies on pure color shifts with no movement artifacts.

\u2705

Best Practice

Keep all interaction transitions at duration-150 for immediate, natural responsiveness. Longer transitions feel sluggish in a productivity tool.

typescriptBlock interaction pattern

// Drag handle: opacity 0 → 1 on block hover
<div className="group relative">
  <div
    className="absolute -left-5 top-2
      opacity-0 group-hover:opacity-100
      transition-opacity duration-150
      cursor-grab select-none text-[#37352f]/30"
  >
    ⋮⋮
  </div>
  <p
    className="hover:bg-[#efedea]
      active:bg-[#e3e1db]
      transition-colors duration-150
      rounded-md px-2"
  >
    Block content here
  </p>
</div>

Design principles

Block model — every element is a draggable, reorderable unit

Spatial memory — consistent layout prevents cognitive load

Progressive disclosure — complexity revealed only when needed

Instant feedback — 150ms is the maximum tolerable delay

Component Library

Interactive Notion-style database with checklist, table, and board views.

⋮⋮

Set up project structureSetup

⋮⋮

Design component libraryDesign

⋮⋮

Implement responsive layoutDev

⋮⋮

Write documentationDocs

⋮⋮

User testing roundQA

⋮⋮

Deploy to productionOps

Color System

Restrained and functional. Colors serve meaning, not decoration.

Text

#37352f

Background

#ffffff

Surface

#f7f6f3

Hover

#efedea

Active

#e3e1db

Blue

#2eaadc

Red

#eb5757

Teal

#0f7b6c

Text highlight colors

⋮⋮

Default

⋮⋮

Blue

⋮⋮

Red

⋮⋮

Teal

⋮⋮

Yellow

⋮⋮

Orange

⋮⋮

Pink

⋮⋮

Purple

Semantic usage

⋮⋮

BlueInfo callouts, links, primary actions, in-progress status

⋮⋮

RedError callouts, destructive actions, danger warnings

⋮⋮

TealSuccess callouts, completed status, positive confirmation

⋮⋮

YellowWarning callouts, pending states, caution indicators

Typography System

System font stack. Size and weight carry the entire visual hierarchy.

⋮⋮

h1Heading 1

The Block-Based Editor

text-3xl·font-bold

⋮⋮

h2Heading 2

Core Principles

text-2xl·font-semibold

⋮⋮

h3Heading 3

Interaction Physics

text-xl·font-semibold

⋮⋮

pBody

Content readability is the primary concern of every design decision made here.

text-base·font-normal

⋮⋮

smallCaption

Secondary context and metadata live at this scale with reduced opacity.

text-sm·font-normal

⋮⋮

tinyLabel

TAGS / STATUS / METADATA

text-xs·font-medium

Interaction Physics

Ultimate restraint. Zero translate. Zero scale. Color only.

Block Highlighting — hover each row

⋮⋮

Heading block

⋮⋮

Paragraph block

⋮⋮

List item block

⋮⋮

Callout block

⋮⋮

Toggle block

Button Variants

Inline Edit Fields

Page title

My first Notion page

Description

Click to add a description...

Design Rules

Guiding constraints that make Notion-style instantly recognizable.

Use system fonts exclusively. Size and weight are the only tools for establishing hierarchy — no font-family changes, no gradient text, no decorative lettering. Body text sits at text-[#37352f]/80 while secondary text uses text-[#37352f]/50.

✅

⋮⋮
Use Notion signature surface color #f7f6f3 for page background
⋮⋮
Subtle borders with border-gray-200 or low-opacity variants
⋮⋮
Hover background #efedea, active press background #e3e1db
⋮⋮
Maintain clear text hierarchy with size and opacity levels
⋮⋮
System font stack: -apple-system, BlinkMacSystemFont, Segoe UI
⋮⋮
Drag handle ⋮⋮ appears on block hover, opacity 0 to 100
⋮⋮
All transitions duration-150 for instant, natural responsiveness
⋮⋮
Keep corners small: rounded or rounded-md only
⋮⋮
Use semantic colors sparingly — blue for info, red for danger, teal for success

🚫

Don't

⋮⋮
Never use large corners rounded-2xl or larger
⋮⋮
Never use gradient backgrounds on content areas
⋮⋮
Never use heavy shadows (shadow-xl or shadow-2xl)
⋮⋮
Never use overly vivid or saturated accent colors
⋮⋮
Never apply translate or scale transforms on hover or active
⋮⋮
Never add border changes or shadow jumps on hover
⋮⋮
Never animate layout-affecting properties
⋮⋮
Never use decorative elements that compete with content

// Drag handle: opacity 0 → 1 on block hover <div className="group relative"> <div className="absolute -left-5 top-2 opacity-0 group-hover:opacity-100 transition-opacity duration-150 cursor-grab select-none text-[#37352f]/30" > ⋮⋮ </div> <p className="hover:bg-[#efedea] active:bg-[#e3e1db] transition-colors duration-150 rounded-md px-2" > Block content here </p> </div>