Design System Governance
One Brand, Consistent Everywhere
The central rules for typography, colour, spacing, motion, surfaces, charts, icons, density, states, analytics and experiments — applied across all six phases.
Colour tokens
--primaryBrand blue — actions, focus, links--surface / --surface-2 / --surface-3Card, tinted and track surfaces--fg / --fg-2 / --mutedPrimary, secondary and supporting text--border / --border-strongDividers and control outlines--ringFocus ring (boosted in Keyboard focus mode)
Product accents
One brand system; products differ by emphasis, never by unrelated palettes.
- Prakura360Blue / Indigo
- Code EngineCyan / Technical Blue
- Placement EngineViolet / Blue
- Prakura AIBlue-Cyan intelligence glow
- ServicesNeutral with brand blue
Chart palette
- Series 1
#2563eb - Series 2
#06b6d4 - Series 3
#7c3aed - Series 4
#10b981 - Series 5
#f59e0b - Series 6
#ef4444
Typography
.t-heroHero headlineDisplay font, fluid 40–72 px.t-pagePage titleDisplay font, fluid 32–56 px.t-sectionSection title28–40 px.t-cardCard title18–20 px semibold.t-leadLead paragraph18–20 px.t-labelEyebrow / label12 px uppercase, tracked
Animation governance
Mark animated elements with data-motion="1|2|3". Only selected hero and story sections may use Level 3.
- Level 0
None
Body text, forms, tables, legal and trust content.
Example: Static
- Level 1
Microinteraction
Hover, focus, toggles, toasts. ≤ 220 ms.
Example: Button lift
- Level 2
Product explanation
Flows and step animations that explain how something works. Pausable.
Example: FlowAnimator
- Level 3
Cinematic storytelling
Selected hero and story sections only. Off in Simple Mode, Calm animations and reduced motion.
Example: Homepage hero
Content density standards
| Surface | Density | Rule |
|---|---|---|
| Marketing | Spacious | Section padding 56–96 px, one idea per section. |
| Dashboards | Compact | 12–16 px gaps, KPI rows, tables over prose. |
| Developers | Dense | Code-first, sticky navigation, minimal decoration. |
| AI Command Centers | Moderate-high | Panels with clear status, approvals always visible. |
| Mobile | Reduced | Single column, priority actions first, secondary metadata hidden. |
Component states
Loading
Skeletons sized to the final layout; 300–700 ms in demos.
Empty
Seven presets with a next step — never a blank panel.
Error
Retry, Back and Go Home. Add ?demoError=1 to preview.
Success
A plan or next step, not just “thanks”.
Front-end analytics event specification
track(event, props) records only when the visitor allows Analytics. No vendor is connected.
| Event | When | Props |
|---|---|---|
persona_selected | Visitor picks a persona (onboarding or preferences) | persona |
intent_selected | Visitor picks a goal in the Intent Engine | intent, source |
product_explored | A product page is viewed for 10s+ | product |
ai_agent_opened | An agent page or sandbox agent is opened | agent |
demo_started | A simulated demo/scenario starts | demo |
demo_completed | A simulated demo reaches its last step | demo |
solution_created | A blueprint is generated in the Solution Composer | org, challenges |
industry_selected | An industry is chosen | industry |
roi_completed | ROI or assessment flow is completed | kind |
trust_viewed | A trust page is viewed | page |
demo_requested | A demo request is submitted (simulated) | modules, duration |
Conversion funnel visualization
- Visitor (100%)10,000
- Persona Selected (38%)3,800
- Product Explored (29%)2,900
- AI Interaction (17%)1,650
- Demo Viewed (10%)980
- Demo Requested (2%)210
- Sample visitors per stage — not real traffic
UX experiment framework
Variants are assigned per visitor and stored locally. Force one with ?variant-<id>=A|B. No experimentation platform is connected.
Homepage intent prompt
id:
hero· metric: intent_selected rate- Variant AWhat are you trying to achieve?
- Variant BTell us your goal — we'll tailor Prakura
Primary demo CTA
id:
cta· metric: demo_requested rate- Variant ARequest Demo
- Variant BBuild Your Demo