Nexus Logo
Merkevare

Nexus Connect profilmanual

Farger, fargekoder og skrifttyper for Nexus Connect. Bruk dem når du skriver om oss, bygger en integrasjon eller lager noe som skal stå ved siden av logoen vår.

Last ned logo
Primærfarger

Primærpalett

Fem grønnfarger fra lime til deep forest. Dette er merkefargene som er definert i alle Nexus-appene.

Lime

#C3F53D

Signaturfargen. Knapper og uthevinger på mørk bakgrunn, og standard aksentfarge i appens mørke modus. For lys til tekst på hvitt.

Teal

#4BAB90

En roligere grønn for sekundære aksenter, og fokusringen i appens sidemeny.

Dark Teal

#458174

Markerer aktivt valg i appens sidemeny. Den lyseste grønnfargen som bærer hvit tekst på AA-nivå.

Forest

#2D4A42

Primærknapper og fokusringer i appens lyse modus, der lime er for lys til å fylle en knapp.

Deep Forest

#1A3329

Den mørkeste grønnfargen. Tekst og ikoner på lime, og mørkegrønne bakgrunner.

Sekundærfarger

Sekundærpalett

nexuscap.no legger til en sterkere lime for etiketter og uthevinger, og nesten svarte grønnfarger som bakgrunn.

Lime 400

#A3E635

Seksjonsetiketter, uthevede ord i overskrifter og de svake rutenettlinjene på nexuscap.no.

Lime Hover

#D4FF4A

Hover-tilstand for lime knapper og lenker på nexuscap.no.

Night

#050A05

Sidebakgrunnen på nexuscap.no.

Night Surface

#0C120C

Kort og bilderammer som ligger på Night.

Nøytrale farger

Nøytrale og funksjonelle farger

De varme gråtonene bak Nexus-appen i lys modus, og rødfargen for feil. Appen definerer dem i OKLCH; HEX-verdiene er nærmeste sRGB-farge.

Background

#F5F4EF

Sidebakgrunnen i appen i lys modus.

Card

#FDFDFA

Kort, dialoger og menyer.

Foreground

#211F18

Brødtekst og overskrifter.

Muted Foreground

#666358

Sekundærtekst, bildetekster og etiketter.

Border

#E0DDD5

Kantlinjer og skillelinjer.

Accent

#E3EEE6

Hover og valgte tilstander — et svakt grønt skjær.

Destructive

#E7000B

Feil og destruktive handlinger, som sletting.

Typografi

Skrifttyper

Satoshi på nettsiden, Geist i produktet og Geist Mono for tekst med fast bredde.

Satoshi

Nettsiden og markedsmateriell. Overskrifter i Black, brødtekst i Regular.

Hent fra Fontshare

Vekter

  • Regular 400Aksjebok, investorportal og kapitalinnhenting for norske selskaper.
  • Medium 500Aksjebok, investorportal og kapitalinnhenting for norske selskaper.
  • Bold 700Aksjebok, investorportal og kapitalinnhenting for norske selskaper.
  • Black 900Aksjebok, investorportal og kapitalinnhenting for norske selskaper.

ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnopqrstuvwxyzæøå 0123456789

Geist

Alle Nexus-appene — selskapsdashbordet, investorportalen og kampanjesidene.

Hent fra Google Fonts

Vekter

  • Regular 400Aksjebok, investorportal og kapitalinnhenting for norske selskaper.
  • Medium 500Aksjebok, investorportal og kapitalinnhenting for norske selskaper.
  • SemiBold 600Aksjebok, investorportal og kapitalinnhenting for norske selskaper.
  • Bold 700Aksjebok, investorportal og kapitalinnhenting for norske selskaper.

ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnopqrstuvwxyzæøå 0123456789

Geist Mono

Tekst med fast bredde: ID-er, koder og tekniske verdier.

Hent fra Google Fonts

Vekter

  • Regular 400Aksjebok, investorportal og kapitalinnhenting for norske selskaper.
  • Medium 500Aksjebok, investorportal og kapitalinnhenting for norske selskaper.

ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnopqrstuvwxyzæøå 0123456789

Kontrast

Fargekombinasjoner

Tekst på merkefargene, målt mot WCAG 2.1: AA krever 4,5:1 for brødtekst og 3:1 for stor tekst, AAA krever 7:1.

AaNexus Connect
Deep Forest på Lime10,62:1AAA
AaNexus Connect
Lime på Night15,63:1AAA
AaNexus Connect
Lime på Deep Forest10,62:1AAA
AaNexus Connect
White på Forest9,68:1AAA
AaNexus Connect
Forest på Background8,79:1AAA
AaNexus Connect
White på Dark Teal4,52:1AA
AaNexus Connect
White på Teal2,79:1Unngå til tekst
AaNexus Connect
Lime på White1,28:1Unngå til tekst
Tokens

Design-tokens

Primærpaletten som CSS-variabler, nøyaktig slik Nexus-appene definerer den.

:root {
  --brand-lime: #C3F53D;
  --brand-teal: #4BAB90;
  --brand-dark-teal: #458174;
  --brand-forest: #2D4A42;
  --brand-deep-forest: #1A3329;
}