BRAND BOOK

Identyfikacja wizualna Medalion Technology

Kompletny przewodnik po elementach marki: warianty logo, kolorystyka, typografia, pole ochronne i niedopuszczalne modyfikacje. Wszystkie zasoby graficzne są dostępne do pobrania bezpośrednio z tej strony.

/Logo/Pole ochronne/Kolorystyka/Błędne użycia/Typografia/Key Visual
Wersja podstawowa

Wersja podstawowa

primary

Pełnokolorowy sygnet z emerald akcentami — domyślny wariant.

Sygnet (ikona)

Sygnet (ikona)

icon

Sam sygnet, bez napisu — favicon, avatary, kompaktowe użycia.

Wersja pozioma

Wersja pozioma

horizontal

Sygnet + napis "medalion.tech" w jednej linii — nagłówki, stopki.

Wersja pionowa

Wersja pionowa

vertical

Sygnet nad napisem — kafle, materiały promocyjne kwadratowe.

Wersja monochromatyczna

Wersja monochromatyczna

mono

Jednokolorowa wersja — druk jednokolorowy, znaki wodne, dokumenty.

/clear-space

Pole ochronne

Minimalna pusta przestrzeń wokół logo wynosi 1× wysokości sygnetu. Zapewnia czytelność znaku i nie pozwala innym elementom go „zagłuszyć”.

1× X
1× X
1× X
1× X
Logo z polem ochronnym

Pole ochronne = 1× X (gdzie X to wysokość sygnetu)

/colors

Paleta kolorów

Wartości CMYK i Pantone są przybliżonymi konwersjami matematycznymi z HEX — przed drukiem zalecamy próbę proof.

Emerald Primary

Główny kolor akcentu — przyciski CTA, ikony, podkreślenia, wykresy.

Dark Background

Tło bazowe — strona, sekcje, panele.

Foreground White

Tekst i elementy pierwszoplanowe na ciemnym tle.

Surface Card

Powierzchnie kart, popovers, okna modalne.

Border Muted

Subtelne krawędzie, separatory, podziały.

Muted Foreground

Tekst pomocniczy, opisy, metadane.

/misuse

Niedopuszczalne modyfikacje

Te przykłady pokazują czego NIE robić. Zachowaj proporcje, oryginalne kolory i odpowiedni kontrast.

Nie rozciągaj logo. Zachowaj proporcje sygnetu.

Nie obracaj logo. Logo zawsze stoi prosto.

Nie zmieniaj kolorów logo na obce marce.

Nie dodawaj cieni, blasków ani efektów 3D.

Nie umieszczaj logo na tle o zbyt niskim kontraście.

Lorem
ipsum
dolor
sit

Nie naruszaj pola ochronnego — odstęp 1× wysokości sygnetu.

/typography

Typografia

Inter jest krojem marki dla wszystkich treści — nagłówków, tekstu ciągłego i interfejsu. JetBrains Mono to akcent techniczny, zarezerwowany dla kodu, wyników terminala i danych.

KRÓJ PODSTAWOWY
Inter
Self-hosted (variable font)
Wagi w użyciu400 / 500 / 600 / 700
Stos zapasowysystem-ui, sans-serif
AKCENT TECHNICZNY
JetBrains Mono
Tylko: kod, terminal, dane, etykiety techniczne
NAGŁÓWKI · 600 · 32–48PX

Sztuczna inteligencja w medycynie wymaga precyzji.

TEKST CIĄGŁY · 400 · 16PX

Tekst ciągły używa wagi 400 w rozmiarze 16 px z przerwą między wierszami 1.6–1.75×. Minimalny rozmiar tekstu interfejsu to 14 px.

KOD / WARTOŚCI TECHNICZNE · 500 · 12–13PX
const brand = {
  primary: '#33D6AE',
  sans: 'Inter',
  mono: 'JetBrains Mono',
};
ZASADY
  • Inter dla wszystkich treści — bez monospace w tekście ciągłym
  • JetBrains Mono wyłącznie jako akcent techniczny
  • Ikony z zestawu Lucide — nigdy emoji
  • Jedna zieleń CTA: #33D6AE (token --primary), bez efektów glow
  • Nagłówki: waga 600 (semibold) z ciasnym trackingiem
/key-visual

Key Visual

Cyfrowe motywy graficzne, które budują charakter marki. Stosuj subtelnie, jako warstwy tła.

AI w medycynie

Emerald Accent

text-primary

Kolor #33D6AE akcentuje kluczowe frazy w nagłówkach hero. Stosować płasko (bez gradientów), nigdy dla tekstu ciągłego.

Kontakt

CTA Button

bg-primary

Główny przycisk akcji — wypełnienie --primary (#33D6AE) z ciemnym tekstem, bez efektów glow. Stosować dla pojedynczego CTA na widoku.

/services
Card surface

Terminal Card

.terminal-border

Karta z gradientową krawędzią i emerald linią u góry — buduje skojarzenie z UI terminala. Standardowe tło dla treści.

$ medalion --start

Prompt Cursor

.animate-blink

Migający kursor terminala (`▍`) i `$` prompt — używane w sekcjach hero i animacjach typowania.

// brand tokens
const brand = {
  color: "emerald",
}

Syntax Highlight

.code-*

Kolorystyka składni w odcieniach palety: emerald (string), cyan (function), żółty (type), fiolet (keyword), szary (comment).

Cookie consentAkceptuj

Glass Overlay

.glass

Półprzezroczyste tło z backdrop-blur — stosowane w mobile menu, banerze cookies, dialogach.

Potrzebujesz materiałów w wyższej rozdzielczości?

Po dodatkowe pliki źródłowe (AI, EPS, wersje produkcyjne) lub konsultację brand napisz na [email protected]