Design system
A myko alapelemei: színek, betűk, komponensek.
Logó és név
mykoA név mindig kisbetűs: myko. A logó fehér, lekerekített csempén áll, így világos és sötét témában is ugyanúgy néz ki.
Márkaszínek
Kék
#3E51FC · --myko-blue
Lila
#A725FC · --myko-violet
Magenta
#E742B5 · --myko-magenta
Korall
#FD6A5B · --myko-coral
Bíbor
#5015B2 · --myko-purple
Indigó
#131154 · --myko-indigo
bg-brand · teljes színátmenet. Díszítésre: haladásjelző, kipipált elem, wordmark.
bg-action · kék→lila. Fő gombok háttere, fehér szöveggel.
Szemantikus színek
A felület mindig ezeket használja, nem a nyers márkaszíneket. Témaváltáskor (jobb felső ikon) automatikusan cserélődnek.
canvas
Oldal háttér
surface
Kártyák, mezők
surface-muted
Másodlagos felület, léptető
line
Keretek, elválasztók
fg
Elsődleges szöveg
fg-muted
Másodlagos szöveg
fg-subtle
Halvány szöveg, placeholder
primary
Linkek, ikonok, fókusz
primary-soft
Lágy kiemelés háttere
on-primary-soft
Szöveg lágy kiemelésen
deal
Kedvezmény szöveg
deal-soft
Kedvezmény háttér
plus
Lidl Plus
Tipográfia
Comfortaa
Google Fonts, 300–700 vastagság. Szövegtörzs: medium (500), címek és árak: bold (700).
Árvíztűrő tükörfúrógép · 0123456789 Ft
Gombok
button("primary", …)
button("soft", …)
button("quiet", …)
button("ghost", …)
Címkék
Mezők és vezérlők
Kártyák
Üres állapot
Még üres a listád
Írj be egy tételt fent, vagy válogass a heti akciókból.
Ikonok
Lucide (lucide-preact), 2 px vonal, kerek végek. Méret: size-4 gombokban, size-5 fejlécben, size-6 önállóan.
Formák és árnyékok
rounded-tile
1 rem · képek
rounded-card
1.5 rem · kártyák
rounded-full
gombok, mezők
shadow-float
lebegő dokk