Skip to main content
Petanque Life
Design system

Editorial minimalism for a sport with heritage.

One brand colour. Warm neutrals. Restrained geometry. Typography does the work. This page is the canonical reference for every surface Petanque Life ships — www, web, app, admin.

01 — Typography

Fraunces & Inter

Display — Fraunces

Optical sizing · variable weight 400–600.

Display 1 · 96/100 · tracking -0.04em
La pétanque.
H1 · 48/52
National Championships 2026
H2 · 36/44
Registration opens 1 March
H3 · 30/38
Fédération Française — Ligue PACA

Text — Inter

Variable weight 400–700. Feature flags ss01 cv11.

Lead · 20/28

The operating system for pétanque, from FIPJP down to the village club — licences, competitions, rankings, scoring, and websites in one place.

Body · 16/24

A dignified institutional platform for a sport with roots in 1907 Provence. It connects world federations, national bodies, clubs, and millions of players. We don't shout. We don't promise revolution. We look — and read — like something you'd trust with your federation's data for the next twenty years.

Body small · 14/20 · muted

Used for captions, secondary metadata, and table cells where the primary column carries the weight.

Overline · 12, semibold, tracking +0.12em
National team · 2026 season
Code · JetBrains Mono
licence_id: FR-2026-00142
02 — Colour

One brand, warm neutrals

Ink — warm near-black through ivory

default body & surfaces
ink.0
ink.50
ink.100
ink.200
ink.300
ink.400
ink.500
ink.600
ink.700
ink.800
ink.900
ink.950

Brand — bottle green

primary action · brand mark · brand.700 canonical
brand.50
brand.100
brand.200
brand.300
brand.400
brand.500
brand.600
brand.700
brand.800
brand.900
brand.950

Accent — burnished brass

rare editorial emphasis — never for primary CTAs
accent.50
accent.100
accent.200
accent.300
accent.400
accent.500
accent.600
accent.700
accent.800
accent.900
success
Harmonised green
warning
Aged brass
danger
Restrained oxblood
info
Slate blue
03 — Buttons

Action, not ornament

Variants
Premium — use sparingly for marquee moments
Sizes
States
04 — Forms

Quiet, deliberate inputs

Eight characters, no spaces.

05 — Badges

Status at a glance

Elite series
Regional
Friendly
Confirmed
Pending review
Suspended
Information
National champion
06 — Cards

Structure without noise

Licence

Jean-Baptiste Morel

FFPJP · Ligue Provence-Alpes

FR-2026-00142
Active

Valid until 31 December 2026.

Upcoming

Championnat National des Clubs

La Ciotat · 14–16 June 2026

Teams
96
Format
Triplette
Registration
Open
Live · mène 9

Provence A vs. Languedoc B

Carreau 3 · quart de finale

Provence A
11
·
Languedoc B
7
07 — Gradients

Gradient surfaces

cta.bottle
cta.ivoryWarm
cta.accentWarm
surface.hero
surface.dark-hero
surface.pricing
08 — Glass & frost

Translucent primitives

glass.light
glass.heavy
glass.dark
frost.ivory
frost.bottle
frost.warm
09 — Editorial

Moments with restraint

"Un seul déplacement suffit à changer la mène. A single well-placed boule can reverse the round — and with it, the afternoon."
Marie Laroche · Fédération Française de Pétanque · Technical Director

Source of truth

All values shown here derive from packages/shared/src/design/tokens/. Never inline a hex, font, spacing step, or duration in a component. Canonical reference: docs/product/design-system/.