01 Design Principles 02 Colors 03 Typography 04 Spacing Scale 05 Border Radius 06 Shadows 07 Motion & Animation 08 Icones (Lucide) 09 Buttons 10 Badges 11 Alerts 12 Forms 13 Cards 14 Avatars 15 Data Table 16 Navigation 17 Tabs 18 Progress Bars 19 Timeline 20 Dropdown Menu 21 Tooltips 22 Skeleton Loading 23 Empty State 24 Layout Reference 25 Anti-Patterns

Logo & Phoenix

The Givernance phoenix — resilience, transformation, growth. Three variants for every context.

Vert

Fonds clairs · Sidebar · Défaut

#096447

Noir

Fonds blancs · Print · Mono

#000000

Blanc

Fonds sombres · Email · Hero

#FFFFFF

Usage guidelines

Toujours utiliser la version vert sur fond clair (sidebar, cards, favicon)
Utiliser la version noir pour print, email monochrome, ou contrastes élevés
Utiliser la version blanc sur fond primaire vert ou tout fond sombre
Ne jamais déformer, recadrer ou recolorer le phoenix manuellement
Taille minimale recommandée : 32×32px

Design Principles

Givernance should feel like a calm, capable companion — not a corporate tool. These five principles guide every design decision.

Warm

Colors, typography, and language that feel human, not institutional. Organic greens, warm neutrals, editorial serif headings.

Calm

Visual hierarchy that reduces cognitive load. No panic-inducing dashboards. Generous whitespace and muted palettes.

Capable

Dense enough to do real work. Never dumbed down. Professional data tables, contextual actions, and power-user shortcuts.

Trustworthy

Consistent, predictable, no surprises — especially for sensitive data. Clear confirmations for destructive actions.

Inclusive

Accessible to non-technical staff. WCAG 2.1 AA minimum. Color never sole information carrier. Keyboard-first interaction.

Colors

Primary Palette

The brand green family — used for CTAs, active states, and brand identity. Derived from Givernance Green #2E7D5E.

Primary

#2E7D5E

--color-primary

Primary Light

#4CAF82

--color-primary-light

Primary Dark

#1A5240

--color-primary-dark

Primary 50

#E8F5EE

--color-primary-50

Primary 100

#C8E6D7

--color-primary-100

Primary Hover

#267052

--color-primary-hover

Primary Active

#1F5C44

--color-primary-active

Neutral Palette

Cool gray neutrals — 10 steps from near-white to near-black. These form the backbone of all surfaces, text, and borders.

50
#F8F9FA

100
#F1F3F5

200
#E2E5E9

300
#CED3D9

400
#9BA3AD

500
#6B7280

600
#4B5563

700
#374151

800
#1F2937

900
#111827

Semantic Colors

Status colors always paired with icons and text labels — color is never the sole information carrier (WCAG 1.4.1).

Success (Green)

#4CAF82

--color-success

Warning (Amber)

#D97706

--color-warning

Error (Red)

#DC2626

--color-error

Info (Sky)

#2E79A6

--color-info

Red Light

#FEE2E2

--color-red-light

Red 50

#FEF2F2

--color-red-50

Red Dark

#991B1B

--color-red-dark

Amber Light

#FEF3C7

--color-amber-light

Amber 50

#FFFBEB

--color-amber-50

Sky Light

#E0F2FE

--color-sky-light

Sky 50

#F0F9FF

--color-sky-50

State Color Variants (light / border / text)

State	Light	Border	Text
Success	`#DCFCE7`	`#86EFAC`	`#15803D`
Warning	`#FEF3C7`	`#FDE68A`	`#B45309`
Error	`#FEE2E2`	`#FECACA`	`#DC2626`
Info	`#E0F2FE`	`#BAE6FD`	`#0369A1`

Accent Colors

Indigo for accent and special states. Navy for data-heavy sections and charts.

Indigo

#5B4FD4

--color-indigo

Indigo Light

#EDE9FE

--color-indigo-light

Indigo 50

#F5F3FF

--color-indigo-50

Navy

#1E293B

--color-navy

Navy Light

#334155

--color-navy-light

Navy 50

#F1F5F9

