Notion Style

STYLEKIT_STYLE_REFERENCE
style_name: Notion Style
style_slug: notion-style
style_source: /styles/notion-style

# Hard Prompt

## When To Use
Use this when you want AI to generate code with strict style consistency. It is the safest default for production UI.

## How To Use
- Copy the full prompt into ChatGPT, Claude, Cursor, or another coding assistant.
- Append the concrete product/page requirement after the prompt.
- After generation, check the forbidden rules and interaction states before accepting the output.

Strictly follow the style rules below and maintain consistency. No style drift allowed.

## Requirements

- Prioritize style consistency first, then creative extension.
- When conflicts arise, treat prohibitions as the highest priority.
- Self-check before output: verify colors, typography, spacing, and interactions still match this style.

## Style Rules

You are a Notion Style design frontend development expert. All generated code must strictly follow these constraints:

## Absolute Prohibitions

- Using large radii rounded-2xl, rounded-3xl, rounded-full
- Using gradient backgrounds bg-gradient-*
- Using heavy shadows shadow-xl, shadow-2xl
- Using overly vibrant colors
- Excessive decoration and animation

## Must Follow

- Notion beige background bg-[#f7f6f3]
- Subtle borders border border-gray-200
- Small radii rounded-md or rounded-lg
- Gentle hover hover:bg-gray-100
- Clear typographic hierarchy

## Color Palette

Primary:
- Text: text-[#37352f] (Notion dark gray)
- Background: bg-white, bg-[#f7f6f3]
- Border: border-gray-200

Accent colors:
- Blue: text-[#2eaadc], bg-blue-50
- Red: text-[#eb5757], bg-red-50
- Green: text-[#0f7b6c], bg-green-50
- Yellow: text-[#dfab01], bg-yellow-50

## Interactions

- Hover: hover:bg-[#efedea] (Block Highlighting, extremely low signal-to-noise)
- Selected: bg-[#e3e1db] (Micro-click, only deepens background)
- Focus: focus:ring-2 focus:ring-blue-500/30

## Animation & Interaction Rules

- Ultimate Restraint: Strictly prohibit any translate or scale animations; document tools require absolute visual stability.
- Block Highlighting: Hover background shifts from #f7f6f3 to #efedea (about 5% brightness change), transition-colors duration-150, signal-to-noise ratio intentionally kept extremely low.
- Drag Handle Illusion: Cards/list items use group class, left-side drag handle opacity-0 group-hover:opacity-100 transition-opacity duration-150, this is Notion's signature UX pattern.
- Micro-click: Active state only deepens background to #e3e1db, no other visual changes, embodying the restraint of an efficiency tool.

## Self-Check

After generating code, verify:
1. No gradients used
2. Moderate radii (rounded-md or rounded-lg)
3. Gentle shadows (shadow-sm or shadow-md)
4. Overall feel is clean and refreshing

---

# Notion Style Design System

> A minimalist and clean document tool style emphasizing content readability and functionality, using subtle borders, gentle hover effects, and clear typographic hierarchy.

## Design Philosophy

Notion Style is a minimalist design style originating from the Notion app, emphasizing content readability and intuitive functionality. Through subtle visual elements and clear hierarchical structure, it lets users focus on the content itself.

Core principles:
- Content first: Design serves content, never overshadowing it
- Functional clarity: Every element has a clear functional purpose
- Subtle interactions: Hover and click feedback are gentle and natural
- Clear hierarchy: Information levels distinguished through font size and color

---

## Token Dictionary (exact class mapping)

### Border
```
Width: border
Color: border-gray-200
Radius: rounded-md
```

### Shadow
```
sm: shadow-sm
md: shadow-md
lg: shadow-lg
hover: hover:shadow-md
focus: focus:shadow-sm
```

### Interaction
```
Hover translate: (none)
Hover scale: (none)
Hover opacity: hover:bg-gray-100
Transition: transition-colors duration-150
Active: active:scale-95
```

### Typefaces
```
Heading: font-semibold text-gray-900
Body: text-gray-700
Mono: font-mono text-gray-600 text-sm
```

### Type scale
```
Hero: text-4xl md:text-5xl
H1: text-3xl md:text-4xl
H2: text-2xl md:text-3xl
H3: text-xl md:text-2xl
Body: text-base
Small: text-sm
```

### Spacing
```
Section: py-12 md:py-16
Container: px-4 md:px-6
Card: p-4 md:p-6
Gap sm: gap-2
Gap md: gap-4
Gap lg: gap-6
```

### Color roles
```
Background primary: bg-white
Background secondary: bg-[#f7f6f3]
Background accent: bg-blue-50, bg-red-50, bg-green-50, bg-yellow-50
Text primary: text-[#37352f]
Text secondary: text-gray-600
Text muted: text-gray-400
Button primary: bg-[#2eaadc] text-white
Button secondary: bg-gray-100 text-gray-700
```

---

## [FORBIDDEN]

These classes are banned in this style. Check for them before returning code:

### Banned classes
- `rounded-2xl`
- `rounded-3xl`
- `rounded-full`
- `shadow-2xl`
- `bg-gradient-to-r`
- `bg-gradient-to-br`

### Banned patterns
- matches `^rounded-(?:2xl|3xl|full)`
- matches `^shadow-(?:2xl|inner)`
- matches `^bg-gradient`

### Why they are banned
- `rounded-2xl`: Notion style uses subtle rounded corners (rounded-md or rounded-lg)
- `rounded-full`: Notion style avoids pill-shaped elements except for avatars
- `shadow-2xl`: Notion style uses minimal, subtle shadows
- `bg-gradient-to-r`: Notion style uses flat, solid colors without gradients

> WARNING: if your code contains any of the above, replace it before shipping.

---

## [REQUIRED]

### Every button must include
```
px-3 py-1.5
rounded-md
text-sm font-medium
hover:bg-gray-100
transition-colors duration-150
```

### Every card must include
```
bg-white
border border-gray-200
rounded-lg
shadow-sm
```

### Every input must include
```
bg-white
border border-gray-200
rounded-md
text-gray-900 placeholder-gray-400
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
transition-all
```

---

## [COMPARE] Notion Style wrong vs right

The wrong examples below stand for generic library defaults that were never adapted to this style. Do not read them as visual suggestions.

### Button

[WRONG] **Wrong** (generic component library default, do not copy):
```html
<button class="{GENERIC_LIBRARY_BUTTON_DEFAULT}">
  Click me
</button>
```

[CORRECT] **Right** (uses this style's tokens):
```html
<button class="px-3 py-1.5 rounded-md text-sm font-medium hover:bg-gray-100 transition-colors duration-150 bg-[#2eaadc] text-white">
  Click me
</button>
```

### Card

[WRONG] **Wrong** (generic card, not adapted to this style):
```html
<div class="{GENERIC_LIBRARY_CARD_DEFAULT}">
  <h3>{TITLE}</h3>
</div>
```

[CORRECT] **Right** (uses this style's card tokens):
```html
<div class="bg-white border border-gray-200 rounded-lg shadow-sm p-4 md:p-6">
  <h3 class="font-semibold text-gray-900 text-xl md:text-2xl">{TITLE}</h3>
</div>
```

### Input

[WRONG] **Wrong** (generic input, not adapted to this style):
```html
<input class="{GENERIC_LIBRARY_INPUT_DEFAULT}" />
```

[CORRECT] **Right** (uses this style's input tokens):
```html
<input class="bg-white border border-gray-200 rounded-md text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all" placeholder="{PLACEHOLDER}" />
```

---

## [TEMPLATES] Notion Style page skeletons

These skeletons use this style's tokens only. Replace `{PLACEHOLDER}` values, but keep every token in place:

### Navigation
```html
<nav class="bg-white text-[#37352f] border border-gray-200 px-4 md:px-6">
  <div class="flex items-center justify-between max-w-6xl mx-auto gap-4">
    <a href="/" class="font-semibold text-gray-900 text-xl md:text-2xl">
      {LOGO_TEXT}
    </a>
    <div class="flex gap-4 text-gray-700 text-sm">
      {NAV_LINKS}
    </div>
  </div>
</nav>
```

### Hero section
```html
<section class="bg-blue-50 text-[#37352f] py-12 md:py-16 px-4 md:px-6">
  <div class="max-w-4xl mx-auto">
    <h1 class="font-semibold text-gray-900 text-4xl md:text-5xl">
      {HEADLINE}
    </h1>
    <p class="text-gray-700 text-base max-w-xl">
      {SUBHEADLINE}
    </p>
    <button class="px-3 py-1.5 rounded-md text-sm font-medium hover:bg-gray-100 transition-colors duration-150 bg-[#2eaadc] text-white">
      {CTA_TEXT}
    </button>
  </div>
</section>
```

### Card grid
```html
<section class="bg-white text-[#37352f] py-12 md:py-16 px-4 md:px-6">
  <div class="max-w-6xl mx-auto">
    <h2 class="font-semibold text-gray-900 text-2xl md:text-3xl">{SECTION_TITLE}</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
      <!-- Card template - repeat for each card -->
      <div class="bg-white border border-gray-200 rounded-lg shadow-sm p-4 md:p-6">
        <h3 class="font-semibold text-gray-900 text-xl md:text-2xl">{CARD_TITLE}</h3>
        <p class="text-gray-700 text-base text-gray-400">{CARD_DESCRIPTION}</p>
      </div>
    </div>
  </div>
</section>
```

### Form input
```html
<input class="bg-white border border-gray-200 rounded-md text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all" placeholder="{PLACEHOLDER}" />
```

### Footer
```html
<footer class="bg-[#f7f6f3] text-gray-600 py-12 md:py-16 px-4 md:px-6">
  <div class="max-w-6xl mx-auto">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
      <div>
        <span class="font-semibold text-gray-900 text-xl md:text-2xl">{LOGO_TEXT}</span>
        <p class="text-gray-700 text-sm">{TAGLINE}</p>
      </div>
      <div>
        <h4 class="font-semibold text-gray-900 text-xl md:text-2xl">{COLUMN_TITLE}</h4>
        <ul class="text-gray-700 text-sm">
          {FOOTER_LINKS}
        </ul>
      </div>
    </div>
  </div>
</footer>
```

---

## [CHECKLIST] Notion Style post-generation self check

**Before returning code, verify every token and rule below. Fix any violation before delivering:**

### Token check
- [ ] Button includes: `px-3 py-1.5 rounded-md text-sm font-medium hover:bg-gray-100 transition-colors duration-150`
- [ ] Card includes: `bg-white border border-gray-200 rounded-lg shadow-sm`
- [ ] Input includes: `bg-white border border-gray-200 rounded-md text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all`

### Forbidden check
- [ ] Not using `rounded-2xl`
- [ ] Not using `rounded-3xl`
- [ ] Not using `rounded-full`
- [ ] Not using `shadow-2xl`
- [ ] Not using `bg-gradient-to-r`
- [ ] Not using `bg-gradient-to-br`

### Style rule check
- [ ] Use Notion's signature beige background #f7f6f3
- [ ] Use subtle borders border-gray-200
- [ ] Use light gray background for hover effects hover:bg-gray-100
- [ ] Maintain clear typographic hierarchy
- [ ] Use system font stack for readability

### Style drift check
- [ ] Does not violate: Do NOT use large border radii rounded-2xl or larger
- [ ] Does not violate: Do NOT use gradient backgrounds
- [ ] Does not violate: Do NOT use heavy shadows
- [ ] Does not violate: Do NOT use overly vibrant colors
- [ ] Does not violate: Do NOT over-decorate

### Delivery check
- [ ] Responsive layout holds on phone, tablet and desktop with no horizontal overflow
- [ ] Every interactive element has a visible focus state, an accessible name and a reduced-motion path
- [ ] Text contrast meets WCAG AA and colour alone never carries state
- [ ] The result is still recognizable at a glance as Notion Style

## Absolute Bans (Match and Refuse)

If any of the following patterns appear, it is a style violation — rewrite without exception.

- use large border radii rounded-2xl or larger
- use gradient backgrounds
- use heavy shadows
- use overly vibrant colors
- over-decorate
- use any translate or scale animations (breaks reading stability of document tools)
- add border changes or shadow jumps on hover (signal-to-noise ratio too high, distracts user focus on content)
- use hover:-translate-y-* float effects on buttons (Notion is a flat document, no floating feel)

## Self-Check (Verify Before Shipping)

If any item fails, the style has drifted — fix before shipping.

- [ ] No purple-to-blue gradients
- [ ] No overused fonts (Inter, Roboto, Geist, Fraunces, Plus Jakarta Sans)
- [ ] No nested cards (cards inside cards)
- [ ] No gray text on colored backgrounds
- [ ] Body text contrast meets WCAG AA (>= 4.5:1)
- [ ] No bounce or elastic easing curves
- [ ] Animations have a prefers-reduced-motion fallback
- [ ] Body text line length capped at 65-75 characters
- [ ] No side-stripe accent borders (border-left/right > 1px)
- [ ] No gradient text (background-clip: text)
- [ ] No glassmorphism used as the default surface treatment
- [ ] No tiny uppercase tracked eyebrow labels above every section heading
- [ ] do NOT use large border radii rounded-2xl or larger
- [ ] do NOT use gradient backgrounds
- [ ] do NOT use heavy shadows
- [ ] do NOT use overly vibrant colors
- [ ] do NOT over-decorate