Design profile

The design language behind all four apps, gathered on one page — colour, typography, surfaces, components and brand. This is the source the products are built against.

Brand

Borromean rings in burnished brass (federation · club · player, interlinked) + Fraunces wordmark. Never recoloured; the rings keep their gold gradient on a light ground.

Core values (värdeord) — copy & tone contract

Omtanke · Care

We build for everyone — ages 7 to 90, the whole world. Accessibility is never optional.

Hantverk · Craft

The details decide. Consistency, precise states and well-considered flows.

Precision

Sport is built on exactness. Data, results and rules must be right — always.

Samhörighet · Community

One platform that ties clubs, federations and players together across borders.

Colour — tokens

All values are CSS variables in global.css (mirroring _palette.json). Always reference the token — never raw hex.

Brand · bottle green

brand.700 is canonical. Primary CTAs, active nav, the core of the brand.

100

200

300

400

500

600

700

800

900

950

Ink · warm neutrals

Text, surfaces, borders. Never cold grey — always warm neutral.

100

200

300

400

500

600

700

800

900

950

Accent · burnished brass

Rare editorial emphasis. NEVER for primary CTAs.

100

200

300

400

500

Semantic colours

Success

Warning

Danger

Info

Typography

Two typefaces. Fraunces (display) — optical sizing gives it weight. Inter (body & interface) — neutral and legible even at small sizes. Never mix in a third.

Fraunces · font-display

Precision in every throw

Petanque Life

Inter · font-sans

20 / 600 — Interface heading

17 / 400 — Base text. Legible for an audience aged 7–90. Line height 1.6 for calm reading across long passages and 61 languages.

14 / 400 — secondary text

12 / 600 · 0.12em — overline

13 · JetBrains Mono — code & tabular data

Surfaces, borders & radii

Canvas

--surface-canvas

Sunken

--surface-sunken

Raised

--surface-raised

Radii

4px

6px

8px

12px

2xl

16px

3xl

24px

full

999px

Component gallery

Buttons

≥44px touch target. Primary = brand.700, never accent.

Badges & status (colour + text, never colour alone)

● Active ◐ Pending ▲ Expired ◆ Info Draft

Form fields (Field)

Name * Class District Filled in automatically from the club Public profile Show me in the public leaderboard

Cards

Federation Points

#42

↑ 3 places

DM Skåne 2026

Doublette · 12 July · Malmö BK

● Registration open

Table

#	Player	Club	Points	Trend
🥇 1	Anna Bergström	Malmö BK	1 820	↑ 2
🥈 2	Erik Lund	Lund BK	1 655	↓ 1
3	Maria Berg	Ystad Boule	1 540	– 0

Navigation

Sidebar (admin/sys)

Competitions

Members

Finance

Bottom-tab (app)

🏠Home

🏆Competitions

📈Ranking

The detailed developer catalogue (every token/primitive/pattern) lives in the design system.