Uutisseurannan projektin värit, kirjasimet ja UI-komponentit — avoimen osallistumisen alustan tunnelma ja ulkoasu.
Atoms → Global
kuviointiväri on aina hallitseva (80–90 %). Magenta on erityiskorostuksiin kuten vierailluille linkeille — ei yleiseen sisältöön. Linkit ovat aina teal-värissä #007E84.
Päävärit (kirjautunut / kirjautumaton)
Taustavärit (disabled, napit, taustat)
Vaaleansävyt (passiiviset kuvakkeet, ilmoitusten rajat, metadata)
Alaotsikkovärit (linkit, vieraillut linkit, ikonifokus)
Otsikkovärit (ja tekstivärit)
Atoms → Teksti
Comfortaa kaikille otsikoille. Muli kaikelle muulle. Leipäteksti 16px (1em), intro/blockquote 20px bold. Linkit ovat aina teal-värissä, vieraillut linkit magentassa.
H1 — Comfortaa Bold, ~48px
H2 — Comfortaa Bold, ~36px
H3 — Comfortaa Bold, 20px, #666666
Intro / Blockquote — Muli Bold 20px, #666666
"Lohkositaatti tai johdantokappaleen teksti on Muli 20px lihavoituna alaotsikkovärissä. Se toimii artikkelin johdantona ja kiinnittää lukijan huomion."
Leipäteksti — Muli Regular 16px, #222222
Muli on kaiken sisällön kirjasin. Leipäteksti on 16px (1em). Vierailemattomat linkit ovat aina teal-värissä. Vieraillut linkit ovat magentassa #9E2E8D. Kappaleet ovat itsenäisiä diskurssin yksiköitä.
Metadata & Aikaleima
Atoms → Komponentit
Napit, tagit, välilehdet, ilmoitukset, lomakekentät ja kommenttikortit.
Napit
Välilehdet
Aktiivinen välilehti korostuu teal-reunaviivoilla.
Passiivinen välilehti.
Toinen välilehti.
Ilmoitukset
Lomakekentät
Värisuhde 80–20
kuviointipääväri on aina hallitseva. Otsikko on aina tummempi kuin alaotsikko.
Molecules → Streams
Esimerkki täydellisestä artikkeli-snapshot-kortista kommentteineen — pohja Uutisseurannan uutisnäkymille.
Käynnistetään energiaremontti, joka tähtää siihen, että Suomi siirtyy käyttämään ainoastaan uusiutuvaa energiaa vuoteen 2050 mennessä.
Luvut ovat niin nannaa, että tuossa kannattaisi suoraan linkata alkuperäiseen lähteeseen epäilijöiden vakuuttamiseksi.
Sana "parantaisi" toistuu. Joku muu saa miettiä korvaavan ilmaisun, kun täältä loppui kahvi.