Zatražite ponudu
Zatražite ponudu

Styleguide

Zivi pregled dizajn sistema. Sve na ovoj stranici cita tokene iz Advanced Themera, pa kad promijenis boje ili font, ovdje odmah vidis rezultat.

Boje

Primary

base
l-6
l-5
l-4
l-3
l-2
l-1
d-1
d-2
d-3
d-4
d-5
d-6

Secondary

base
l-6
l-5
l-4
l-3
l-2
l-1
d-1
d-2
d-3
d-4
d-5
d-6

Neutral

base
l-6
l-5
l-4
l-3
l-2
l-1
d-1
d-2
d-3
d-4
d-5
d-6

Transparentne nijanse

neutral t-1
neutral t-2
neutral t-3
neutral t-4
neutral t-5
neutral t-6
white t-1
white t-2
white t-3
white t-4
white t-5
white t-6

Brendiranje projekta = promjena primary, secondary i neutral u Color Manageru. Svih 132 nijanse se preracunaju same.

Black

base
t-1
t-2
t-3
t-4
t-5
t-6

White

base
t-1
t-2
t-3
t-4
t-5
t-6

Tipografija

Naslovi

H1 Naslov primjer

H2 Naslov primjer

H3 Naslov primjer

H4 Naslov primjer

H5 Naslov primjer
H6 Naslov primjer

Tekst skala

at-text--3xl — Brzo mrko lijeno pseudo dzemperce (0123456789)

at-text--2xl — Brzo mrko lijeno pseudo dzemperce (0123456789)

at-text--xl — Brzo mrko lijeno pseudo dzemperce (0123456789)

at-text--l — Brzo mrko lijeno pseudo dzemperce (0123456789)

at-text--m — Brzo mrko lijeno pseudo dzemperce (0123456789)

at-text--s — Brzo mrko lijeno pseudo dzemperce (0123456789)

at-text--xs — Brzo mrko lijeno pseudo dzemperce (0123456789)

at-text--2xs — Brzo mrko lijeno pseudo dzemperce (0123456789)

Razmaci

at-space--4xl
at-space--3xl
at-space--2xl
at-space--xl
at-space--l
at-space--m
at-space--s
at-space--xs
at-space--2xs
at-space--3xs

Grid

at-grid--1

1

at-grid--2

12

at-grid--3

123

at-grid--4

1234

at-grid--5

12345

at-grid--6

123456

at-grid--1-2

12

at-grid--2-1

12

at-grid--1-3

12

at-grid--3-1

12

at-grid-auto-fit (min 270px po koloni)

auto 1auto 2auto 3auto 4auto 5

AT ima 12 jednakih kolona, cetiri asimetricna odnosa, auto-fit i auto-fill, plus tri gap tokena. Nikad ne pisi raw 1fr 1fr.

Radius

2xsxssmlxlfull

Sjenke

shadow sshadow mshadow lshadow xlshadow 2xl

Dugmad

Primary

PrimaryPrimary outline

Secondary

SecondarySecondary outline

Dark

DarkDark outline

Light (na tamnoj pozadini)

LightLight outline

Velicine

SmallMediumLargeExtra largeDefault

Koristi samo primary, secondary, light i dark. Ostalih pet Bricks stilova (muted, info, success, warning, danger) ima fiksne boje koje ne prate brend i nemaju outline verziju.

Linkovi

Ovo je paragraf u kojem se nalazi tekstualni link da se vidi boja i ponasanje na hover. Uz njega ide i drugi primjer u istoj recenici.