Style Guide
Minden létező UI-elem egy helyen - amikor valami újat építünk, innen induljunk, ne egy másik oldal
másolásából. Ez az oldal nincs a navigációban és ki van zárva a keresőkből (noindex).
Színek
A teljes paletta gyakorlatilag fekete-fehér-szürke - a hangsúlyt eddig méret, súly és mozgás adta, nem szín. Az #E30567 az első accent szín, eredetileg csak az og-image.jpg-n, azóta a hero cím kiemelt szavában is él.
Page background
#000000
body, .bg-black
Panel / toggle
#f2f2f2
menu-toggle, mobile-menu__panel
Primary text
#ffffff
text-white
Nav link text
black/90
text-black/90 (a panelen)
Intro / body on panel
black/70
text-black/70
Menü footer (panelben)
black/60
text-black/60, hover:text-black
Promo body text
white/80
text-white/80
Oldal footer / social
white/60
text-white/60, hover:text-white
Promo box border
white/10
border-white/10
Muted (prose)
#808080
.text-muted - hero eyebrow (home-full.html), 404/coming-soon kiemelt szavak
Accent
#E30567
og-image.jpg pill tagek, hero cím kiemelt szava (home-full.html)
Tipográfia
Syne (csak 700-as súly) a kiemelt szövegekhez/címekhez - font-display -, Satoshi (variable, wght 300-900, jelenleg 400/500/600 használatban) mindenhol máshol - alapértelmezett, nem kell rá class. Mindkettő self-hosted, ld. README "Fontok".
font-display · Syne 700
Aa Bb Cc 123
| Class | Méret | Súly | Használat |
|---|---|---|---|
| text-8xl | 96px | 700 | főoldal hero cím (lg) |
| text-6xl | 60px | 700 | főoldal hero cím (md), tartalmi oldal H1 (lg) |
| text-5xl | 48px | 700 | tartalmi oldal H1 (md), pl. Rólunk |
| text-4xl | 36px | 700 | menüpontok (md+), H1 mobil skála |
| text-3xl | 30px | 700 | menüpontok (mobil), promo box cím (md+) |
| text-2xl | 24px | 700 | promo box cím (mobil), H2 |
Satoshi · 400 / 500 / 600
Aa Bb Cc 123
| Class | Méret | Súly | Használat |
|---|---|---|---|
| text-base | 16px | 400 | törzsszöveg - bekezdés, nav, footer |
| text-base | 16px | 500 | promo box szövege |
| text-base | 16px | 600 | gomb felirat - minden méretben |
| text-xl | 20px | 600 | nagy gomb felirat, md+ |
Tartalmi szöveg linkkel (.prose-invert)
Ez egy minta bekezdés, amilyen a tartalmi oldalakon (pl. Rólunk) fut - a törzsszöveg
white/80, egy ilyen szövegközi link viszont white/60-ból
indul, és hoverre teljes fehérre vált.
Ugyanez világos háttéren (pl. panel) - illusztráció
Ugyanez a bekezdés világos háttéren - a törzsszöveg
black/80, egy
ilyen szövegközi link
pedig black/60-ból indul, és hoverre teljes feketére vált.
Gomb
layouts/partials/button.html - "variant" (elsődleges/ másodlagos), "size" (nagy/közepes/kicsi), "icon" (opcionális bool, felülírja a méret saját alapértelmezését) és "surface" ("dark" alapértelmezett | "light" - melyik hátteren ül a gomb, a teljes szín-készletet fordítja meg, a border-vastagságot nem) paraméterrel. A felirat súlya font-semibold (600) minden méretnél - eggyel súlyosabb az oldal alap 400-asánál. Az elsődleges a másodlagos színeinek fordítottja (kitöltött háttér, inverz szöveg), nem külön választott szín. A színek statikusak, hoverre nem változnak - egyedül a szöveg és a nyíl (ahol van) animálódik (.text-roll-trigger). Ugyanez a komponens fut a promo boxban és a Rólunk oldal CTA kártyáján is.
Sötét felület (surface: "dark", alapértelmezett) - háttér #000000
Világos felület (surface: "light") - háttér #f2f2f2
Nagy - 56px, R 28, 2px vonal, 16→20px szöveg (text-base → text-xl)
Közepes - 46px, R 23, 1px vonal, 14px szöveg (text-sm)
Kicsi - 36px, R 18, 1px vonal, 12px szöveg (text-xs), ikon nélkül
Ikonok
Nincs ikonkészlet/font - mindegyik kézzel épített CSS vagy inline SVG, a konkrét használat pontos méretéhez igazítva, nem egy általános glyph-kollekcióból.
Toggle gomb - a tényleges elem
Toggle gomb - zárva
Gomb 46×46 (mobil) / 56×56 (md+), a valódi header elem.
Toggle gomb - nyitva (X)
Ugyanaz az elem, .is-open - CSS-only translate majd rotate.
Az ikonok önmagukban
Hambi
.menu-toggle__icon, 23×17 / 28×17, 3px vonal.
X (nyitott állapot)
.menu-toggle.is-open - CSS-only translate majd rotate, nincs külön "X ikon".
Nyíl (nav sor vége)
Ugyanaz a nyíl mint a nagy gombé (20×20, 2px vonal). Alap szín black/90, hoverre black/50-re halványul - próbáld ki a kártyán. Statikus, dekoratív - a linksorok nem nyílnak, nincs mögötte almenü.
Nyíl (arrow-outward)
Nagy: 20×20 keret, 2px vonal. Közepes: 16×16 keret, ~1.6px effektív vonal (a nagy SVG arányos kicsinyítése, nem külön rajz). Mindkettőnél 2px margin, a szár a belső doboz átlója. Külön hover-animáció a szövegtől - ld. Gomb fent.
Hero szekció (főoldal)
home-full.html hero blokkja szó szerint másolva - eyebrow (.text-muted, ld. Színek fent), cím (text-8xl skála, ld. Tipográfia fent) és a két CTA gomb (ld. Gomb fent) együtt, ugyanazokkal a class-okkal és ugyanazzal a mobil (közepes) / desktop (nagy) gomb-párral, mint élesben - méretezd át az ablakot a töréspont ellenőrzéséhez.
Design. Marketing. Development.
Play Bold.
Design Smart.
Promo box
layouts/partials/promo-box.html - egyetlen közös komponens a mobilmenü jobb oldali kártyája és minden cta_page-vezérelt tartalmi oldal alatt. A kép (promo_bg.jpg, background-size: cover, filter nélkül) és a szerkezet a partialban van rögzítve, nem paraméter - egyféle promo box van, csak a szöveg/CTA változik hívásonként. Radius 23px mobil / 28px md+ (a toggle/panel saját párja, ld. Spacing & radius lent), border 1px, szín white/25. A szöveg font-medium (500) - eggyel súlyosabb az oldal alap 400-asánál, mert ez a konverziós pont. A CTA gomb saját szabályt nem kap, a button.html alap font-semibold (600) súlya már úgyis mindenhol érvényes.
Éles komponens - promo_bg.jpg háttérrel
👋 Nice to see you!
Our experienced team helps you save money without sacrificing quality. Let's talk about your project.
Say Hello Say HelloIllusztráció - kép nélkül
👋 Nice to see you!
Our experienced team helps you save money without sacrificing quality. Let's talk about your project.
Say Hello Say HelloTeljes szélességű változat - szöveg balra, CTA jobbra (60-40%, mobilon közepes és teljes szélességű)
👋 Nice to see you!
Our experienced team helps you save money without sacrificing quality. Let's talk about your project.
Világos verzió (promo_bg_wht.jpg) - mindhárom elrendezésből, illusztráció
Éles elrendezés, világos háttérrel
👋 Nice to see you!
Our experienced team helps you save money without sacrificing quality. Let's talk about your project.
Say Hello Say HelloKép nélküli illusztráció, világos háttérrel
👋 Nice to see you!
Our experienced team helps you save money without sacrificing quality. Let's talk about your project.
Say Hello Say HelloTeljes szélességű elrendezés, világos háttérrel
👋 Nice to see you!
Our experienced team helps you save money without sacrificing quality. Let's talk about your project.
Spacing & radius
A visszatérő, névvel is érdemes megjegyezni értékek - ne új, közeli számot találjunk ki, ha ezek egyike már megfelel.
60px
panel padding (md+), header top offset
48px
promo box padding (md+)
32px
promo box padding (mobil)
28px
gomb radius, nagy méret / toggle-panel / promo box radius (md+) - mind a toggle magasságának fele
23px
toggle-panel / promo box radius (mobil) - a toggle mobil magasságának fele
56px
toggle gomb / gomb magasság, nagy méret (md+)
46px
toggle gomb magasság (mobil)
Vonalvastagság (border/stroke) külön szekcióban lent - ott nem egységes, 3 érték is előfordul, attól függően, mennyire "interaktív" az elem.
Vonalvastagság
Csak 3 érték fordul elő a teljes oldalon, mindig ugyanaz a jelentéssel: minél vastagabb, annál "gombszerűbb"/interaktívabb az elem.
1px
promo box border (border-white/10) - alig látható elválasztó, nem interaktív elem. Kivétel: közepes/kis gomb (46px/36px) - ott a vékonyabb vonal a kisebb mérethez igazodik, nem az interaktivitás hiányához.
2px
Nagy gomb border + nyíl stroke, nav "+" ikon - kattintható/ interaktív elemek
3px
toggle hamburger/X vonalai - a legfontosabb, mindig látható interakciós pont
Mobilmenü, toggle, hover-animáció
Ezek élő komponensek, nincs értelme különállóan megismételni őket ezen az oldalon - minden oldal saját header.html-je pontosan ugyanaz. Nyisd meg a menüt a jobb felső sarokban (toggle gomb → nav linkek hover-görgetéssel → promo box → CTA saját ikon-animációval).