Barvy

Brand green + sage a pětibarevný kategoriální systém. Vše přes token (CSS var / Tailwind utilita) — UI nikdy nesahá na hex. Hodnoty sampled z brand manuálu AjemFIT.

8
Brand tokenů
green + sage
5
Kategorií
× scale 100–900
45
Scale kroků
kategoriální tóny
4
Gradienty
cover · forest · sage · mint

Brand & sage

Nosná zelená (logo, tmavé plochy) a sage podklad. green-900 je oficiální barva loga.

#072d2d
--green-950

Nejtmavší — hero/footer plochy, start gradientu

#17312f
--green-900

BRAND deep — barva loga, primární CTA, brand marks

#0e6061
--green-700

Teal — konec forest gradientu

#0e5a4e
--green-600

Brand accent — text, odkazy, aktivní (AA na bílé)

#3a9955
--green-500

Vivid — highlight, dots

#c2dfca
--sage-300

Sage — značkový mint

#d7eadc
--sage-200

Light sage

#eaf4ec
--sage-100

Near-white mint

Gradienty

Nerovnoměrné (radiální) gradienty + jemný grain/dither film — prémiový, netuplý dojem jako na brand coveru. Plochý gradient bandeje; grain to rozbije.

grad-cover + Grain
--grad-cover

Radiální teal glow · hero, brand cover

--grad-forest

green-950 → green-700 · dark plochy, footer

--grad-sage

white → sage-300 · jemné podklady

--grad-mint

sage-100 → sage-300 · sekce přechody

Kategoriální gradienty

Každá kategorie má vlastní radiální glow (scale 400 → 600 → 900 + grain). Použij na kategoriální hero, bannery a produktové karty dané kategorie.

Adaptogen & Herbs
Prozkoumat#3a9955
400 → 600 → 900
Organic Mix
Prozkoumat#126e6e
400 → 600 → 900
Vitamins & Minerals
Prozkoumat#826cae
400 → 600 → 900
Organs
Prozkoumat#a72f54
400 → 600 → 900
Beauty
Prozkoumat#d9b8a1
400 → 600 → 900

Grain / dither — porovnání

bez grainu — plochý, bandeje
s grainem — <Grain />

<Grain opacity blend /> (components/shared) — polož do relative isolate rodiče s gradientem.

Kategoriální systém

Pět produktových kategorií = sémantický akcentní systém s vlastním piktogramem. Každá má base, soft tint (podklad) a škálu 100–900. Produkt vždy patří do jedné kategorie.

Adaptogen & Herbs

#3a9955

Organic Mix

#126e6e

Vitamins & Minerals

#826cae

Organs

#a72f54

Beauty

#d9b8a1

Adaptogen & Herbs

--cat-adaptogen-100…900
100
200
300
400
500
600
700
800
900

Organic Mix

--cat-organic-100…900
100
200
300
400
500
600
700
800
900

Vitamins & Minerals

--cat-vitamins-100…900
100
200
300
400
500
600
700
800
900

Organs

--cat-organs-100…900
100
200
300
400
500
600
700
800
900

Beauty

--cat-beauty-100…900
100
200
300
400
500
600
700
800
900

Podkladová paleta

10% krytí primárních barev kategorií — jemná podpůrná vrstva pro pozadí, zvýraznění sekcí a oddělení obsahu. + tmavá plocha (surface-dark).

Semantic aliasy

Preferuj alias (bg-brand, text-brand-deep) před raw scale. Scale jen když alias neexistuje.

#0e5a4e
--brand

Akcent text, odkazy, aktivní nav, dots

#17312f
--brand-deep

Primární CTA, tmavé plochy, brand marks

#c2dfca
--brand-soft

Soft fills, sekundární podklad

#3a9955
--brand-accent

Vivid highlight

Surfaces

Podklady od bílé po deep green. Dark plochy = surface-dark, ne fg-1.

#ffffff
--page

