Design System

Tokeny, komponenty i wytyczne dla marki Forgemark. Light + dark, mobile-first, wsparcie pełnej diakrytyki PL. Dokumentacja gotowa pod przeniesienie do Tailwind/Astro.

v 0.1 · MVP light + dark WCAG AA Astro · Tailwind ready
01 · Brand

Charakter marki

Inżynierska precyzja, niezawodność, industrialna estetyka. Premium, ale przystępne — warsztat produkcyjny, nie hand-made.

Voice · PL

Pewny i konkretny.

Cyframi i terminami, nie przymiotnikami. Deloowe „pan/pani" tylko w formularzach prawnych.

Voice · EN

Concise, technical.

Short sentences. Numbers, materials, lead times. Skip the fluff.

Czego unikamy

Bez „uroku rękodzieła".

Bez serc, kursywy, ozdobnych skryptów. Bez kojarzenia z drukarkami Markforged.

03 · Color · oklch

Paleta

Grafit + iskra. Wszystkie kolory zdefiniowane w oklch dla spójności percepcyjnej. AA contrast spełniony dla par tekst / tło.

Ink (graphite)

ink-10098 / 0.008
ink-30086 / 0.012
ink-50054 / 0.012
ink-70028 / 0.014
ink-90013 / 0.010
ink-9509 / 0.008

Spark (accent — heated metal)

spark-30086 / 0.10 / 60
spark-40078 / 0.14 / 55
spark-50072 / 0.17 / 50
spark-60064 / 0.18 / 45
spark-70054 / 0.17 / 40
brass-50076 / 0.11 / 85

Steel · status

steel-10096 / 0.005
steel-50058 / 0.010
steel-90016 / 0.012
oksuccess
warnwarning
errerror

Tokeny semantyczne

--bg
--surface
--fg
--accent
--line
--focus
04 · Type

Typografia

Archivo (display) + Manrope (text) + JetBrains Mono (numery, kody, oznaczenia). Wszystkie z pełną diakrytyką PL (ą ć ę ł ń ó ś ź ż).

H1 · Archivo 700
Żółć i sześćset szczęśliwych
H2 · Archivo 600
Znakowanie metalu — Warszawa
H3 · Archivo 600
Tabliczki znamionowe CE
Lead · Manrope 500
Włókno­wy laser, czyste oznaczenia, partie i serie.
Body · Manrope 400
Standardowy tekst. Powinien być dobrze czytelny na każdym urządzeniu, łącznie z telefonem (320 px). Min 16 px.
Small · Manrope 400
Komentarze, podpisy, drobny druk.
Mono · JB Mono
SN 0001 · AL 6061 · 60×40 · F=1064 nm
Eyebrow · Mono 500
Usługi · 02
05 · Spacing · radii · shadows

Spacing / radii

Skala 4 px. Promienie ostro-industrialne (max 8 px) — bez „miękkich" pillsów poza chipami.

Skala odstępów

--s-1
4 px
--s-2
8 px
--s-3
12 px
--s-4
16 px
--s-5
24 px
--s-6
32 px
--s-7
48 px
--s-8
64 px

Radii

--r-1
2 px
--r-2
4 px
--r-3
8 px
--r-pill
999 px

Shadows

--shadow-1

Subtelna · hover na kafelkach.

--shadow-2

Wyniesione karty (lifted).

--shadow-3

Modale, popovery.

06 · Components

Komponenty

Buttons

Badges & chips

Nowość W trakcie FV VAT 3–5 dni Aluminium Nierdzewka Mosiądz Tytan

Cards

01 · Demo

Service card

Krótki opis usługi w jednym zdaniu.

od 39 PLN
Bidonystal 304

Bidon Forge 750 ml

od 89 PLN grawer
Generic card

Kontent dowolny

Bazowy kontener z ramką i promieniem.

Tariff table

MateriałMin. partiacena za szt.uwagi
Aluminium anodowane1od 12 PLNgrawer biały, kontrast wysoki
Stal nierdzewna1od 18 PLNznak ciemny, trwały
Mosiądz5od 22 PLNpremium, prezenty
Tytan1od 28 PLNkolorowy znak laserowy

Accordion

Pytanie pierwsze
Odpowiedź w jednym akapicie. Tekst pomocniczy bez ozdobników.
Pytanie drugie
Drugi akapit.

Process steps

Krok 01

Brief

Formularz, mail, WhatsApp.

Krok 02

Makieta

Render <24 h.

Krok 03

Wykonanie

Laser / druk / montaż.

Krok 04

Dostawa

Odbiór / kurier / FV.

Trust strip

Wycena
≤ 24 h
Min. partia
1 szt.
Materiały
Al · Inox · Mo · Ti
Dokumenty
FV VAT

Breadcrumbs

07 · Forms

Formularze

Główny instrument konwersji — formularz „Zapytanie o wycenę". Ścisłe etykiety, jeden CTA, drop-zone dla makiety.

↑ Wrzuć plik makiety
08 · Wytyczne

Wytyczne stosowania

Adaptacja

Mobile-first

Projektujemy najpierw 360–390 px. Layouty 12-col na ≥1024 px. Hit-area min 44×44 px.

A11Y

WCAG AA

Kontrast tekst / tło ≥ 4.5:1. Focus widoczny zawsze. Diakrytyka PL w każdym foncie.

Imagery

Industrialne foto

Makro grawerunku, iskry, warsztat. Bez stocku „happy office". Do czasu sesji — placeholdery techniczne (135° hatch).

Microcopy

Mono dla danych

Numery seryjne, materiały, wymiary, kody — zawsze monospace. To wizualny sygnał „inżyniersko, sprawdzone".