--color-navy-50

Contrast Ratios

Combination	Sample	Ratio	Level
Primary Dark `#1A5240` on White	Aa	`~7.5:1`	AAA Pass
Primary `#2E7D5E` on White	Aa	`~4.6:1`	AA Pass (large text)
Neutral 900 `#111827` on Neutral 50 `#F8F9FA`	Aa	`~16:1`	AAA Pass
Red `#DC2626` on White	Aa	`~4.5:1`	AA Pass

Typography

Font Specimens

Instrument Serif — Headings

The quick brown fox jumps over the lazy dog

--font-heading: 'Instrument Serif', 'Lora', Georgia, 'Times New Roman', serif

Inter — Body / UI

The quick brown fox jumps over the lazy dog. 0123456789 — ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz

--font-body: 'Inter', system-ui, -apple-system, sans-serif

JetBrains Mono — Code / Data

const donation = { amount: 2500, currency: "EUR" }; // 0123456789

--font-mono: 'JetBrains Mono', 'Fira Code', monospace

Type Scale

--text-xs 11px / 0.6875rem

The quick brown fox jumps over the lazy dog

--text-sm 13px / 0.8125rem

The quick brown fox jumps over the lazy dog

--text-base 14px / 0.875rem

The quick brown fox jumps over the lazy dog

--text-md 16px / 1rem

The quick brown fox jumps over the lazy dog

--text-lg 20px / 1.25rem

The quick brown fox jumps over the lazy dog

--text-xl 24px / 1.5rem

The quick brown fox jumps over the lazy dog

--text-2xl 28px / 1.75rem

The quick brown fox jumps over the lazy dog

--text-3xl 36px / 2.25rem

The quick brown fox jumps

--text-4xl 48px / 3rem

The quick brown fox

Font Weights

--weight-light

300

Givernance helps nonprofits thrive

--weight-regular

400

Givernance helps nonprofits thrive

--weight-medium

500

Givernance helps nonprofits thrive

--weight-semi

600

Givernance helps nonprofits thrive

--weight-bold

700

Givernance helps nonprofits thrive

Heading Hierarchy

h1

Donor Management

h2

Campaign Overview

h3

Recent Donations

h4

Activity Timeline

Spacing Scale

Built on a 4px base grid. All spacing tokens map to consistent increments for vertical rhythm and horizontal alignment.

--space-0-5 2px

--space-1 4px

--space-1-5 6px

--space-2 8px

--space-3 12px

--space-4 16px

--space-5 20px

--space-6 24px

--space-8 32px

--space-10 40px

--space-12 48px

--space-14 56px

--space-16 64px

--space-18 72px

--space-20 80px

--space-24 96px

Border Radius

A range of radii from subtle rounding to fully circular. Use --radius-md for most UI elements.

--radius-sm

4px

--radius-md

10px

--radius-card

12px

--radius-lg

12px

--radius-xl

16px

--radius-2xl

24px

--radius-pill

9999px

--radius-full

50%

Shadows

A 6-level elevation scale from subtle to dramatic, plus utility shadows for hover, inset, and focus states.

--shadow-xs

Subtle elements

--shadow-sm

Default cards

--shadow-md

Mid-elevation

--shadow-lg

Dropdowns, popovers

--shadow-xl

Modal dialogs

--shadow-2xl

Dramatic elevation

--shadow-card-hover

Card hover state

--shadow-inset

Inset / pressed

Motion & Animation

Motion is purposeful, not decorative. Every animation must reduce cognitive load. No bounce or elastic — this is a professional tool.

Duration Tokens

--duration-instant

75ms

--duration-fast

100ms

--duration-normal

150ms

--duration-slow

250ms

--duration-slower

300ms

Easing Curves

Hover over each track to see the easing in action. The dot transitions from left to right using the corresponding curve.

--ease-out

Entrances, reveals

--ease-in

Exits, dismissals

--ease-in-out

Morphing, repositioning

--ease-spring

Playful emphasis (rare)

--ease-smooth

General-purpose

Icones (Lucide)