Root pozadí stránky

#ffffff
--card

Zvednutá karta / panel

#f1f7f3
--surface-soft

Jemné odlišení, vnitřní well

#dcebe0
--surface-sage

Mint section bg

#e7f1ea
--surface-mint

Alt soft mint

#f6ede6
--surface-blush

Teplý beauty tint — promo

#17312f
--surface-dark

Footer, dark feature karty, hero

Foregrounds

Green-tinted neutrály pro text. fg-1 nejtmavší, fg-4 nejsvětlejší; on-dark varianty pro tmavé plochy.

#13241f
--fg-1

Primární text, nadpisy

#3a4a44
--fg-2

Body

#6b7872
--fg-3

Muted, captions

#a6b0ab
--fg-4

Placeholder, dividers

#eaf3ec
--fg-on-dark

Text na tmavém

#9db3aa
--fg-on-dark-muted

Muted na tmavém

Hairlines

Nikdy border-* utilita — vždy ring-1 ring-inset ring-[var(--hairline)] nebo inset box-shadow.

--hairline-soft

rgba(19,36,31,0.06)

Nejjemnější — vnitřní rámečky

--hairline

rgba(19,36,31,0.10)

Standardní hairline ring

--hairline-strong

rgba(19,36,31,0.16)

Hover / důraz

--hairline-on-dark

rgba(255,255,255,0.12)

Na tmavém podkladu

State colors

Base brights pro fill, -fg darks pro text na světlém podkladu (legibilita).

success

base #3a9955

—fg #1f6b3d

Skladem, potvrzeno

warning

base #e8a317

—fg #8a5a00

Pozastaveno, sklad nízký

error

base #e5484d

—fg #b4232a

Vyprodáno, chyba

info

base #2a8fb7

—fg #155e78

Info chip

Color combinations

Schválené páry text × podklad. Premium = deep green plochy, vivid green jen pro akcent.

AjemFITTělo, které tě poslouchá.Do košíku

Deep + sage text + vivid akcent

AjemFITTělo, které tě poslouchá.Do košíku

Bílá + fg-1 + brand link

AjemFITTělo, které tě poslouchá.Do košíku

Sage sekce + fg-1 + deep CTA

AjemFITTělo, které tě poslouchá.Do košíku

Hero (nejtmavší) + vivid CTA

AjemFITTělo, které tě poslouchá.Do košíku

Beauty blush + organs akcent

AjemFITTělo, které tě poslouchá.Do košíku

Vivid plocha + deep CTA

Contrast checker

Vyber text a podklad z tokenů — živý WCAG poměr a hodnocení.

AjemFITPříklad běžného textu 16px
16.16:1
Text AAAVelký AAA

Surface matrix

Text × Surface — živý kontrast každého foregroundu na každém podkladu. AA = 4.5:1 (běžný text).

Text \ Podkladpagecardsurface-softsurface-sagesurface-mintsurface-blushsurface-dark
fg-116.216.214.913.114.014.01.2
fg-29.49.48.67.68.18.11.5
fg-34.64.64.23.74.04.03.0
fg-on-dark1.11.11.01.11.01.012.2

Topografický pattern

Vrstevnicový pattern — grafický symbol filozofie značky: cesta, růst, příroda, terén. Pozitivní (světlý na tmavém) i negativní (tmavý na světlém).

Pozitivní
Negativní

Komponenta <TopoPattern> (components/shared) — themuje přes currentColor, slice fill.

Implementace

  • Token = CSS var v app/globals.css. UI nikdy nepoužívá raw hex ani Tailwind palette barvy.
  • Preferuj sémantický alias (bg-brand-deep, text-fg-2) před raw scale.
  • Hairline vždy přes ring (nebo .ring-hairline), nikdy border-*.
  • Produkt patří do jedné kategorie → jeho akcent je barva té kategorie (var(--cat-…)).
  • Dark plochy = surface-dark, ne fg-1.