Design System Inspiration of Pennylane

1. Visual Theme & Atmosphere

Pennylane is an accounting and financial management platform for businesses and their accounting firms. Its careers page gives the scale: "Créée en 2020", €175 million raised through a Series E, 1,000 "Pennylaners" of 43 nationalities, and 6,000 accounting firms supporting more than 800,000 businesses that use Pennylane daily — in France and, since 2025, in Germany. The company is Pennylane SAS, head office 2-4 rue Jules Lefebvre, Paris.

The site is fresh and confident: a deep teal #003d3d for type and buttons, a flashy green #00f872 accent, white and beige #f8f4f1 surfaces, and salmon, yellow and blue as supporting colours. Everything is set in Manrope.

What makes it worth reading:

• One teal for text and action. --color-pennylane, --color-primary and --color-typo are all #003d3d.
• A flashy green accent. --color-pl-green-accent #00f872 — used for highlights and for the label of the larger call to action on teal.
• Hover as lift. The call to action keeps its colour, rises 2px and casts a shadow.

Primary tasks

• Start Pennylane or request a demo, by business type.
• Explore product, pricing and resources; sign in.

2. Color Palette & Roles

Measured with getComputedStyle on pennylane.com/fr: 133 root custom properties — about 56 --color-* (Pennylane's), 51 --tw-* (Tailwind, excluded), fonts, radii and a few others.

Teal and greens

• Primary (#003d3d) — --color-pennylane, --color-primary, --color-pl-green-900.
• Foreground (#003d3d) — --color-typo; 18 of 31 <p> elements.
• Accent (#00f872) — --color-pl-green-accent, --color-accent.
• Accent soft (#94ffb4) — --color-pl-flashy-100.
• --color-pl-green-100 #dafbf2 · -300 #8ecec2 · -500 #42ad9a · -700 #338585 · -800 #0f5757.

Surfaces and accents

Beige #f8f4f1 (--color-pl-beige) · Canvas #ffffff · Salmon #ffa37b · Yellow #f3c628 · Orange #ffc063 (rendered) · Blue #358ddd · Red #c11111 · Grey #7b7b7b.

3. Typography Rules

Font family

Manrope at 400, 500, 600, 700 and 800, loaded (document.fonts), for body and headings alike (--font-family-sans-serif).

Scale

The header call to action is 14px/700; the larger one 16px/600; menu items 16px/500.

4. Component Stylings

Measured on the home page, focus read under a real Tab key, and a hover counted only when :hover matched; background-image, text-decoration and pseudo-elements were compared too.

• Call to action — Démarrer maintenant: #003d3d, white 14px/700, 4px, 38px, 8px 16px. Hover and press lift it 2px (translateY(-2px)) with rgba(0,0,0,0.25) 0 4px 4px; the colour stays. Focus is the browser's auto ring. A larger 48px version on the page uses a green #00f872 label.
• Menu buttons — Produit, Activité, Tarifs, Ressources: #003d3d, 16px/500. Nothing changes on the button itself in any state.

Radius

4px and 6px on buttons.

5. Layout Principles

• Teal hero bands with white text and green highlights; beige and white sections.

6. Depth & Elevation

The only elevation observed is the hover shadow on the call to action.

7. Do's and Don'ts

Do

• Use teal #003d3d for text and the main action.
• Use the green #00f872 for highlights and labels on teal.
• Signal hover with a 2px lift and a soft shadow.

Don't

• Don't count --tw-* as Pennylane tokens.
• Don't use the flashy green for body text on white.
• Don't use pure black; the ink is teal.

8. Responsive Behavior

Not measured. Desktop 1440×1000 only.

9. Agent Prompt Guide

Quick Color Reference

#003d3d teal · #00f872 green · #f8f4f1 beige · #dafbf2 mint · #42ad9a mid green · #ffa37b salmon · #f3c628 yellow

Example Component Prompts

• "A 38px teal #003d3d button, white 14px/700 Manrope, 4px radius; on hover it rises 2px with a soft shadow."
• "A teal hero with a flashy green #00f872 highlight."

10. Voice & Tone

Not assessed as authored voice.

11. Brand Narrative

Pennylane, founded in 2020, brings businesses and their accountants onto one financial platform, and its site trades the usual finance blues for a deep teal and an electric green. Actions stay teal and respond by lifting rather than changing colour.

12. Principles

• Teal, not navy. One deep colour for text and action.
• Electric accent. Green for what should stand out.
• Lift to respond. Hover rises instead of recolouring.

13. Personas

Not researched. No persona claim is made from a UI capture.

14. States

Hover and press: the call to action lifts 2px with a shadow; menu buttons do not change. Focus: the browser's ring on the call to action, nothing on menu buttons.

15. Motion & Easing

Two --transition-* tokens are declared; the lift is animated. Timing was not measured.

Tier 1 sources: https://www.pennylane.com/fr (live homepage — 133 root custom properties read via getComputedStyle, Tailwind excluded; Manrope loaded; two components measured at rest, hover, pressed and focus, captured 2026-09-26); https://www.pennylane.com/fr/zz-this-does-not-exist (nonsense-path control — HTTP 404 "Page Not Found", read 2026-09-26); https://www.pennylane.com/fr/legal/mentions-legales (Mentions légales — Pennylane SAS, RCS Paris 880 265 921, 2-4 rue Jules Lefebvre, 75009 Paris, read 2026-09-26); https://www.pennylane.com/fr/carrieres (Carrières — "Créée en 2020", €175M raised, 1,000 Pennylaners, 6,000 firms, 800,000 businesses, read 2026-09-26)