Visual identity
The GreenPulse brand kit
A living emblem: leaves that tremor in the wind, gears that tick like clockwork. One teal, two typefaces, and motion that respects the reader.
The living emblem
Hand-drawn emblem, fully vectorised — transparent background, one colour, infinitely scalable. The left half is organic (leaves, lotus), the right half is mechanical (gears); the pulse needle binds them. The animation makes the metaphor literal: nature breathes, the mechanism ticks.
Wind tremor
Leaves
Up to 1.4° of rotation around the stem attachment, 5–7 s organic ease-in-out cycles, phases desynchronised per cluster.
Clockwork tick
Gears
±2.4° stepped tick-tock on meshed pairs (opposite directions); the solid gear advances 360° in 96 escapement steps over 48 s; the smallest gear free-runs, one turn every 14 s.
Soft sway
Lotus
Up to 0.8° around the base, 7.5 s cycle. The needle, ring, banner and text never move.
Reduced motion
Accessibility
All animation disabled under prefers-reduced-motion. Motion lives inside the SVG — no JavaScript required.
Colour
Light-theme values. Accent, Paper and Ink adapt automatically under dark mode; the emblem teals are fixed. The emblem line colour is decorative — for text or UI elements needing contrast, use Accent or Deep teal.
Emblem teal
#64A9A1
--brand-teal
The emblem's exact line colour. Logo artwork, brand accents on mist.
Deep teal
#2C5A54
--brand-teal-deep
Headings on light backgrounds, emblem rendered on mist panels.
Accent
#2C7A72
--accent
Interactive elements — links, buttons, highlights. WCAG AA on background.
Accent dark
#1A4D48
--accent-dark
Hover states, favicon gradient base, high-emphasis bands.
Mist
#EBF4F3
--brand-mist
Lightest emblem tint. Wash backgrounds, callout panels.
Paper
#FAFAF6
--background
Site canvas. Warm off-white, editorial feel.
Ink
#14140F
--foreground
Body text. Near-black warmed toward the paper tone.
Typography
Fraunces
Display
Where workers drive the green transition
Headlines, ledes, pull quotes. Light weight, tight tracking.
Geist Sans
Body
Meso-level evidence on the competences Europe needs — workplaces, vocational pathways, communities of practice.
Body copy, UI. Regular weight, generous leading.
Geist Mono
Data & labels
HORIZON-CL2-2026-01-TRANSFO-07 · M1–M48
Eyebrows, codes, milestones, figure labels. Uppercase, wide tracking.
Using the emblem
Do
- Use the SVG files — they scale losslessly and carry the transparent background.
- Keep clear space around the emblem of at least 25% of its width.
- Place on paper, mist or dark ink backgrounds — the teal is tuned for all three.
- Use the animated variant wherever the emblem is 40 px or larger.
Don’t
- Recolour the emblem outside the brand teals.
- Place it on busy photography or low-contrast backgrounds.
- Stretch, rotate or crop the artwork.
- Use the old white-matted PNG — it is retired.
Cinematic motion suite
AI-rendered in 4K from the master vector: four cinematic treatments for hero surfaces, page intros and dark sections.
Living loop
Leaves in the breeze, gears in motion. Hero + nav surfaces.
Twin transition
Data filaments pulse through leaf veins and gear teeth — the digital woven into the green.
Cinematic reveal
The emblem assembles from ink particles. Page-load intro.
Nocturne
Paper darkens to ink, lines glow. Dark sections, closings.