Design principles

The doHockey interface is designed for coaches who need to see what is happening quickly and act immediately.

Our principles

• Task first: The main next step stays close to the information it depends on.
• Calm hierarchy: Headings, cards and actions follow a predictable order.
• One primary action: Orange generally highlights the most logical action; alternatives remain quieter.
• Consistency: Similar actions look the same across workspaces.
• Clear status: Figures have labels or explanations so their meaning is clear.
• Progressive detail: The initial overview stays compact; details are available when needed.
• Responsive: Content rearranges for smaller screens instead of merely shrinking.
• Accessible: Text, contrast, keyboard controls and clear errors receive ongoing attention.

Visual language

The foundation is light and calm, with dark ink headings and muted blue-grey body text. Recognisable coral orange is used for brand accents and important actions. Icons support text but never replace essential explanations. Charts show a profile or development, accompanied by concrete figures or actions.

Helpful, non-critical guidance uses a soft warm-yellow background with dark text. It is recognisable as a contextual tip without competing with the orange primary action. Warnings, errors and blocked steps retain their own semantic status colours. Prefer one prioritised tip at a time in each context. A fixed contextual tip stays flat with a warm vertical accent line. In a composite card, the selectable header may instead take a subtle tint and show a short hint, keeping the main action recognisable without another button or notification card.

Composite cards with their own actions are never indiscriminately clickable across the entire surface. Their header provides the predictable main selection, while charts, figures and task buttons keep their own controls. Related columns align visually along the same bottom edge.

Flat task screens

Portals and administration workspaces start with a calm page, clear typography, white space and subtle dividers. Not every number or list item needs its own card. Wide screens place short statuses and alerts beside each other where possible; mobile stacks them logically with comfortable touch space.

Use a card when it defines an independent object or workspace, such as a team, form or editor. This keeps the initial overview compact and helps users reach their task’s content faster.

Typography

doHockey uses one font family across the public website, support, coach portal and mobile app: Manrope. A fixed typographic hierarchy makes each screen recognisable: a clear page title, smaller section headings, calm card titles and readable supporting text. Labels, metadata and actions also have fixed roles. A task therefore feels consistent on mobile and in the portal without every screen needing identical dimensions.

Headings are compact, heavy and tightly spaced. Body text has more line spacing, and coral-orange eyebrow labels are used sparingly to indicate a subject or next step. Use at most three text levels within a card so information remains easy to scan under time pressure.