Rediflow brand guidelines

Colours, logo, typography, and tone — for UI, docs, and integrations (e.g. Authentik login screen). Keep Rediflow visually and verbally consistent.

1. Colour palette

Canonical values

Name	Hex	Usage
System background	`#1a1a2e`	Top nav, system chrome (dark)
System link	`#a0c4ff`	Links in system nav
Project background	`#16213e`	Project sidebar, project chrome (dark)
Project link / accent	`#94d2bd`	Links in project context, accents, CTAs
Accent hover	`#7bc4ad`	Hover state for accent
Page background	`#f5f5f5`	Main content area (light)
Text (light)	`#111`	Body text on light background
Text (dark)	`#eaeaea`	Text on dark backgrounds
Primary (DaisyUI)	`#4a7fd4`	Buttons, primary actions in DaisyUI theme

CSS variables (app)

In app/static/css/site.css:

:root {
  --bg: #f5f5f5;
  --text: #111;
  --border: #ccc;
  --system-bg: #1a1a2e;
  --system-text: #eaeaea;
  --system-link: #a0c4ff;
  --project-bg: #16213e;
  --project-text: #eaeaea;
  --project-link: #94d2bd;
}

DaisyUI theme (docs-site)

The rediflow theme in docs-site/tailwind.config.js maps:

base-300 → #1a1a2e (system header)
neutral → #16213e (project sidebar)
secondary → #94d2bd (accent)
base-100 → #f5f5f5 (page background)

2. Logo

Asset

Path: app/static/img/logo.svg
Format: SVG (scalable)

Usage

App navbar: Height 2.75rem (44px); object-fit: contain
Min size: 24px height for legibility
Clear space: At least half the logo height on all sides
Backgrounds: Use on dark (#1a1a2e, #16213e) or light (#f5f5f5); ensure contrast

Don'ts

Do not stretch or distort
Do not change colours without approval
Do not place on busy backgrounds that reduce contrast

3. Typography

Font stack: system-ui, sans-serif
Body: Default size; colour #111 on light, #eaeaea on dark
Headings: Same font; use semantic hierarchy (h1–h6)
UI: System font for consistency across platforms

4. Tone of voice

Tagline: "Project flow. Portfolio flow. One flow."
Positioning: One place for project flow, portfolio flow, and capacity — single source of truth. Concise, fresh, empathic.
Support: support@rediflow.eu

5. Third-party integrations

Authentik login screen

Use authentik-rediflow-brand/ package:

Script: make setup-authentik-brand or uv run python scripts/setup_authentik_oidc.py --apply-brand
Colours: Accent #94d2bd, hover #7bc4ad
Optional: REDIFLOW_LOGO_URL, REDIFLOW_FAVICON_URL for logo/favicon

See Authentik setup for OIDC configuration.

Docs site (GitLab Pages)

Tailwind + DaisyUI with rediflow theme. Colours in docs-site/tailwind.config.js match this palette.

6. References

In the repository: app/static/css/site.css (app CSS variables), docs-site/tailwind.config.js (DaisyUI theme), authentik-rediflow-brand/ (Authentik branding package).