Foundation specimen

Snaga je izbor

Ovaj prvi pasus posle naslova nije samo veći (18px) — on je i svetliji: uzima --ic--text-sub (#ddd), a ne čisto belo. Tako uvod diše, vodi pogled ka telu teksta i ostaje prijatan na tamnoj podlozi. Drži se u tri do četiri reda i, kao i cela stranica, ostaje u uskoj koloni.

Telo teksta koristi Source Sans 3, 16→18px, prored 1.8, u boji --ic--text (#BBB) — mirno i čitljivo na tamnoj podlozi. Naslovi su Oswald, velikim slovima. Sve veličine, boje i razmaci dolaze isključivo iz --ic-- tokena.

Jedan izvor stila pokriva sve stranice nove teme: izmena jednog tokena menja ceo sistem, na svim stranicama odjednom. Ova stranica je živi prikaz tog izvora — tokeni, tipografija i komponente na jednom mestu.

Mera čitljivosti je stvar layouta, ne teksta: pasus se nikada ne ograničava sam (nema max-width na elementu) — drži ga uska kolona. Isti princip vredi za celu temu.

Boje

Brend, podloge, tekst, linije i statusi — svaka boja je token, nikada gola vrednost u komponenti.

Brend

• --ic--orange#FF6D00
• --ic--orange-hover#FF9A40
• --ic--black#000000
• --ic--white#FFFFFF

Podloge

• --ic--bg#111014
• --ic--bg-dark#16151A
• --ic--bg-medium#212224
• --ic--bg-card#2D2E30

Tekst

• --ic--text-strong#FFFFFF
• --ic--text#BBBBBB
• --ic--text-sub#DDDDDD
• --ic--text-muted#999999

Status

• --ic--success#34C759
• --ic--warning#FFD60A
• --ic--danger#FF6B6B
• --ic--info#5B9BF5

Skala naslova

Overline / pre-naslov — najmanji, brend narandžasti, razmaknuta slova

Glavni naslov — H1

Naslov sekcije — H2

Pod-sekcija — H3

Naslov kartice — H4

Mali naslov — H5

Oznaka — H6

Skala teksta

Zaobljenja

• sm
• md
• lg
• pill

Linije

• --ic--line

  ---

• --ic--line-strong

  ---

Liste

Nabrajanje i numerisana lista — oba sa narandžastim markerom.

• Nenumerisana stavka
• Druga stavka
• Treća stavka

1. Prvi korak
2. Drugi korak
3. Treći korak

Citat

Pasus sa linkom u brend narandžastoj i istaknutim tekstom.

Citat je 18px, na suptilnoj podlozi i sa narandžastom linijom — dovoljno da se izdvoji, a da ne nadglasa telo teksta.

Slika sa opisom

Dugmad

Dve nezavisne ose: full / outline i orange / white. Full koristi suprotnu boju za tekst; outline ima istu boju ivice i teksta. Hover: full se izvrne, outline se popuni.