Skip to content
SVBook a Call

Design System

One set of rules. Across every page.

The system behind nexunest.se: brand, colors, typography, rhythm, components and motion. Every page uses the same building blocks. That’s how we build for our clients, too.

See the BrandExplore the Components
  • Version4.34
  • Code2 CSS · 3 JS
  • StandardWCAG 2.2 AA

Brand

One mark. Three forms.

Logo, wordmark and symbol. For light and dark backgrounds. Download as SVG or PNG.

  • LogoLight background

  • WordmarkLight background

  • SymbolLight background

  • LogoDark background

  • WordmarkDark background

  • SymbolDark background

  • Clear spaceKeep at least half the symbol’s height free around the mark.
  • Minimum sizeThe symbol at least 24 px high on screen and 8 mm in print.
  • Don’tChange colors, stretch, add shadows or place the mark on busy images.

Principles

Six rules before every section.

Every section is checked against the same principles before it’s built. That keeps the pages calm, clear and recognizable.

  • 01 · FocusOne idea per screen.

    One main point at a time. Multiple points become a list, not a row of identical cards.

  • 02 · ScaleClear contrast.

    One element is intentionally large. Everything else stays smaller and quieter.

  • 03 · CopyThree levels.

    Label, heading and one sentence. More words only when they add real information.

  • 04 · ShapeLines, not boxes.

    One-pixel hairlines and straight corners everywhere. No decorative gloss or shadows.

  • 05 · MotionWith a purpose.

    Motion explains an idea or a state. Never decoration.

  • 06 · ActionOne primary button.

    One main action per section. Every button makes its destination clear.

Color

Seven colors. One signal.

Gray and black carry the content. Lime is reserved as a signal: a small indicator for what is active or important.

Share of each color on the site

  • 48% Stone
  • 45% Ink
  • 2% Graphite
  • 2% Ash
  • 1% Paper
  • 1% Steel
  • <1% Signal
  • Stone#D6D7DCPage backgroundInk on stone 13.9:1
  • Paper#ECEDF0Light surface and text on darkInk on paper 17.1:1
  • Steel#55575ESecondary text on lightSteel on stone 5.0:1
  • Ash#8A8B90Labels on darkAsh on ink 5.9:1
  • Graphite#252525Dark surface and hoverPaper on graphite 13.1:1
  • Ink#080808Dark sections and primary textPaper on ink 17.1:1
  • Signal#CBFD3CSignal only, never a surface or textSignal on ink 16.8:1
  • Ash is never used as text on light surfaces. The contrast is too low (2.4:1).
  • Lime appears only on dark surfaces or as a small indicator. Never as a line on light.
  • Green, yellow and red appear only in reports, for example in our website audit.
  • Lines are ink or paper at low opacity: 14% on light, 16% on dark.

Typography

One type family. A clear scale.

Variable Manrope, weights 200–800. Headings use 600; body copy uses 400 and 500. Sizes scale fluidly from mobile to large screens.

Manrope

  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  1. Display · h1

    Thought through.

    44–88 px · 600
  2. Heading · h2

    From brief to launch.

    36–68 px · 600
  3. Heading · h3

    Your flexible specialist.

    26–40 px · 600
  4. Heading · h4

    Three consolidated revision rounds.

    18–22 px · 600
  5. Lead

    Five steps. No surprises.

    17–20 px · 400
  6. Body

    We build and test. People review everything.

    16 px · 400
  7. Label

    How We Work

    12 px · 600 · uppercase

Rhythm

Space that repeats.

Eight spacing values cover everything. The same breathing room above and below each section. Light and dark sections alternate.

  1. sp-28 px
  2. sp-312 px
  3. sp-416 px
  4. sp-524 px
  5. sp-632 px
  6. sp-748 px
  7. sp-864 px
  8. sp-996 px

The same structure in every section.

Label

A heading of no more than two lines.

One to three short sentences.
One idea per line.

