Arculati csomag
Napfelkelte a tengerparton, egyetlen jelben.
A Vibe of the City a hely, az emberek és az optimista pillanatok köré épül. Ezen az oldalon megtalálod a logót, a színeket, a tipográfiát és a letölthető anyagokat, amelyekkel helyesen használhatod a márkát.
A jel
Lekerekített térképtű, benne stilizált napfelkelte: sugarakat szóró nap, egy hullám a partnak, és egy lágy türkiz csillanás ott, ahol a reggeli fény megcsillan az íven.
- Szimbolika
- A hely (a tű), a part (a hullám) és az optimizmus (a felkelő nap). Három jel egyetlen ikonban – ugyanaz a gondolat, ami a terméket is mozgatja.
- Szabad terület
- Az ikon körül minden oldalon hagyj legalább egy napkorongnyi üres helyet. Ne zsúfold körbe szöveggel, fotóval vagy más jelekkel.
- Minimális méret
- Képernyőn legalább 24 px, nyomtatásban legalább 12 mm méretben használd az ikont. Ennél kisebb méretben a napsugarak szétesnek.
Logóváltozatok
Azt a változatot válaszd, amelyik a legjobb kontrasztot adja a háttérrel. Ha bizonytalan vagy, világos alapon a színes ikont, sötét alapon a sötét hátterű logóváltozatot használd.
Színpaletta
Az alábbi színek mind a globals.css-ben definiált CSS-változók. A változóra hivatkozz, ne a hex-kódra – a felületek változnak, a tokenek nem.
Márka
Brand
Primary actions, links, focus
- Hex
#2563eb- CSS
--brand
Brand deep
Hover state, dark accents
- Hex
#1d4ed8- CSS
--brand-deep
Brand light
Highlights on dark, soft fills
- Hex
#5fa8ff- CSS
--brand-light
Brand soft
Tinted backgrounds, callouts
- Hex
rgba(37,99,235,0.10)- CSS
--brand-soft
Kiemelés
Teal
Wordmark italic, accent strokes
- Hex
#04b7ce- CSS
--brand-teal
Sun
Sunrise disc, warm dot, peach accents
- Hex
#f4a261- CSS
--sun
Felület és tinta
Ink
Body text, dark surfaces
- Hex
#1e2a38- CSS
--ink
Sand
Default page background
- Hex
#faf6ee- CSS
--sand
Sand 2
Section banding, hover
- Hex
#f1ebde- CSS
--sand-2
Állapot
Positive
Success states, vibe-up
- Hex
#16a36a- CSS
--positive
Negative
Errors, vibe-down
- Hex
#dc2626- CSS
--negative
Neutral
Warnings, heads-up
- Hex
#d4a017- CSS
--neutral
Tipográfia
Inter a termék felületéhez, Fraunces a címekhez. A szóvédjegy együtt használja a Fraunces félkövér és dőlt változatát – ez a kettős stílus csak a szóvédjegyé.
Inter – termékfelület
Vastagságok: 400 / 500 / 600 / 700. Az Intert használd folyószöveghez, vezérlőkhöz, navigációhoz és adatokhoz.
Találd meg a pillanatod, bármelyik városban.
Napfelkelte a tengerparton
Időjárás, tömeg, események – egyben
Válassz egy várost és egy időszakot – az időjárást, a kikötői forgalmat és a helyi eseményeket egyetlen vibe-pontszámmá olvasztjuk, majd a jelből tervet készítünk, amit aznap követhetsz.
Az apró betűs szöveg és a metaadatok 13 px-esek.
Fraunces – címek
Vastagságok: 600 / 700, álló és dőlt. A Fraunces-t használd főcímekhez, szerkesztői címsorokhoz és a szóvédjegyhez.
vibeofthe•city
Találd meg a pillanatod, bármelyik városban.
Térközök és formák
Négy sarokkerekítés és négy árnyék szinte mindenre elég, amit építünk. Maradj ezen belül; nem adunk hozzá eseti értékeket.
Sarokkerekítés
sm
--radius-sm· 6 pxmd
--radius-md· 10 pxlg
--radius-lg· 16 pxxl
--radius-xl· 22 px
Árnyék
sm
--shadow-smmd
--shadow-mdlg
--shadow-lgbrand
--shadow-brand
Komponensek
Három gombváltozat, egy kártya, egy készlet állapotcímke. Ami ezen túlmegy, azt előbb beszéljük meg.
Málaga – a szombat remeknek ígérkezik
Meleg idő, kevés ember a kikötőben, két kulturális esemény a közelben. Vibe-pontszám: 84.
Mit tegyél és mit ne
Így igen
- A sötét alapú logóváltozatot használd `--ink` és fotók fölött.
- Hagyj levegőt – minden oldalon legalább egy napkorongnyit.
- CSS-változókat használj, ne nyers hex-kódokat.
Így ne
- Ne színezd át a jelet az ezen az oldalon látható változatokon kívül.
- Ne nyújtsd, torzítsd vagy forgasd el a logót.
- Ne tedd a színes ikont közvetlenül `--brand` alapra – elvész a kontraszt.
Letöltések
Minden anyag PNG formátumú. Termékfelületeken a színes ikont használd; az egyszínű változatokat olyan partneri megjelenésekhez, ahol egyetlen szín kell.
Sajtó és partnerségek
Más méretre, vektoros fájlra vagy közös arculatú anyagra van szükséged? Írj a hello@vibeofthe.city címre, és elküldjük.