Färger

Smart Chip:s färgpalett speglar dess roliga och dynamiska karaktär. Våra huvudfärger – svart och vitt – skapar en kraftfull och tidlös grund. Accentfärgerna tillför flexibilitet och livfullhet, vilket hjälper oss att anpassa oss till olika stämningar och sammanhang samtidigt som helheten känns fräsch och enhetlig.

Primärfärger

Färgpaletten är Svart och Vit i kombination med en Markeringsfärg. Svart och vitt är enkelt och ger bästa möjliga kontrast och läsbarhet. De olika markeringsfärgerna, som visas som en linjär toning, tillför en energikick och speglar de lekfulla sätt på vilka Smart Chip underlättar vardagen.

Svart

CMYK (djupsvart)
60/40/40/100

Hex
#000000

Vit

CMYK
0/0/0/0

Hex
#ffffff

Markeringsfärger

Accentfärgerna kompletterar och utökar primärfärgerna. De utgör en central del av vår dynamiska visuella identitet. Vi använder dem för att ge våra designer variation och blåsa liv i vårt visuella språk.

Tänk på stämningen eller tonen i din design när du väljer färg. Varje färgövergång förmedlar en annan känsla. Till exempel, Snyggt lila är en lugn färg, vilket gör den perfekt för mer avslappnade ämnen. Å andra sidan, Livfull orange är livlig och energisk, perfekt för dynamiskt eller actionfyllt innehåll. Fundera på vilket budskap du vill förmedla och välj den färg som bäst stöder den berättelsen.

Det finns en mycket viktig regel: Använd inte fler än en färg i samma layout. Varje markeringsfärg ska framträda tydligt på egen hand.

Livfull orange

CMYK
0/46/78/0 > 0/86/70/0

Hex
#ffa041 > #fc3a3c

Deep Blue

CMYK
79/24/6/2 > 90/69/0/0

Hex
#0393bc > #004cd5

Snyggt lila

CMYK
47/59/0/0 > 80/82/0/0

Hex
#9d77c4 > #554195

Koppar

CMYK
0/46/78/0 > 24/58/86/15

Hex
#ffa041 > #b26e31

Elektriskt blått

CMYK
65/0/0/0 > 70/54/0/0

Hex
#23c8fe > #647cff

Varm lila

CMYK
40/72/0/0 > 68/74/0/0

Hex
#a85fa2 > #6e539e

Vackert rosa

CMYK
5/54/34/0 > 0/85/69/0

Hex
#ea9091 > #ed4343

Lugnt grönt

CMYK
62/0/92/0 > 86/29/88/16

Hex
#71b541 > #197642

Röd varning

CMYK
0/76/55/0 > 0/100/68/0

Hex
#ff5a5a > #e6003c

Gradienter och kurvor

När det är möjligt använder vi färgövergångar för våra accentfärger, i kombination med ett centralt designelement som kallas Kurvor. Här lär du dig hur man tillverkar och använder dem.

Kurvor

Kurvorna används främst som bakgrunder. De ger bakgrunderna ett mer intressant utseende, djup och en känsla av rörelse.

Kurvorna skapas genom att skala, rotera och beskära chip-ikonen. Du bestämmer själv skala, rotation och beskärningsgrad, men visa inte för mycket av ikonen. Det ska se ut som abstrakta kurvor och ränder, inte som själva ikonen.

Kurvorna placeras alltid på en bakgrund. Bakgrunden har samma färgövergång som kurvorna, men i en annan riktning.

Gradienternas riktning är inte fastlagd. Du kan fritt ändra dem i varje ny design och till och med animera dem. Det gör att kurvorna känns levande och fräscha.

Du behöver inte använda hela gradientens omfång från början till slut. Du kan “zooma in” på bara en del av den. Detta breddar vår färgpalett ytterligare samtidigt som färgerna fortfarande går att känna igen.

Se dock till att det fortfarande går att känna igen som en toning. Välj inte en del som är så liten att den ser ut som en enfärgad yta.

Kurvorna är inte nödvändiga – ibland är mindre bättre. Undvik att använda dem på mindre element som knappar eller små bilder.

Skapa nya färger

Färgpaletten för accentfärger är utformad för att fungera bra tillsammans och i många olika sammanhang. Men om ingen färgövergång passar just din design får du gärna skapa en egen.

Att skapa nya färgövergångar är särskilt användbart när man kombinerar en rubrik med bilder. I det här exemplet används en anpassad färgövergång för rubriken som passar perfekt till bilden.

Färgerna har skapats genom att ta prov från bilden och sedan öka mättnaden och ljusstyrkan. På så sätt smälter den nya färgövergången in i den befintliga färgpaletten.

Det finns några regler att följa när man skapar nya färger:

Överdriv inte! Försök att hålla dig till den godkända färgpaletten och skapa bara nya färger om det är nödvändigt.

Skapa inte en ny färgövergång som liknar en befintlig för mycket. Om en befintlig färg fungerar, håll dig till den.

Håll dig till samma färgskala. Gå inte från rött till blått, utan från ljusrött till mellantrött.

Se till att värdena stämmer överens med de befintliga färgövergångarna. Välj inte färger som är för mättade, dämpade, ljusa eller mörka.

Grundläggande färgprinciper

När du utformar en ny layout kan du välja mellan en svart eller en vit bakgrund. En vit bakgrund ger ett rent, öppet och inbjudande intryck. En svart bakgrund förmedlar en känsla av teknik, elegans och kraft. Välj den bakgrund som passar bäst för ditt projekt, ditt budskap och din målgrupp.

Oavsett vilket alternativ du väljer, använd en accentfärg för att bryta upp layouten, lyfta fram viss information, leda blicken eller betona en punkt.

När du skapar layouter med flera sidor ska du inte hoppa vilt från en färg till en annan. Strukturera din design så att den består av ämnen eller kapitel, och tilldela varje kapitel en egen färg. Håll dig till den färgen inom varje kapitel. Detta säkerställer enhetlighet och förhindrar att sidorna ser röriga ut.

Du kan använda färger till bakgrunder, rubriker, ikoner eller andra element där en färgklick passar bra.

För att upprätthålla en ren och enhetlig design, blanda aldrig olika färger på samma sida, förutom när det är nödvändigt för funktionella element (som felmeddelanden eller varningar).

Vad man inte ska göra

Undvik gärna följande misstag.

Använd inte olika färger i samma layout.

Använd inte kurvorna utan bakgrund.

Använd inte kurvorna på en bakgrund med en annan färg.

Visa inte för mycket av chipikonen.

Kombinera inte en färgövergång med en annan färg.

Skapa inte nya färgförlopp som bryter mot reglerna.

Använd inte färger för markeringar eller hela textblock.

Använd inte enfärgade ytor, utom när det är absolut nödvändigt.

Exempel

Här är några exempel på hur man kan använda färg och kurvorna. Lägg märke till skillnaderna i skala, beskärningsfaktor, rotation och kurvornas gradientintervall.