Epix Gym
Design System
Jeden vizuálny jazyk pre celý web. Reálne tokeny, reálne komponenty. Ak to nie je tu, neexistuje to. Zdroj: globals.css a brand.json.
Základy
Farba
Paleta
Používaj názov tokenu, nie surový hex. Jedna zelená, jedna neutrálna škála.
Značka
primary
#97CB50
primary-hover
#7DA841
primary-muted
#B7DE86
Povrch
pozadie
#070C06
karta
#12161042
okraj
#FFFFFF1A
Text
biela
#FFFFFF
sekundárna
#D4D4D8
tlmená
#71717A
Značka zdroj
zelená
#97CB50
tmavá
#0D0E10
telo
#535353
Gradient
pozadie webu
#97CB50 do #070C06
Logo
Značka
Vektorový wordmark v dvoch variantách (biely na tmavom, čierny na svetlom), brand lockup a favicon.
epix-favicon.jpg
Typografia
Wix Madefor Display
Jeden font. Váha robí prácu. Veľkosti škálujú na väčších obrazovkách.
h1 . hero . 800
Fitko s prístupom, kedykoľvek ho potrebuješ.
h2 . sekcia . 700
Fitko s prístupom, kedykoľvek ho potrebuješ.
h3 . podsekcia . 600
Fitko s prístupom, kedykoľvek ho potrebuješ.
h4 . titul karty . 600
Fitko s prístupom, kedykoľvek ho potrebuješ.
telo . 400
Fitko s prístupom, kedykoľvek ho potrebuješ.
meta . 500
Fitko s prístupom, kedykoľvek ho potrebuješ.
Priestor a radius
Rytmus
Malá uzavretá škála zaoblení. Rovnaká rola, rovnaký radius, všade.
dlaždica galérie
karta / vstup
CTA / featured
tlačidlo / chip
Povrch a hĺbka
Vrstvy
Zeleno-čierny gradient ako základ. Tieň dvíha, nezdobí.
Komponenty
Tlačidlá
Akcie
Primárne = zelená pill. Glass = priehľadný okraj. Jedno primárne na obrazovku.
Karty
Levitujúce kontajnery
Veľké 2rem rohy, priehľadné sklo + blur, tieň. Interaktívna karta sa pri hoveri nadvihne a zasvieti zeleno.
.card-interactive (hover)
Interaktívna
Klikateľné: cenník, tréneri, blog.
.card-featured
Zvýraznená
Hlavná ponuka, jedna na sekciu.
Karta s fotom
Galéria, blog.
Odznaky
Značky
Číselný krok je vyplnený zelený kruh. Tagy sú pilulky.
Ovládanie
Vstupy
Textové pole je 16px pill-rect (ako tlačidlá). Prepínač jazyka je select.
Navigácia
Plávajúci pruh
Fixný pill, priehľadný hore, po scrolle čierny blur. Aktívne = zelené podčiarknutie.