---
name: "Notion"
mode: "light"
---
# Notion
## Visual theme and atmosphere
Approachable, warm, playfully colorful, and flat.
Warm paper notebook under afternoon sun — multi-color accent panels on paper canvas.
## Color palette and roles
- **Notion Blue (#0075de)**: Primary CTA fill, active nav accent.
- **Paper Warmth (#f6f5f4)**: Page canvas, hero background.
- **Pure White (#ffffff)**: Card surfaces, elevated panels.
- **Ink Black (#000000)**: Primary text, nav links, headings.
- **Marigold (#ffb110)**: Hero pill highlights, feature card background.
- **Coral (#f64932)**: Decorative card backgrounds.
## Typography rules
- **Display**: NotionInter, 700, 96px. Hero headlines.
- **Body**: NotionInter, 400, 16px. Primary sans-serif.
- **Editorial**: Lyon Text, 400, 18px. Editorial serif passages.
## Spacing and shape
- Base unit: 8px.
- Default gap: 16px.
- Card padding: 24px.
- Section padding: 80px.
- Card corners: 12px.
- Control corners: 8px.
- Pills: 9999px.
## Motion
Use restrained motion. Fast feedback lasts 140ms; composed transitions last 320ms; easing is cubic-bezier(0.16, 1, 0.3, 1).
## Guardrails
- Use #f6f5f4 as the page canvas and #ffffff for card surfaces.
- Reserve #0075de for the single primary action per screen.
- Do not use pure white as the page background.
- Do not add shadows to content cards.
---
name: "Notion"
mode: "light"
---
# Notion
## Visual theme and atmosphere
Approachable, warm, playfully colorful, and flat.
Warm paper notebook under afternoon sun — multi-color accent panels on paper canvas.
## Color palette and roles
- **Notion Blue (#0075de)**: Primary CTA fill, active nav accent.
- **Paper Warmth (#f6f5f4)**: Page canvas, hero background.
- **Pure White (#ffffff)**: Card surfaces, elevated panels.
- **Ink Black (#000000)**: Primary text, nav links, headings.
- **Marigold (#ffb110)**: Hero pill highlights, feature card background.
- **Coral (#f64932)**: Decorative card backgrounds.
## Typography rules
- **Display**: NotionInter, 700, 96px. Hero headlines.
- **Body**: NotionInter, 400, 16px. Primary sans-serif.
- **Editorial**: Lyon Text, 400, 18px. Editorial serif passages.
## Spacing and shape
- Base unit: 8px.
- Default gap: 16px.
- Card padding: 24px.
- Section padding: 80px.
- Card corners: 12px.
- Control corners: 8px.
- Pills: 9999px.
## Motion
Use restrained motion. Fast feedback lasts 140ms; composed transitions last 320ms; easing is cubic-bezier(0.16, 1, 0.3, 1).
## Guardrails
- Use #f6f5f4 as the page canvas and #ffffff for card surfaces.
- Reserve #0075de for the single primary action per screen.
- Do not use pure white as the page background.
- Do not add shadows to content cards.
---
name: "Notion"
mode: "light"
---
# Notion
## Visual theme and atmosphere
Approachable, warm, playfully colorful, and flat.
Warm paper notebook under afternoon sun — multi-color accent panels on paper canvas.
## Color palette and roles
- **Notion Blue (#0075de)**: Primary CTA fill, active nav accent.
- **Paper Warmth (#f6f5f4)**: Page canvas, hero background.
- **Pure White (#ffffff)**: Card surfaces, elevated panels.
- **Ink Black (#000000)**: Primary text, nav links, headings.
- **Marigold (#ffb110)**: Hero pill highlights, feature card background.
- **Coral (#f64932)**: Decorative card backgrounds.
## Typography rules
- **Display**: NotionInter, 700, 96px. Hero headlines.
- **Body**: NotionInter, 400, 16px. Primary sans-serif.
- **Editorial**: Lyon Text, 400, 18px. Editorial serif passages.
## Spacing and shape
- Base unit: 8px.
- Default gap: 16px.
- Card padding: 24px.
- Section padding: 80px.
- Card corners: 12px.
- Control corners: 8px.
- Pills: 9999px.
## Motion
Use restrained motion. Fast feedback lasts 140ms; composed transitions last 320ms; easing is cubic-bezier(0.16, 1, 0.3, 1).
## Guardrails
- Use #f6f5f4 as the page canvas and #ffffff for card surfaces.
- Reserve #0075de for the single primary action per screen.
- Do not use pure white as the page background.
- Do not add shadows to content cards.
---
name: "Notion"
mode: "light"
---
# Notion
## Visual theme and atmosphere
Approachable, warm, playfully colorful, and flat.
Warm paper notebook under afternoon sun — multi-color accent panels on paper canvas.
## Color palette and roles
- **Notion Blue (#0075de)**: Primary CTA fill, active nav accent.
- **Paper Warmth (#f6f5f4)**: Page canvas, hero background.
- **Pure White (#ffffff)**: Card surfaces, elevated panels.
- **Ink Black (#000000)**: Primary text, nav links, headings.
- **Marigold (#ffb110)**: Hero pill highlights, feature card background.
- **Coral (#f64932)**: Decorative card backgrounds.
## Typography rules
- **Display**: NotionInter, 700, 96px. Hero headlines.
- **Body**: NotionInter, 400, 16px. Primary sans-serif.
- **Editorial**: Lyon Text, 400, 18px. Editorial serif passages.
## Spacing and shape
- Base unit: 8px.
- Default gap: 16px.
- Card padding: 24px.
- Section padding: 80px.
- Card corners: 12px.
- Control corners: 8px.
- Pills: 9999px.
## Motion
Use restrained motion. Fast feedback lasts 140ms; composed transitions last 320ms; easing is cubic-bezier(0.16, 1, 0.3, 1).
## Guardrails
- Use #f6f5f4 as the page canvas and #ffffff for card surfaces.
- Reserve #0075de for the single primary action per screen.
- Do not use pure white as the page background.
- Do not add shadows to content cards.
---
name: "Notion"
mode: "light"
---
# Notion
## Visual theme and atmosphere
Approachable, warm, playfully colorful, and flat.
Warm paper notebook under afternoon sun — multi-color accent panels on paper canvas.
## Color palette and roles
- **Notion Blue (#0075de)**: Primary CTA fill, active nav accent.
- **Paper Warmth (#f6f5f4)**: Page canvas, hero background.
- **Pure White (#ffffff)**: Card surfaces, elevated panels.
- **Ink Black (#000000)**: Primary text, nav links, headings.
- **Marigold (#ffb110)**: Hero pill highlights, feature card background.
- **Coral (#f64932)**: Decorative card backgrounds.
## Typography rules
- **Display**: NotionInter, 700, 96px. Hero headlines.
- **Body**: NotionInter, 400, 16px. Primary sans-serif.
- **Editorial**: Lyon Text, 400, 18px. Editorial serif passages.
## Spacing and shape
- Base unit: 8px.
- Default gap: 16px.
- Card padding: 24px.
- Section padding: 80px.
- Card corners: 12px.
- Control corners: 8px.
- Pills: 9999px.
## Motion
Use restrained motion. Fast feedback lasts 140ms; composed transitions last 320ms; easing is cubic-bezier(0.16, 1, 0.3, 1).
## Guardrails
- Use #f6f5f4 as the page canvas and #ffffff for card surfaces.
- Reserve #0075de for the single primary action per screen.
- Do not use pure white as the page background.
- Do not add shadows to content cards.
