Makara · vizuális rendszer · 2026. október

Egy rendszer, amire minden Makara-felület épül.

Ez az oldal a márka élő referenciája. Innen veszed a logót, a színeket, a betűket és az ikonokat, és itt találod a szabályokat a fotós felületekhez és a mozgáshoz. A bemutató oldal is ebből készült.

MélységA belső működés. Rendszer, folyamat, nyugalom.

FelszínAmi látszik. Arculat, fotó, videó, digitális jelenlét.

PartAhol a márka megszólal. Üzenet és hang.

RitmusTiszta és piszkos felületek váltakoznak. Sok levegő, lassú mozgás.

01 · Logó

Logó

A logó a hullám miatt Makara. A hullám helye és vastagsága rögzített döntés: betűvastag sáv, ami a betűket kettévágja. Ezt senki nem rajzolja újra.

Változatok

Primary · pozitívVilágos alapra. Ez a kanonikus logó.

SVG PNG

Primary · negatívSötét alapra. A hullám 9%-kal vastagabb, hogy sötéten is betűvastagnak lássék.

SVG PNG

Élő logóDigitális hero-felületre. 16 mp alatt egyszer megmozdul a hullám, és visszaáll a primary helyzetébe.

SVG

Hullámmentes · másodlagosAhol a hullám nem olvasható: nagyon kis méret, hímzés, gravírozás.

SVG PNG Negatív

Ikon · pecsétFavicon, profilkép, és rejtőző díszítőelem a színfelületeken.

SVG PNG Negatív

Favicon · app ikonLime ikon mélységkék alapon, lekerekített négyzetben. Ez az egyetlen hely, ahol sarok kerekítés van.

SVG

Védőtér és méret

1 × A-vonalVédőtér minden oldalon: az első A feletti vonal magassága (a logó szélességének 2,24%-a).

96 pxA primary legkisebb szélessége képernyőn. Ez alatt a hullámmentes logó vagy az ikon jön.

16 pxAz ikon legkisebb mérete (favicon).

6,83 / 7,45A hullám vastagsága logóegységben: pozitív / negatív. Egyenlő a betűszárral.

Helyes és helytelen használat

Sötét alapon a negatív változat.

Élénk színfelületen a sötét primary.

A pozitív fájl invertálva sötét alapon: a hullám elvékonyodik. Használd a negatívot.

Ne nyújtsd és ne torzítsd.

Ne színezd a palettán kívüli színre. A logó sötét vagy gyöngyház.

Világos logó élénk színen nem olvasható. Élénk felületen mindig sötét.

02 · Színek

Színek

Mélységkék alap, gyöngyház szöveg, és négy élénk szín nagy felületekre. Az élénk színeken mindig sötét szöveg áll, mert világos szöveg egyiken sem éri el az olvashatósági minimumot.

Alapszínek

LegmélyebbAa · 16.3 : 1

abyss--mk-abyss · rgb 2, 8, 15

AlapAa · 15.8 : 1

ink--mk-ink · rgb 5, 13, 22

Mély felületAa · 13.6 : 1

deep--mk-deep · rgb 11, 31, 46

VonalAa · 10.5 : 1

line--mk-line · rgb 27, 52, 70

Halk szövegAa · 7.5 : 1

slate--mk-slate · rgb 143, 163, 178

Másodlagos szövegAa · 13.3 : 1

mist--mk-mist · rgb 201, 215, 224

Szöveg, világos alapAa · 15.8 : 1

pearl--mk-pearl · rgb 232, 230, 242

Arculati színek

MélységAa · 12.2 : 1

cyan--mk-cyan · rgb 0, 224, 255

FelszínAa · 16.5 : 1

lime--mk-lime · rgb 198, 255, 61

PartAa · 6.8 : 1

orange--mk-orange · rgb 255, 106, 31

NévAa · 5.6 : 1

pink--mk-pink · rgb 255, 46, 147

Szín a rétegekhez

Mélységcyan · működés, rendszer

Felszínlime · arculat, kép, videó

Partorange · kommunikáció, kapcsolat

Névpink · a makara, márkapillanatok

Engedélyezett párosítások

Aapearl / ink · 15,8 : 1

Aapearl / deep · 13,6 : 1

Aaslate / ink · 7,5 : 1

Aaink / pearl · 15,8 : 1

Aaink / cyan · 12,2 : 1

Aaink / lime · 16,5 : 1

Aaink / orange · 6,8 : 1

Aaink / pink · 5,6 : 1

Tiltott: pearl szöveg cyan, lime, pink vagy orange felületen (1,0–2,8 : 1).

03 · Tipográfia

Tipográfia

Egy betűcsalád, a Futura. Weben, ahol a Futura nincs telepítve, a Jost veszi át: ingyenes, Google Fonts-ról tölthető, és ugyanarra a geometrikus vázra épül.

Elsődleges

Futura / Futura PTNyomdai anyagok, prezentáció, logó környezet. Licenckötelesen.

Webes tartalék

JostWeboldal és digitális felület, ha a Futura nem érhető el.

Light 300Regular 400Medium 500Semibold 600

Betűméret-skála

Display56–140 px · 600 · 0,95 · −0,015em

Hordozunk.

H140–76 px · 600 · 1,02

Három réteg. Egy csapat.

Statement24–38 px · 500 · 1,3

Az ügyfél nem három beszállítóval tárgyal, hanem egy csapattal.

