No records yet.
Explain what belongs here and provide one clear next action.
One family.
Consistent foundations.
Shared spacing, typography and behaviour.
Product-specific accents keep each workspace recognisable.
Product accents
CynarisOS#4661C9
CynarisAnalytics#7254CC
CynarisMentor#A14476
CynarisLaunch#A3662B
CynarisAcademy#25745D
Typography and spacing
Manrope / headings
Screen title: 30px. Section: 19–24px. Body: DM Sans, 14–16px. Metadata: 12px target in production.
Layout rhythm
4px base grid. 8, 12, 16, 24, 32 and 48px spacing. 250px desktop sidebar. 8px panel radius. 40px minimum control height.
State designs
Keep the layout stable and announce loading status.
We couldn’t load this view.
Preserve the user’s input and provide a retry action.
Changes saved.
Confirm the specific action without interrupting the workflow.
These are component-state specimens. Loading and service errors require backend integration; interactive form validation and empty states are implemented in the prototypes.
Interaction rules
Accessible by default
Use labelled native fields, visible focus, semantic tables and keyboard-operable controls. Native dialogs trap focus and close with Escape. Announce results and errors.
Responsive working surfaces
Collapse the sidebar on narrow screens. Stack forms and charts. Keep wide tables and boards inside their own scroll regions.