Givernance utilise Lucide Icons comme systeme d'icones unifie. Les icones sont chargees via CDN et rendues en SVG inline. Taille standard : 16px (sm), 20px (base), 24px (lg). Stroke width : 1.5px pour un rendu elegant.

Tailles d'icones

SMALL (16px) · BASE (20px) · LARGE (24px)

16px 20px 24px

Icones utilisees dans l'application

NAVIGATION

Dashboard Donateurs Dons Comms Evenements Rapports Parametres

ACTIONS

Ajouter Modifier Supprimer Exporter Filtrer Chercher

STATUT & FEEDBACK

Succes Attention Erreur Info IA Notifs

Regle d'icone Toujours utiliser Lucide Icons via data-lucide="icon-name". Ne jamais utiliser d'emojis ou de caracteres Unicode comme icones dans l'interface. Stroke width : 1.5px. Couleur via color CSS heritee. Tailles : 16/20/24px exclusivement.

Buttons

Variants

All button variants

Sizes

Small, Default, Large

Icon Buttons

Icon-only buttons

Loading State

Buttons with loading spinner

Disabled State

Disabled buttons

Badges

All Variants

Pill (default)

✓ Active ⚠ Pending ✕ Lapsed ℹ New Draft

Square variant

✓ Active ⚠ Pending ✕ Lapsed ℹ New Draft

Without icon

Active Pending Lapsed New Draft

Alerts

✓

Donation recorded. Receipt #2024-0847 has been generated and emailed to the donor.

⚠

GDPR consent expiring. 12 donors have consent records older than 24 months. Review and request renewal.

✕

Import failed. Row 47 has an invalid email format. Please correct the file and retry.

ℹ

New feature available. Automated receipt generation is now available for all plans. Learn more

Forms

Input States

Default

Full legal name as it appears on records

Required Field

Primary contact email address

Error State

✕ Email address is missing a domain (e.g. @example.com)

Success State

✓ Email address verified

Select & Textarea

Donor Type

Communication Preference

Notes

Checkbox & Radio

Checkboxes

GDPR consent obtained Email communications Phone communications Postal mail communications

Radio buttons

Tax receipt required Tax receipt optional No tax receipt

Sample Form Group

Personal Information

First Name

Last Name

Email

Phone

Cards

Default card

Recent Donations

Your organization received 24 donations this month totaling EUR 18,420. That is a 12% increase over last month.

Flat card (--flat)

Campaign Summary

✓ Active

Spring Fundraiser 2026 is 67% funded with 3 weeks remaining. 142 donors have contributed so far.

Interactive card (hover to see elevation)

Marie Dupont

Active

Individual Donor · Paris, France

Last gift: EUR 2,500 on 2026-01-15

Stat widget

Avatars

Sizes

xs (20px), sm (28px), md (36px), lg (48px), xl (64px)

M

MD

Color Variants

AB

CD

EF

GH

IJ

Rounded Variant

Square-rounded (--rounded) vs. circle (default)

SE

CL

PM

JD

Data Table

Dense but breathable tables with sticky headers, row hover, and sortable columns. Financial data uses monospace numerals.

Name	Email	Type	Last Gift	Status
MD Marie Dupont Fondation Espoir	marie@fondation.fr	Individual	EUR 2,500	✓ Active
SE Stiftung Europa Berlin, Germany	info@stiftung.de	Foundation	EUR 15,000	✓ Active
PM Pierre Martin Brussels, Belgium	pierre@ngo.be	Individual	EUR 180	✕ Lapsed
CL Caritas Lyon Lyon, France	contact@caritas.fr	Organization	EUR 8,200	✓ Active

Showing 1–4 of 127 donors

Navigation

Sidebar-first navigation with collapsible sections. Active states use a white left accent bar. Topbar carries breadcrumbs, search, and actions.

Content Area

Tabs

Tab content for the selected "Overview" tab would appear here. Tabs use a green bottom border for the active state with a smooth transition.

Progress Bars

Spring Campaign 67%

Year-End Appeal 23%

Infrastructure Grant 100%

Emergency Fund 45%

Timeline

Activity timelines show chronological event logs on donor and campaign records. Icons indicate event type.

€

Donation received — EUR 2,500

Marie Dupont · Spring Campaign 2026 · 2 hours ago

