Interní stránka
Design system
Zdroj pravdy je app/assets/tailwind/application.css.
Tady je vidět, jak tokeny vypadají v praxi.
Barvy
Čísla u odstínů jsou kontrast vůči hlavnímu pozadí. Na text smí jen to,
co má 4.5 a víc - limetka 500 je značková, ale píše se do ní, ne s ní.
Podklady
Bark
bark-200
#C9BDAF
disabled
Clover
clover-100
#EEF5DC
plochy
clover-300
#C5DF8D
dekorace
clover-500
#8FC03D
značková
clover-900
#2C3F16
10.3:1
Terra
terra-700
#A0451A
5.6:1 – CTA
Typografie
font-display · Fraunces · h1 · text-hero
Zvířata znáte jménem
font-display · h2 · text-4xl
Příliš žluťoučký kůň úpěl ďábelské ódy
font-sans · Figtree · text-lg
Nejsme zábavní park. Chodí se k nám po domluvě, v malých skupinách
a bez tlačenice - příliš žluťoučký kůň úpěl ďábelské ódy.
Tón komunikace
Takhle ano
- „Běta stojí 900 Kč měsíčně, pokryto je 700."
- „Kryštof přijel podvyživený a s přerostlými kopyty."
- „Psy bohužel dovnitř pustit nemůžeme."
Konkrétně, jménem, s čísly. Přiznáme, co nejde.
Takhle ne
- „Pomozte nám zachránit nevinná zvířátka!"
- „Každý příspěvek se počítá, děkujeme za vaši štědrost."
- „Naše zařízení nabízí unikátní zážitek pro celou rodinu."
Bez patosu, bez zdrobnělin, bez marketingové omáčky.
Komponenty
Tlačítka
Chci adoptovat
Zavolat
Otevřít v mapě
Terra je vyhrazená pro adopci - jeden hlavní cíl na stránku.
Clover je pro všechno ostatní, ghost pro vedlejší akce.
Štítky a ukazatel pokrytí
Koza kamerunská · 7 let
Zbývá poslední krok
Značka
Čtyřlístek je jediný symbol značky - dědí barvu přes currentColor,
takže funguje na světlém i tmavém podkladu. Minimální velikost 24 px, jinak zmizí žilky.
