Uutisseuranta UI Pattern Library

Uutisseurannan design-periaatteet

Uutisseurannan projektin värit, kirjasimet ja UI-komponentit — avoimen osallistumisen alustan tunnelma ja ulkoasu.

Väripaletti

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)

Musta
#222222
Teksti, otsikot
Uutisseuranta Teal
#007E84
Pääväri, linkit

Taustavärit (disabled, napit, taustat)

Harmaa
#EEEEEE
Disabled-napit
Vaalea magenta
#FFEAFC
Napit, taustat
Vaalea syaani
#D3FFFD
Napit, taustat

Vaaleansävyt (passiiviset kuvakkeet, ilmoitusten rajat, metadata)

Passiivinen
#AAAAAA
Passiiviset kuvakkeet
Magenta
#FF69E8
Ilmoitusrajat, metadata
Teal mid
#00D3CA
Rajat, metadata, aika

Alaotsikkovärit (linkit, vieraillut linkit, ikonifokus)

Alaotsikko
#666666
Alaotsikot
Vierailtu
#9E2E8D
Vieraillut linkit
Uutisseuranta Teal
#007E84
Alaotsikot, linkit, ikonifokus

Otsikkovärit (ja tekstivärit)

Musta
#222222
Otsikot, leipäteksti, ikonifokus
Tumma magenta
#690055
Nappi- ja ilmoitusteksti
Tumma teal
#00444A
Otsikot, leipäteksti

Color objects

c-base c-base--dark c-base--light c-comp c-comp--dark c-comp--light dark c-grey c-grey--light c-grey--lightest

Typografia

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

Otsikko taso 1


H2 — Comfortaa Bold, ~36px

Otsikko taso 2 — alaotsikko


H3 — Comfortaa Bold, 20px, #666666

Alaotsikko kolmas taso


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

5 muokkaajaa  ·  noin tunti sitten  ·  Ryhmän nimi

UI-komponentit

Napit, tagit, välilehdet, ilmoitukset, lomakekentät ja kommenttikortit.

Napit

Välilehdet

Aktiivinen välilehti korostuu teal-reunaviivoilla.

Ilmoitukset

Pääviesti — teal-reunaviiva ja syaanitausta.
Erikoiskorostus — magenta on vain erityistilanteisiin.
Neutraali viesti harmaalla reunalla.

Lomakekentät

Värisuhde 80–20

80% Teal
20%

kuviointipääväri on aina hallitseva. Otsikko on aina tummempi kuin alaotsikko.

Artikkelikortti

Esimerkki täydellisestä artikkeli-snapshot-kortista kommentteineen — pohja Uutisseurannan uutisnäkymille.

Energiaremontti 2050
5 muokkaajaa · · Suomen uusenergiset
▶ Äänestä

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.

\