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
En ny variant av et konsulentselskap
En ny variant av et konsulentselskap
En ny variant av et konsulentselskap
En ny variant av et konsulentselskap
En ny variant av et konsulentselskap
En ny variant av et konsulentselskap
En ny variant av et konsulentselskap
Colors
Primary colors
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:
Hovedfargene kan kombineres sammen med tints/shades av seg selv:
Hovedfarger kan kombineres med tints/shades av andre hovedfarger, men primært er det varinter av lilla og beige som fungerer best:
Don't
Ikke god nok kontrast:
Ikke alle hovedfargene lar seg kombinere med tints og shades av andre hovedfarger:
Blobs
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"}
/>