Coach Club← Till startsidan

Produktfamilj

Ett visuellt språk — tre appar

Coach Club sätter standarden. GoalAchiever och MetaCheck Up använder samma färger, typografi, radier och skuggor så att de känns som samma familj — utan att någon av apparna behöver ändra sin layout eller sina funktioner.

Hämta design-tokens

En enda CSS-fil med hela systemet: färger, typsnitt, radier, skuggor och delade layoututiliteter. Klistra in innehållet i respektive apps src/styles.css direkt efter @import "tailwindcss";.

Ladda ner companion-tokens.css

Färger

Varm minimalism: papper, sand, djup skog. Terracotta bär handling, guld bär status.

  • --background

    Sidbakgrund — varmt papper

  • --surface

    Sektioner och lugna ytor

  • --card

    Kort och paneler

  • --primary

    Primärknappar — djup skog

  • --terracotta

    Handling, eyebrows, aktiva val

  • --gold

    Premium, certifiering, utmärkelser

  • --muted

    Neutral bakgrund, inaktivt

  • --destructive

    Fel och borttagning

Diagrampalett (livshjul, radar, trender)

1

2

3

4

5

6

7

8

Typografi

Rubriker · Fraunces serif

Se dina klienter växa

font-display · h1, h2, h3

Brödtext · Inter sans

Varje session får en AI-brief som gör dig förberedd på 30 sekunder. Klienten äger sin data och kan exportera allt när som helst.

font-sans · body, ui

Komponentspråk

Knappar

Panel

surface-panel — lugn yta utan skugga, för grupperat innehåll.

Kort

card-soft — vit yta, 1 px kant, mjuk skugga, radie 2xl. Standard för allt innehåll.

Regler för synkning

  1. 1Använd alltid semantiska tokens. Skriv aldrig bg-white, text-black eller bg-[#hex] i komponenter.
  2. 2Rubriker sätts i serif (Fraunces), brödtext i sans (Inter). Ingen tredje typsnittsfamilj.
  3. 3Guld används sparsamt — enbart premium, certifiering och utmärkelser. Terracotta bär handling.
  4. 4Kort och paneler använder radie 2xl, mjuk skugga och 1 px kantlinje. Inga hårda slagskuggor.
  5. 5Sektionsbredd: container-tight (68rem) för sidor, container-narrow (42rem) för läsflöden.
  6. 6Eyebrow-etiketter är versaler, 12 px, spärrad 0.2em, i terracotta.

Typsnitten laddas via <link> i root-layouten (Inter 400–600, Fraunces 400–500) — inte via @import i CSS.