Nexus Logo
Brand

Nexus Connect brand guide

Colours, colour codes and typefaces for Nexus Connect. Use them when you write about us, build an integration or design something that sits next to our logo.

Download logo
Primary colours

Primary palette

Five greens from lime to deep forest. These are the brand colours defined in every Nexus app.

Lime

#C3F53D

The signature colour. Buttons and highlights on dark backgrounds, and the default accent in the app's dark mode. Too pale for text on white.

Teal

#4BAB90

A calmer green for secondary accents, and the focus ring in the app's sidebar.

Dark Teal

#458174

Marks the active item in the app's sidebar. The lightest green that carries white text at AA.

Forest

#2D4A42

Primary buttons and focus rings in the app's light mode, where lime is too pale to fill a button.

Deep Forest

#1A3329

The darkest green. Text and icons on lime, and dark green backgrounds.

Secondary colours

Secondary palette

nexuscap.no adds a brighter lime for labels and highlights, and near-black greens for backgrounds.

Lime 400

#A3E635

Section labels, highlighted words in headings and the faint grid lines on nexuscap.no.

Lime Hover

#D4FF4A

Hover state for lime buttons and links on nexuscap.no.

Night

#050A05

The page background on nexuscap.no.

Night Surface

#0C120C

Cards and image frames that sit on Night.

Neutrals

Neutrals and functional colours

The warm greys behind the Nexus app in light mode, and the red for errors. The app defines them in OKLCH; the HEX values are the nearest sRGB match.

Background

#F5F4EF

The app's page background in light mode.

Card

#FDFDFA

Cards, dialogs and menus.

Foreground

#211F18

Body text and headings.

Muted Foreground

#666358

Secondary text, captions and labels.

Border

#E0DDD5

Borders and dividers.

Accent

#E3EEE6

Hover and selected states — a faint green wash.

Destructive

#E7000B

Errors and destructive actions, such as delete.

Typography

Typefaces

Satoshi on the website, Geist in the product and Geist Mono for fixed-width text.

Satoshi

The website and marketing material. Headings in Black, body text in Regular.

Get it from Fontshare

Weights

  • Regular 400Cap table, investor portal and fundraising for Norwegian companies.
  • Medium 500Cap table, investor portal and fundraising for Norwegian companies.
  • Bold 700Cap table, investor portal and fundraising for Norwegian companies.
  • Black 900Cap table, investor portal and fundraising for Norwegian companies.

ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnopqrstuvwxyzæøå 0123456789

Geist

Every Nexus app — the company dashboard, the investor portal and the campaign pages.

Get it from Google Fonts

Weights

  • Regular 400Cap table, investor portal and fundraising for Norwegian companies.
  • Medium 500Cap table, investor portal and fundraising for Norwegian companies.
  • SemiBold 600Cap table, investor portal and fundraising for Norwegian companies.
  • Bold 700Cap table, investor portal and fundraising for Norwegian companies.

ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnopqrstuvwxyzæøå 0123456789

Geist Mono

Fixed-width text: IDs, codes and technical values.

Get it from Google Fonts

Weights

  • Regular 400Cap table, investor portal and fundraising for Norwegian companies.
  • Medium 500Cap table, investor portal and fundraising for Norwegian companies.

ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnopqrstuvwxyzæøå 0123456789

Contrast

Colour pairings

Text on brand colours, measured against WCAG 2.1: AA needs 4.5:1 for body text and 3:1 for large text, AAA needs 7:1.

AaNexus Connect
Deep Forest on Lime10.62:1AAA
AaNexus Connect
Lime on Night15.63:1AAA
AaNexus Connect
Lime on Deep Forest10.62:1AAA
AaNexus Connect
White on Forest9.68:1AAA
AaNexus Connect
Forest on Background8.79:1AAA
AaNexus Connect
White on Dark Teal4.52:1AA
AaNexus Connect
White on Teal2.79:1Avoid for text
AaNexus Connect
Lime on White1.28:1Avoid for text
Tokens

Design tokens

The primary palette as CSS variables, exactly as the Nexus apps define it.

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