Variant Styleguide

Deprecation notice

A newer version of the styleguide can be viewed at stil.variant.no. In true MVP style this is just a prototype in Figma as we work on implementing it at some point™.

Logo

For the color version you are encouraged to make your own twist with clipped illustration. Make sure to check the contrast where you use it.

Typography

Heading 1

5.05rem / 101px1.2 line height

En ny variant av et konsulentselskap

Heading 2

3.4rem / 68px1.2 line height

En ny variant av et konsulentselskap

Heading 3

2.25rem / 45px1.2 line height

En ny variant av et konsulentselskap

Heading 4

1.5rem / 30px1.3 line height

En ny variant av et konsulentselskap

Lead Paragraph

1.5rem / 30px1.3 line height

En ny variant av et konsulentselskap

Paragraph

1rem / 20px1.6 line height

En ny variant av et konsulentselskap

Caption

0.65rem / 13px1.4 line height

En ny variant av et konsulentselskap

Colors

Primary colors

#FAD2E2

#F5A4C4

#F076A6

#EB4889

#E61A6B

#B91456

#8B0F40

#5D0A2B

#2F0516

#B7B4DE

#9591CE

#736EBE

#534DAC

#423D89

#35316E

#282552

#1A1837

#0D0C1B

#CDF8F4

#9AF0E8

#68E9DD

#35E1D1

#03DAC6

#02AE9E

#028377

#01574F

#012C28

#FFF3F2

#FFE7E4

#FFDCD7

#FFD0C9

#FFC4BC

#CC9D96

#997671

#664E4B

#332726

#FBFAF7

#F8F6EF

#F4F1E7

#F1EDDF

#EDE8D7

#BEBAAC

#8E8B81

#5F5D56

#2F2E2B

#333333

#FFFFFF

Principles

Universelt utformet

Farger bør alltid kombineres på en slik måte at kontrastkravene tilfredstilles. Minimum AA, men gjerne AAA.

I WCAG 2.1 er det også nytt krav som går på kontrast mellom UI-komponenter og states.

Farger skal ikke brukes alene for å formidle noe.

Fargekombinasjoner

Farger kan brukes som et virkemiddel for å etablere visuelt hierarki og rette fokus mot elementer som er viktige.

Det er mulig å både bruke ulike farger for å skape dynamikk og kontrast, men også mer nedtonede kontraster av samme farge.

Pass på at kontrastkravene er oppfylt ved bruk av tekst eller andre meningsbærende elementer.

Do

Hovedfargene kan kombineres sammen:

#E61A6B

#423D89

#FFC4BC

#E61A6B

#03DAC6

#EDE8D7

#423D89

#03DAC6

Hovedfargene kan kombineres sammen med tints/shades av seg selv:

#423D89

#B7B4DE

#E61A6B

#FAD2E2

Hovedfarger kan kombineres med tints/shades av andre hovedfarger, men primært er det varinter av lilla og beige som fungerer best:

#423D89

#F8F6EF

#E61A6B

#35316E

#03DAC6

#F8F6EF

#FFC4BC

#35316E

Don't

Ikke god nok kontrast:

Do you see me?

Ikke alle hovedfargene lar seg kombinere med tints og shades av andre hovedfarger:

#E61A6B

#012C28

#03DAC6

#CC9D96

#423D89

#028377

#FFC4BC

#5F5D56

#EDE8D7

#5D0A2B

#333333

#282552

Blobs

Seed: 6213114584050978

Components

Blob

Using the same seed, points, and pointSpread values as generator above.

Size of blob is calcuated as min(width, height).

<BaseBlob height={150} width={150} seed="Variant" />

<VariantBlob
  height={150}
  width={150}
  seed="Variant"
  imageProps={{ src: "/logo-192.png", alt: "Variant Logo" }}
  />

<AnimatedBlob height={150} width={150} seed="Variant" />

<AnimatedBlob
  height={150}
  width={150}
  seed="Variant"
  imgSource={"/logo-192.png"}
/>