✉

Thank-you email sent

Automated · Receipt #2026-0847 attached · 2 hours ago

✎

Contact information updated

Claire Laurent · Changed phone number · Yesterday

👥

Donor created

Imported from Salesforce · 2025-09-14

Dropdown Menu

Context menus for actions on records and UI elements. Uses elevated shadow for clear separation from the page.

Tooltips

Hover over elements below to see tooltip text. Tooltips use the data-tooltip attribute and appear above the element.

Skeleton Loading

Skeleton screens are preferred over spinners for content-heavy pages. They preserve layout structure and reduce perceived loading time.

Text skeleton

Avatar + text

Card skeletons

Empty State

Empty states guide users toward their first action. They include an illustration or icon, a descriptive title, supporting text, and a clear CTA.

👥

No donors yet

Your donor list is empty. Start building your community by adding your first donor or importing from a spreadsheet.

Layout Reference

The standard app layout uses a fixed sidebar, sticky topbar, and scrollable content area. Key dimension tokens are shown below.

Content Area

max 1280px

--content-max

Forms: max 800px --form-max

Layout Tokens

Token	Value	Usage
`--sidebar-width`	240px	Default sidebar width
`--sidebar-width-sm`	200px	Compact sidebar
`--sidebar-collapsed`	64px	Icon-only collapsed mode
`--topbar-height`	56px	Sticky top navigation bar
`--content-max`	1280px	List views, dashboards
`--form-max`	800px	Forms, detail views
`--table-row-height`	48px	Default table row
`--table-row-compact`	36px	Compact density table row

Anti-Patterns

These patterns are explicitly prohibited in Givernance. They violate our principles of accessibility, calm, and trustworthiness.

outline: none without replacement

Never remove focus outlines without providing a visible alternative. Focus rings must always be visible for keyboard navigation. Use --focus-ring or --shadow-ring tokens.

Modals for complex forms

Modal dialogs with more than 3 fields cause cognitive overload. Use a dedicated page instead. Modals are reserved for confirmations, quick edits, and alerts.

Auto-dismissing success messages (<4s)

Users may miss success confirmations that disappear too quickly. Toast notifications must persist for at least 5 seconds or be manually dismissible.

Placeholder-only labels

Placeholder text disappears on focus and is inaccessible to screen readers. Always use explicit <label> elements. Placeholders are supplementary, not primary.

Infinite scroll on financial tables

Financial and audit data requires pagination with explicit page size controls. Infinite scroll makes it impossible to reference specific records by position and breaks auditability.

Generic "Are you sure?" dialogs

Confirmation dialogs must tell the user exactly what will happen and what data they will lose. "Are you sure you want to delete?" must become "Delete Marie Dupont and 24 related donation records? This cannot be undone."

Icons without tooltips

Icon-only buttons must always have a tooltip and an aria-label. Non-power-users cannot guess what an ambiguous icon means. Label all icon buttons.

Gradient backgrounds on data pages

Gradients create visual noise on data-dense pages. Reserve decorative gradients for marketing surfaces. Data views use flat, neutral backgrounds for maximum readability.

Table of Contents

Logo & Phoenix

Usage guidelines

Design Principles

Colors

Primary Palette

Neutral Palette

Semantic Colors

State Color Variants (light / border / text)

Accent Colors

Contrast Ratios

Typography

Font Specimens

Type Scale

Font Weights

Heading Hierarchy

Donor Management

Campaign Overview

Recent Donations

Activity Timeline

Spacing Scale

Border Radius

Shadows

Motion & Animation

Duration Tokens

Easing Curves

Icones (Lucide)

Tailles d'icones

Icones utilisees dans l'application

Buttons

Variants

Sizes

Icon Buttons

Loading State

Disabled State

Badges

All Variants

Alerts

Forms

Input States

Select & Textarea

Checkbox & Radio

Sample Form Group

Cards

Avatars

Sizes

Color Variants

Rounded Variant

Data Table

Navigation

Tabs

Progress Bars

Timeline

Dropdown Menu

Tooltips

Skeleton Loading

Empty State

Layout Reference

Layout Tokens

Anti-Patterns