bd495be965
All checks were successful
Deploy to Production / Build and Deploy (push) Successful in 12s
- Sidebar: dynamic brand-accent colors, brainstorm section restyled - AI chat general: popup panel with expand/collapse, hides when contextual AI open - AI chat contextual: tabs reordered (Actions first), X close button, height fix - Settings: all tabs restyled, 6 new color presets (sage, terracotta, iron, etc.) - Global color cleanup: emerald/orange hardcoded → brand-accent dynamic - Brainstorm page: orange → brand-accent throughout - PageEntry animation component added to key pages - Floating AI button: bg-brand-accent instead of hardcoded black - i18n: all 15 locales updated with new AI/billing keys - Billing: freemium quota tracking, BYOK, stripe subscription scaffolding - Admin: integrated into new design - AGENTS.md + CLAUDE.md project rules added
8.9 KiB
8.9 KiB
{page-number}-{page-name}
Previous Step: ← {previous-page-name} Next Step: → {next-page-name}
Previous Step: ← {previous-page-name} Next Step: → {next-page-name}
{page-number}-{page-name}
Page Metadata
| Property | Value |
|---|---|
| Scenario | {scenario-name} |
| Page Number | {page-number} |
| Platform | {Mobile web / Desktop / PWA / Native} |
| Page Type | {Full Page / Modal / Drawer / Popup} |
| Viewport | {Mobile-first / Desktop-first} |
| Interaction | {Touch-first / Mouse+keyboard} |
| Visibility | {Public / Authenticated / Admin} |
Overview
Page Purpose: {What job must this page accomplish?}
User Situation: {What brings the user here?}
Success Criteria: {How will we know this page succeeded?}
Entry Points:
- {How users arrive}
Exit Points:
- {Where users go next}
Reference Materials
Strategic Foundation:
- Product Brief - {brief description}
- Trigger Map - {brief description}
Related Pages:
Design System:
Layout Structure
{High-level description of page layout}
[ASCII layout diagram]
+------------------+
| Header |
+------------------+
| Main Content |
+------------------+
| Footer |
+------------------+
Spacing
Scale: Spacing Scale
| Property | Token |
|---|---|
| Page padding (horizontal) | {e.g., space-md mobile / space-lg desktop} |
| Section gap | {e.g., space-xl} |
| Element gap (default within sections) | {e.g., space-md} |
| Component gap (within groups) | {e.g., space-sm} |
Typography
Scale: Type Scale
| Element | Semantic | Size | Weight | Typeface |
|---|---|---|---|---|
| {Page title} | H1 | {e.g., text-2xl} | {e.g., bold} | {e.g., display / default} |
| {Section heading} | H2 | {e.g., text-xl} | {e.g., semibold} | {default} |
| {Body text} | p | text-md | normal | {default} |
| {Caption/helper} | p | {e.g., text-xs} | normal | {default} |
Page Sections
Section: {Section Name}
OBJECT ID: {page-name}-{section-name}
| Property | Value |
|---|---|
| Purpose | {What this section does} |
| Component | {Design System Component} |
| Padding | {e.g., space-lg space-md} |
| Element gap | {e.g., space-md — or "default" if same as page-level} |
{Object Name}
OBJECT ID: {page-name}-{object-name}
| Property | Value |
|---|---|
| Component | {Component} |
| Translation Key | {translation.key} |
| SE | "{Swedish text}" |
| EN | "{English text}" |
| Behavior | {onClick / onChange / etc.} |
↕ {page}-{v|h}-{type}-{size} — {reason}
{Object Name 2}
OBJECT ID: {page-name}-{object-name-2}
| Property | Value |
|---|---|
| Component | {Component} |
| Translation Key | {translation.key} |
| SE | "{Swedish text}" |
| EN | "{English text}" |
{Group Name} (Container)
OBJECT ID: {page-name}-{group-name}
| Property | Value |
|---|---|
| Component | {Container Component} |
| Purpose | {Groups related objects} |
| Layout | {Horizontal / Vertical / Grid} |
{Object in Group}
OBJECT ID: {page-name}-{group-name}-{object}
| Property | Value |
|---|---|
| Component | {Component} |
| Translation Key | {translation.key} |
| SE | "{Swedish text}" |
| EN | "{English text}" |
↕ {page-name}-{group-name}-{obj1}-{obj2}-gap — {spacing token}
{Object in Group 2}
OBJECT ID: {page-name}-{group-name}-{object-2}
| Property | Value |
|---|---|
| Component | {Component} |
| Translation Key | {translation.key} |
| SE | "{Swedish text}" |
| EN | "{English text}" |
Page States
| State | When | Appearance | Actions |
|---|---|---|---|
| Default | {condition} | {description} | {available actions} |
| Loading | {condition} | {description} | {available actions} |
| Empty | {condition} | {description} | {available actions} |
| Error | {condition} | {description} | {recovery actions} |
| Success | {condition} | {description} | {next steps} |
Conditional Sections
Include these micro-instructions when applicable:
| Condition | Include |
|---|---|
| Public page (SEO needed) | → meta-content.instructions.md |
| Public page (SEO needed) | → seo-content.instructions.md |
| Has forms/inputs | → form-validation.instructions.md |
| Needs API data | → data-api.instructions.md |
| Multiple breakpoints | → responsive.instructions.md |
| Final review | → accessibility.instructions.md |
| Multiple sketches | → storyboard-specification.template.md |
| Always (spec creation/audit) | → open-questions.instructions.md |
Technical Notes
{Any constraints, performance requirements, or implementation notes}
Open Questions
No open questions at this time.
Checklist
- Page purpose clear
- All Object IDs assigned
- Components reference design system
- Translations complete (SE/EN)
- States documented
- Conditional sections included where needed
Previous Step: ← {previous-page-name} Next Step: → {next-page-name}
Created using Whiteport Design Studio (WDS) methodology