01 · Label with a lime indicator 02 · Heading ending with a full stop 03 · Lead, max 40 rem wide
Section
80–144 px spacing
Edge
20–72 px
Width
Max 1,344 px, forms included
Image pairs
Same height, 570 px on desktop

Components

Reusable parts. Consistent behavior.

Buttons, links, lists and FAQs look and work the same across the site. The examples use real code, not images.

VariantDefaultHoverFocusDisabled
nxv-btnPrimaryStart a ProjectStart a ProjectStart a ProjectStart a Project
nxv-btn--ghostSecondarySee MotionSee MotionSee MotionSee Motion
nxv-btn--bookSignatureBook a CallBook a CallBook a CallBook a Call
nxv-linkText linkExplore ServicesExplore ServicesExplore ServicesExplore Services
ButtonsExamples, not real navigation links. Primary button: one per section, 52 px high, and the text makes the destination clear. All tap targets are at least 44 px. Focus is always visible with a contrasting outline. Only Book a Call turns lime on hover.
  • Figma
  • Webflow
  • Shopify
nxv-chipShort labels. Never clickable.
  • Square bullets.
  • One idea per line.
  • A hairline between the rows.
nxv-listA list for short statements.
How does an answer open?

With a click or with the keyboard. The answer is in the code, so search engines read it.

Can two answers be open?

No. Opening an answer closes the previous one.

detailsQuestion and answer. One answer open at a time. The plus turns into a cross, in lime only on dark surfaces. On the FAQ page, the group heading stays in view while you scroll.
  • For agencies
  • For businesses
SubmenuHow We Work opens two options on hover and keyboard focus. In the mobile menu they appear under the item.
Necessary onlyAccept all
Cookie noticeEqually clear choices. No trackers load before consent. The choice can be changed via Cookie settings in the footer.

Motion

Motion that explains.

Each service area has its own symbol made of isometric layers. The layers stay flat until the symbol is fully in view, then open as you scroll. Everything stays still if you prefer reduced motion. No intro: content shows right away, and the hero mark moves on desktop only.

01 · LayersWebCode, interface and content in layers that open as you scroll.
02 · ReachBrandMessage, mark and tools in three layers. The curve of the mark lights up when the layers are open.
03 · ConnectionAI and systemsSources meet in one point, pass through the process and become a result.
  • Standardcubic-bezier(.22, 1, .36, 1)
  • Movementcubic-bezier(.65, 0, .35, 1)
  • Durations0.3 · 0.6 · 0.9 s

Quality

Built for people. Readable by machines.

Accessibility and discoverability are part of the system, not an afterthought.

  • Contrast4.5:1

    Minimum contrast for body text under WCAG 2.2 AA. Dimmed steps and labels meet it too.

  • Touch targets44 px

    Buttons and links are easy to hit with a thumb.

  • FocusVisible.

    The keyboard reaches everything, and focus is always visible.

  • MotionOptional.

    If you have asked your system for reduced motion, everything stays still.

  • ContentReal HTML.

    Copy and headings are in the HTML, not injected by scripts. One h1 per page.

  • PrivacyOpt-in.

    No trackers before consent. Structured data (JSON-LD) on every page.

Tested on

  • 390
  • 768
  • 1024
  • 1280
  • 1440
  • 1512
  • 1920
  • 2560

Width in pixels. From mobile to large screens, with no horizontal scrolling.

Next Step

A design system for your brand?

When we design your website, you get a design system to build on. New pages look like the rest, and your team knows how they’re made.

Start a ProjectMore About Web Design

Service symbols

Each of our own services has its own symbol: 3D lines that move calmly and respond to the pointer. The same symbol on the homepage and on the service’s own page.

  • Web and designnexunest.se and the design system. Layers drifting apart, with code on the top one.

  • Website auditA rising line chart. The marker reads the curve.

  • nexubotThe symbol in lines. The eyes follow the pointer and blink.

  • ColorInk on light backgrounds only.
  • LineOne clear main line. The rest thin and muted.
  • MotionCalm loop. Holds still with reduced motion.
  • UseOne symbol per service. Never mixed with other icons.