# Design Direction — CoreConsult Time Registration

Sources:

- `Brand_fundament_ Playbook.pdf`, received 2026-06-29.
- Live website: `https://www.coreconsult.com`, checked 2026-06-29.

## Brand Foundation

- Brand: CoreConsult
- Purpose line: "We unlock potential. Together."
- Personality: analytical, committed, collaborative, caring.
- Aspiration: build the most attractive consulting model for clients and consultants while staying in control of their own destiny.

## Product Feel

This is an internal operational tool, so the UI should be quiet, clear, fast, and work-focused. It should feel like CoreConsult: structured, understated, warm, and confident. Avoid decorative marketing layouts. Prioritise scanning, quick entry, accurate reporting, and low-friction project setup.

## Voice

Use CoreConsult's tone principles:

- Non-wordy: keep labels and helper text short.
- Professional, but warm.
- Trusted advisor: grounded and precise.
- Real people: natural language, no AI cliches.
- Confident yet humble: no hype.

## Palette

Primary colours:

- Off-white: `#e8e9e5`
- Almost black: `#222222`
- CoreGreen: `#323c31`

Support colours:

- Dune: `#dbd8cd`
- Grounded sand: `#9a917f`
- Down to earth: `#564232`
- The Green Book: `#787458`
- Colab copper: `#9a5a32`
- Caring red: `#6b2b24`
- Committed blue: `#415057`
- HQ blue: `#8ea3aa`

Suggested app usage:

- Base/background: Off-white
- Primary text: Almost black
- Primary actions/nav: CoreGreen
- Secondary panels/dividers: Dune and light neutrals derived from Off-white
- Warnings/over-budget: Caring red, used sparingly
- Informational states: Committed blue or HQ blue
- Positive/healthy states: CoreGreen or The Green Book
- Accent only where helpful: Colab copper

Avoid letting the interface become a one-note beige/green surface. Use the palette for hierarchy and status, but keep the main product dense, calm, and readable.

## Typography

- Brand typeface: Aeonik Pro, licensed and managed by Marketing.
- System/work fallback: Calibri.
- Website font setup: Aeonik Pro custom web fonts, weights 400 and 600.
- Downloaded local app assets:
  - `assets/brand/aeonik-pro-400.woff2`
  - `assets/brand/aeonik-pro-600.woff2`
- App font stack: `Aeonik Pro, Calibri, Arial, sans-serif`.

Use Aeonik Pro for the app because it is already used by the CoreConsult website. Keep Calibri/Arial fallback.

## Logo

Logo rules from playbook:

- Keep clear space around logo equal to the height of the capital "C".
- Use calm, clean areas and strong contrast.
- Use black/white logo variants as needed.
- Do not add effects, shadows, or alternate colours.
- Do not place over busy images, faces, text, detailed textures, or low-contrast backgrounds.

The website logo is enough for the initial build.

Website asset captured for initial build:

- `assets/brand/coreconsult-logo.webp`
- `assets/brand/website/favicon.webp`
- `assets/brand/website/coreconsult-hero.webp`
- `assets/brand/website/coreconsult-editorial-1.webp`
- `assets/brand/website/coreconsult-editorial-2.webp`

This was pulled from the current CoreConsult website logo. If Tenna supplies source vector files later, prefer those for final polish.

## Imagery

Website imagery has been captured for the preview hub and occasional brand connection points:

- Use imagery in the client-facing preview, onboarding, case-study pages, or empty states.
- Avoid placing decorative imagery inside dense booking, reporting, or admin workflows.
- Product screens should stay fast, calm, and scannable; imagery should support recognition, not compete with the work.

## Component Direction

- Buttons: compact, clear, CoreGreen for primary actions; neutral secondary buttons.
- Cards/panels: small radius, restrained borders, no nested card layouts.
- Tables/reports: dense, aligned numeric columns, clear subtotals.
- Dashboards: operational metrics first; avoid oversized hero treatment.
- Mobile booking: large enough tap targets, minimal fields, quick date/project/hour entry.
- Status badges: understated, semantic colour use only.

## Alerts and Notifications

Operational feedback should stay quiet, precise, and easy to scan. Avoid modal interruptions unless the user is blocked from continuing.

### Patterns

| Pattern | Use | Behaviour |
| --- | --- | --- |
| Inline alert | Page-level context such as incomplete week, locked period, or export notes | Persistent until dismissed or resolved |
| Toast | Action feedback such as saved entry, export ready, or week copied | Auto-dismiss; errors stay until dismissed |
| Status badge | Compact row or card state such as On track, Review, or Unlocked | Always visible on the item |
| Notification inbox | Activity feed for exports, mileage windows, and admin signals | Unread dot; mark all read |

### Variants

| Variant | Label | Colour token | Examples |
| --- | --- | --- | --- |
| Success | Saved | The Green Book | Entry saved, export ready, week copied |
| Info | Notice | Committed blue | Mileage period, period locked, signed out |
| Warning | Attention | Colab copper | Hours incomplete, budget watch, nothing to save |
| Error | Action needed | Caring red | Locked period, blocked edit, validation failure |

### Voice

- Use short labels only: Saved, Notice, Attention, Action needed.
- One title plus one line of context is enough.
- No marketing language, exclamation marks, or vague AI phrasing.

### Behaviour

- Success toasts auto-dismiss after about 3.6 seconds.
- Info toasts auto-dismiss after about 4.2 seconds.
- Warning toasts auto-dismiss after about 5.2 seconds.
- Error toasts remain until dismissed.
- Inline alerts can be dismissible when the message is helpful but not blocking.

### Implementation

- Components live in `src/components/alerts/`.
- `ToastProvider` wraps `/app` routes.
- Live reference and interactive demos are on the preview hub at `/#alerts`.

## First Preview

The first visual review should be a component/design-system preview rather than a full app:

- Buttons and icon buttons
- Inputs, selects, date controls, toggles
- Metric tiles
- Timesheet row/card
- Project row/card
- Report table
- Status badges
- Alerts, toasts, and notification inbox
- Navigation shell
- Empty/loading/error states

Purpose: let Nicolai validate brand fit before full screens are assembled.