Minimalist Notion × OpenAI UI
Build crisp, low-noise product UI with strong hierarchy and operator-grade usability.
Core Principles
- Prioritize clarity over decoration.
- Keep layout breathable but dense enough for serious work.
- Use typography, spacing, and contrast as the primary hierarchy tools.
- Avoid visual noise (heavy shadows, flashy gradients, random color accents).
- Every element must justify its presence.
Workflow
- Define screen intent in one sentence.
- Choose one primary user action.
- Build skeleton with spacing + typography first (no color dependency).
- Add semantic color only for state/meaning.
- Run the checklist in
references/qa-checklist.md.
Mandatory Style Constraints
- Max 1 accent color per screen.
- Border radius: 8–12px (consistent scale).
- Shadows: subtle only; no layered “dribbble” effects.
- Animation: 120–180ms, ease-out, functional only.
- Empty states must suggest a next action.
- Error states must include fix guidance.
Use These References
- Token system:
references/design-tokens.md - Layout and spacing logic:
references/layout-patterns.md - Components and behavior:
references/component-specs.md - Acceptance gate:
references/qa-checklist.md
Output Contract (when generating UI specs/code)
Always produce:
- Intent: what this screen optimizes for
- Structure: zones/regions and hierarchy
- Tokens used: type scale, spacing, colors
- Interaction states: hover/focus/disabled/loading/error
- Accessibility: keyboard + contrast notes
- Implementation notes: concrete Tailwind/CSS/React guidance
Keep output implementation-ready and concise.