Overview
Build a system that feels clear, modular, and confidently helpful. A productivity marketing system that pairs a deep midnight hero with bright product canvases, periwinkle actions, and white modular cards.
Categories
Sections
Workflow Collections
Design Analysis
Notion Home design analysis
Build a system that feels clear, modular, and confidently helpful. A productivity marketing system that pairs a deep midnight hero with bright product canvases, periwinkle actions, and white modular cards.
Image Direction
Use large workspace canvases, assistant interactions, and crisp white product frames. Product captures should look open, understandable, and already useful.
Colors
The dark blue stage should be concentrated in the hero and a few support moments. Most of the site should return to soft canvas backgrounds, white surfaces, and obvious black text.
Typography
Use a strong modern sans with almost no ornament. The voice should feel capable and friendly, not luxurious or hyper-technical.
Design.md
System Overview
Core identity and authoring metadata from the refto.one design model.
Midnight Assistant Canvas
A productivity marketing system that pairs a deep midnight hero with bright product canvases, periwinkle actions, and white modular cards.
clear, modular, and quietly optimistic
Primary mode: lightproductivity software marketingmarketing-product
Theme
Fields outside the primary renderer remain visible here as structured fallback content.
Visual atmosphere
Summary
clear, modular, and quietly optimistic
Density
4
Variance
3
Motion
2
Signals
midnight hero · periwinkle buttons · white card grids · clean product canvases
Colors
Primitive palettes and resolved token colors for the active preview mode.
Palette colors
Work Blue
#4B61FF
Midnight Hero
#0D1458
Paper White
#FFFFFF
Soft Canvas
#F7F5F2
Warm Border
#E7E0D6
Ink Text
#111111
Sun Wash
#F7C85E
Usage rules
Keep the dramatic midnight treatment mostly in the hero and reset to paper lightness quickly.
Use periwinkle on buttons and path graphics, not as a general body copy color.
White modules should stay bright and uncluttered so the product feels approachable.
Token Spacing
Spacing scales rendered as tokens with a simple length specimen.
xs
6px
sm
8px
md
16px
lg
24px
section
88px
Token Radii
Corner radii tokens with a live surface sample.
sm
8px
md
14px
lg
24px
Typography Families
Font families from the current design YAML, including fallback stacks and usage character.
Display
Inter
friendly but strong product headline voice
Body
Inter
readable productivity copy voice
Mono
IBM Plex Mono
tiny metadata and utility label voice
Typography Scale
Top-level typography scale rendered as live text specimens.
Display
4.4rem/—
Display
H2
2.5rem/—
H2
Body
1rem/—
Body
Caption
0.8125rem/—
Caption
Typography Rules
Fields outside the primary renderer remain visible here as structured fallback content.
Rules
Keep the hierarchy straightforward and product-oriented. · Use high headline weight with generous whitespace rather than decorative effects. · Small labels can feel product-native, but body copy should remain human and warm.
Motion
Motion tokens rendered as resolved values for timing and personality.
Duration
160ms-220ms
Easing
cubic-bezier(.2,.8,.2,1)
Spring
stiffness 100, damping 18
Motion
Resolved motion token values.
| Property | Value |
|---|---|
duration | 160ms-220ms |
easing | cubic-bezier(.2,.8,.2,1) |
spring | stiffness 100, damping 18 |
Layout Principles
Open with a dark immersive hero, then transition into bright modular product stories.
Use grids of cards and product canvases to make the system feel scalable and organized.
Balance large plainspoken statements with supportive interaction previews.
Component Preview
Low-complexity component tokens rendered as design-system specimens.
Buttons primary
Base Attributes
Background
#4B61FF
Text
#FFFFFF
Border
1px solid #4B61FF
Radius
14px
Padding
14px 24px
Min height
44px
Shadow
none
Typography
body
Buttons secondary
Base Attributes
Background
#3147C8
Text
#FFFFFF
Border
1px solid #3147C8
Radius
14px
Padding
14px 24px
Min height
44px
Shadow
none
Typography
body
Cards module
Feature Card
Component preview content
Base Attributes
Background
#FFFFFF
Text
#111111
Border
1px solid #E7E0D6
Radius
24px
Padding
24px
Shadow
0 12px 30px rgba(17,17,17,0.05)
Cards hero canvas
Feature Card
Component preview content
Base Attributes
Background
#FFFFFF
Text
#111111
Border
1px solid rgba(231,224,214,0.65)
Radius
24px
Padding
24px
Shadow
0 18px 40px rgba(12,20,88,0.18)
Navigation item
OverviewFeaturesDocs
Base Attributes
Background
transparent
Text
#FFFFFF
Active text
#FFFFFF
Item padding
8px 10px
Item radius
8px
Badges status
Base Attributes
Background
#F7F5F2
Text
#111111
Border
1px solid #E7E0D6
Radius
999px
Padding
6px 12px
Shadow
none
Inputs field
Base Attributes
Background
#FFFFFF
Text
#111111
Border
1px solid #E7E0D6
Radius
14px
Padding
12px 16px
Min height
44px
Placeholder
rgba(17,17,17,0.45)
Image direction
Schema-agnostic optional blocks from the design YAML. New option keys render here automatically.
Role
load-bearing
Media types
- -product ui
- -card grid
- -workflow illustration
Subject patterns
- -workspace canvases, chat assistants, product cards, and path-like line graphics
Composition logic
- -Keep product captures large and centered within white frames.
- -Let colored support bands live under the product, not over the text.
Treatment rules
- -Preserve a clean paper look outside the hero.
- -Use the midnight color mostly as a framing device.
Generation cues
- -deep blue hero, clean white product cards, periwinkle call to actions
Avoid
- -No muddy beige overlays.
- -No thick shadows that make the cards look heavy.
Anti Patterns
Compact list of patterns the design system explicitly avoids.
- -Do not keep the entire site in dark mode after the hero.
- -Do not use low-contrast gray on white cards.
- -Do not turn the main call-to-actions into full pills.