Lead19–23 px · 400 · 1,6

A mélység nála nem ellenség: ő az, aki benne is épségben célba juttatja, amit rábíztak.

Body18 px · 300 · 1,65 · max 44ch

A cég belső működése: a folyamatok, a rendszerek és a Nitrogen tartalomkezelő és vállalatirányítási rendszer, amelyre a mindennapok épülnek.

Label13 px · 600 · 0,24em · nagybetű

Így dolgozunk

Small12 px · 500 · 0,12em · nagybetű

Makara is an EI × 7074 Company

Egy kiemelés soronként: egy szó színnel (lime a sötéten), sosem dőlttel.
Címek balra zártak. Középre zárás csak egyetlen nagy állításnál (lásd Vállalás).
Nincs aláhúzás szövegben, csak linken és szöveges gombon.

04 · Ikonok

Ikonkészlet

Alapkészlet a betűk geometriájából: egyenes vonalak, szögletes végek, éles sarkok. Kattints egy ikonra, és letöltöd SVG-ben. Színük mindig a környező szövegé.

arrow-right arrow-down external menu close plus check mail phone download play photo video layers wave system chat calendar pin heart

24 × 24Rács, 2 px biztonsági margóval.

2,5 pxVonalvastagság. Ez a betűszár arányát követi.

SzögletesSquare vég, miter sarok. Nincs kerekítés.

currentColorAz ikon a szöveg színét veszi fel.

05 · Komponensek

Komponensek

Az oldal építőkockái. Mind szögletes, árnyék nélküli, és a hover legfeljebb 2–4 px mozgás.

Így dolgozunk Beszéljünk

Szöveges linkSötét felületen, 2 px színes aláhúzással. A nyíl hoverre 6 px-t lép.

Beszéljünk Másodlagos

Tömör gombSzínfelületen ink gomb gyöngyház szöveggel. 56 px magas.

Mélység

Réteg-kártya rejtőző ikonnalTeljes színfelület, az ikon 13–20%-os ink, félig kilóg. Lassan sodródik, egérre elmozdul. Vidd fölé.

Így dolgozunk

Alapértékek

Szakaszcímke és mobilmenüCímke a szekció színével. Mobilon „Menü” felirat kétvonalas ikonnal, teljes képernyős panelt nyit.

06 · Felületek

Fotó, szín, grain

A piszkos felület saját fotóból épül négy lépésben. Stockfotó nincs. A fotó a háttérben szürkén dolgozik, a szín adja a felületet, a grain a textúrát.

Négy lépés

1 · Saját fotóVíz, fény, árnyék, mozgás. Saját felvétel.

2 · Szürke + kontrasztgrayscale(1) contrast(1.15)

3 · Színfelület 90%Egy arculati szín, normál keverés, 88–90%.

4 · Grain320 px csempe, overlay keverés, 60%. Áll, nem vibrál.

Felülettípusok

HeroSzínes fotó, ink 80%

SzínfelületSzürke fotó, szín 90%

ZárásInk szöveg színen

Ritmus

Hero

Név

Rétegek

Vállalás

Kinek

Zárás

Piszkos (fotó + grain) és tiszta (tömör szín, csak tipográfia) felváltva.

Szöveg fotón csak 80% feletti overlayjel.
Szekciónként egy arculati szín.
Grain csak fotós felületen.
Fotóválasztás: horizont, sziluett, mély árnyék, víz mozgása.

Nincs stockfotó, nincs AI-generált kép.
Nincs színátmenet két arculati szín között.
Nincs grain tiszta, tipográfiai felületen.
Nincs scanline, csíkos minta, mozgó grain.

CSS recept

<section class="mk-surface" style="--mk-c: var(--mk-cyan); --mk-o: .9">
  <img class="mk-bg" src="foto.jpg" alt="">
  <div class="mk-content">…</div>
</section>
/* a .mk-surface szabályok a makara-tokens.css-ben vannak */

07 · Mozgás

Mozgás

Lassú, rövid utú, visszafogott mozgás. Ami mozog, az él, nem szórakoztat. Ha a felhasználó csökkentett mozgást kér, minden megáll.

16 sÉlő logó ciklus. A hullám egyszer végigfodrozódik, aztán visszaáll.

24–30 sRejtőző ikonok sodródása, oda-vissza.

1,2 s · 24 pxMegjelenés görgetésre, alulról, ease-out.

0,4 s · 2–4 pxHover emelés gombon és kártyán.

18 sAz egyetlen folyamatos sáv ciklusa, ha van.

cubic-bezier(.2,.7,.2,1)Alapértelmezett görbe.

08 · Letöltések

Letöltések

Minden, amire egy új Makara-felülethez szükség van. A tokenfájlokat közvetlenül beemelheted egy új projektbe.

LogócsomagPrimary, negatív, élő, hullámmentes, ikon és favicon. SVG és átlátszó PNG.ZIP · logók Ikonkészlet20 ikon külön SVG-ben, és egy sprite fájl.ZIP · ikonok Tokenekmakara-tokens.css, makara-tokens.json és a grain textúra.ZIP · tokenek makara-tokens.cssCSS változók és a fotós felület osztályai.CSS makara-tokens.jsonUgyanez adatként, design toolhoz vagy kódhoz.JSON grain.png320 × 320 px-es, ismételhető filmszemcse.PNG