hansenexus

Design system

Our design system.As open as our stack.

The colors, typefaces and building blocks of this website, and the rules we use them by. We publish them the way we publish our stack. If you build with us, you see how we work before you start.

01 · Brand

One mark, one name, in lowercase.

  • The mark is lime #42c501 on a dark ground.
  • The name is always lowercase, even at the start of a sentence.
  • No glow, no gradients: the mark stays flat.

02 · Colors

Warm dark, one accent.

A warm ground instead of pure black, and instead of many colors only the lime from the logo. Every text color reaches at least 4.5:1 under WCAG 2.2.

  • Contrast 16.2:1
    Ground#16140fBackground of every page
  • Contrast 15.3:1
    Band#1c1a15Every other section
  • Contrast 14.8:1
    Surface#201d18Cards and panels
  • Contrast 13.2:1
    Raised#2a2620Chips and icon tiles
  • Contrast 16.2:1
    Text#f4f0e6Headings
  • Contrast 10.8:1
    Text muted#cdc6b6Running text
  • Contrast 6.7:1
    Text quiet#a39c8cLabels and notes
  • Contrast 8.1:1
    Lime#42c501Primary action and accent

03 · Type

Two typefaces, clear roles.

Fraunces for headings and figures, Instrument Sans for everything you read and click. Both are released under an open license.

FrauncesHeadings and figures

Your IT belongs to you. Not to your vendor.

Instrument SansRunning text, labels, buttons

Processes that run by themselves and programs that talk to each other. A central password vault, two-factor sign-in, offboarding done in minutes.

  • Display · 42 mobile, 72 desktop
  • Heading · 34 mobile, 52 desktop
  • Card · 20 mobile, 26 desktop
  • Intro · 17 mobile, 20 desktop
  • Text · 16 mobile, 17 desktop
  • Tag · 13, capitals

04 · Building blocks

Building blocks that recur.

Once you know one of our pages, you find your way around all of them.

  • Free intro call
    Primary actionOne per screen. Lime fill, dark text, 8.1:1.
  • See servicesAll services in detail
    Secondary action and text linkFor everything else: an outline or a link, never a second lime.
  • What it costsFrom €990 a month.
    Eyebrow and headingPlaces every section. Sentence case instead of capitals.
  • Sovereign operationsYour IT runs, and you know why.
    Service cardIcon, title, the benefit in one sentence. The whole card is clickable.
  • White labelAgencies
    DoorEvery audience gets a door of its own.
  • TodayPasswords on sticky notes, former staff who still have accessWith hansenexusA central password vault, two-factor sign-in, offboarding done in minutes
    Before and afterToday on top, with us below, in one card.
  • Sovereign Operationsfrom€990/ month
    Price rowPrice on the right, figures of equal width. Always excluding VAT.
  • 24/7automated monitoring
    Key figureOnly figures that are true.
  • Exit guarantee
    CommitmentVisible as a badge, not in the small print.

05 · Motion

Motion that explains.

Isometric illustrations, gently moving and looping. One switch stops everything, and “Reduce motion” always applies.

  • IllustrationIsometric, free-standing with a flat shadow. Large scenes stand on a plinth.
  • Animations switchIn the footer of every page. On by default, off with “Reduce motion”, and your choice is remembered.
  • Seven levelsFrom hover to a scripted scene. The columns show the effort.
See all seven levels

06 · Rules

Rules we stick to.

  • ContrastText reaches at least 4.5:1, large headings at least 3:1.
  • OperableEvery button is at least 44 pixels in size and reachable by keyboard.
  • CalmNo glow, no gradients. Motion is quiet and can be switched off, and there is none at all if you have set reduced motion.
  • HonestNo made-up figures, no stock photos, no AI faces.

Let's talk about your IT.

30 minutes, by video or phone, free of charge. We look at where you stand and tell you honestly what is worth doing and what is not.

Book intro callOur stack