Hoppa till innehållet
ENBoka samtal

Designsystem

Samma regler. På varje sida.

Det här är systemet bakom nexunest.se: varumärke, färger, typografi, rytm, komponenter och rörelse. Varje sida byggs av samma delar. Så bygger vi också åt er.

Se varumärketSe komponenterna
  • Version4.35
  • Kod2 CSS · 3 JS
  • NivåWCAG 2.2 AA

Varumärke

Ett märke. Tre former.

Logotyp, ordmärke och symbol. För ljus och mörk bakgrund. Ladda ner i SVG eller PNG.

  • LogotypLjus bakgrund

  • OrdmärkeLjus bakgrund

  • SymbolLjus bakgrund

  • LogotypMörk bakgrund

  • OrdmärkeMörk bakgrund

  • SymbolMörk bakgrund

  • FrizonLämna minst symbolens halva höjd fritt runt märket.
  • Minsta storlekSymbolen minst 24 px hög på skärm och 8 mm i tryck.
  • Gör inteÄndra färger, sträck ut, lägg skugga eller placera märket på oroliga bilder.

Principer

Sex regler före varje sektion.

Varje sektion prövas mot samma regler innan den byggs. Det gör sidorna lugna, tydliga och lätta att känna igen.

  • 01 · FokusEn idé per skärm.

    En sak i fokus åt gången. Flera delar blir en lista, inte en rad av likadana kort.

  • 02 · SkalaTydlig kontrast.

    Ett element är tydligt stort. Resten är litet och lugnt.

  • 03 · TextTre lager.

    Etikett, rubrik och en mening. Mer bara när det tillför information.

  • 04 · FormLinjer, inte boxar.

    Hårlinjer på 1 px och raka hörn överallt. Ingen glans, ingen skugga som pynt.

  • 05 · RörelseMed syfte.

    Rörelse visar ett begrepp eller ett läge. Aldrig dekoration.

  • 06 · HandlingEn primär knapp.

    En huvudhandling per sektion. Knappen säger vart den leder.

Färg

Sju färger. En signal.

Grått och svart bär allt innehåll. Lime används bara som signal: en liten lampa för det som är aktivt eller viktigt.

Färgernas andel på sajten

  • 48 % Stone
  • 45 % Ink
  • 2 % Graphite
  • 2 % Ash
  • 1 % Paper
  • 1 % Steel
  • <1 % Signal
  • Stone#D6D7DCSidans bakgrundInk på stone 13,9:1
  • Paper#ECEDF0Ljus yta och text på mörktInk på paper 17,1:1
  • Steel#55575ESekundär text på ljustSteel på stone 5,0:1
  • Ash#8A8B90Etiketter på mörktAsh på ink 5,9:1
  • Graphite#252525Mörk yta och hoverPaper på graphite 13,1:1
  • Ink#080808Mörka sektioner och huvudtextPaper på ink 17,1:1
  • Signal#CBFD3CEndast signal, aldrig yta eller textSignal på ink 16,8:1
  • Ash används aldrig som text på ljust. Kontrasten blir för låg (2,4:1).
  • Lime syns bara på mörk yta eller som en liten lampa. Aldrig som linje på ljust.
  • Grönt, gult och rött finns bara i rapporter, till exempel i vår webbplatsanalys.
  • Linjer är ink eller paper med låg täckning: 14 % på ljust, 16 % på mörkt.

Typografi

En familj. Tydlig skala.

Manrope i variabel vikt från 200 till 800. Rubriker i 600, brödtext i 400 och 500. Storlekarna skalar flytande från mobil till stor skärm.

Manrope

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

    Genomtänkt.

    44–88 px · 600
  2. Rubrik · h2

    Från behov till lansering.

    36–68 px · 600
  3. Rubrik · h3

    Er flexibla specialist.

    26–40 px · 600
  4. Rubrik · h4

    Tre samlade revideringsrundor.

    18–22 px · 600
  5. Ingress

    Fem steg. Inga överraskningar.

    17–20 px · 400
  6. Brödtext

    Vi bygger och testar. Människor granskar allt.

    16 px · 400
  7. Etikett

    Så jobbar vi

    12 px · 600 · versaler

Rytm

Luft som återkommer.

Åtta avstånd täcker allt. Samma luft över och under varje sektion. Sektionerna växlar mellan ljust och mörkt.

  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

Samma anatomi i varje sektion.

Etikett

Rubrik på högst två rader.

En till tre korta meningar.
En mening per rad.

01 · Etikett med lime-lampa 02 · Rubrik som slutar med punkt 03 · Ingress, högst 40 rem bred
Sektion
80–144 px luft
Kant
20–72 px
Bredd
Högst 1 344 px, även formulär
Bildpar
Samma höjd, 570 px på dator

Komponenter

Färdiga delar. Samma beteende.

Knappar, länkar, listor och frågor ser ut och fungerar likadant överallt. Här visas de i riktig kod, inte som bilder.

VariantStandardHoverFokusInaktiv
nxv-btnPrimärStarta ett projektStarta ett projektStarta ett projektStarta ett projekt
nxv-btn--ghostSekundärSe rörelseSe rörelseSe rörelseSe rörelse
nxv-btn--bookSignaturBoka samtalBoka samtalBoka samtalBoka samtal
nxv-linkTextlänkMer om tjänsternaMer om tjänsternaMer om tjänsternaMer om tjänsterna
KnapparExempel, inte länkar. Primär knapp: en per sektion, 52 px hög, och texten säger vart den leder. Alla klickytor är minst 44 px. Fokus syns alltid med en kontrasterande ram. Bara Boka samtal får lime vid hover.
  • Figma
  • Webflow
  • Shopify
nxv-chipKorta etiketter. Aldrig klickbara.
  • Kvadratiska punkter.
  • En tanke per rad.
  • Hårlinje mellan raderna.
nxv-listLista för korta påståenden.
Hur öppnas ett svar?

Med ett klick eller med tangentbordet. Svaret finns i koden, så sökmotorer läser det.

Kan två svar vara öppna?

Nej. När ett svar öppnas stängs det förra.

detailsFråga och svar. Ett svar öppet åt gången. Plustecknet vrids till ett kryss, i lime bara på mörk yta. På FAQ-sidan stannar gruppens rubrik kvar när man scrollar.
  • För webbyråer
  • För företag
UndermenySå jobbar vi och Verktyg öppnar sina val vid hover och tangentbordsfokus. Gratisverktygen har en liten lime-lampa och etiketten Gratis. Valen står vänsterställda. I mobilmenyn står de under punkten.
Endast nödvändigaGodkänn alla
Cookie-rutaLika tydliga val. Inga spårare laddas före samtycke. Valet kan ändras via Cookie-inställningar i sidfoten.

Rörelse

Rörelse som förklarar.

Varje tjänstområde har en egen symbol av isometriska lager. Lagren ligger plana tills symbolen är helt synlig och öppnas sedan när ni scrollar. På dator med mus följer lagren pekaren lugnt, med olika djup per lager. Allt står still om ni har bett om mindre rörelse. Inget intro: innehållet syns direkt, och hero-märket rör sig bara på dator.

01 · LagerWebbKod, gränssnitt och innehåll i lager som öppnas när ni scrollar.
02 · RäckviddVarumärkeBudskap, märke och verktyg i tre lager. Märkets kurva lyser när lagren är öppna.
03 · SamverkanAI och systemKällor möts i en punkt, går genom processen och blir ett resultat.
  • Standardcubic-bezier(.22, 1, .36, 1)
  • Förflyttningcubic-bezier(.65, 0, .35, 1)
  • Tider0,3 · 0,6 · 0,9 s

Kvalitet

Byggt för alla. Läsbart för maskiner.

Tillgänglighet och sökbarhet är en del av systemet, inte en kontroll i efterhand. Vad vi har testat och vad som återstår står i tillgänglighetsredovisningen.

  • Kontrast4,5:1

    Minsta kontrast för brödtext enligt WCAG 2.2 AA. Även släckta steg och etiketter håller kravet.

  • Tryckyta44 px

    Knappar och länkar går att träffa med tummen.

  • FokusSynligt.

    Tangentbordet når allt, och fokus syns alltid.

  • RörelseValbar.

    Har ni bett om mindre rörelse i systemet står allt still.

  • InnehållRiktig HTML.

    Text och rubriker finns i koden, inte i skript. En h1 per sida.

  • IntegritetOpt-in.

    Inga spårare före samtycke. Strukturerad data (JSON-LD) på varje sida.

Testat på

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

Bredd i pixlar. Från mobil till stor skärm, utan sidledsrullning.

Nästa steg

Ett eget system för ert varumärke?

När vi designar er webbplats får ni ett designsystem att bygga vidare på. Nya sidor ser ut som resten, och ert team vet hur de byggs.

Starta ett projektMer om webbdesign

Tjänstesymboler

Våra egna tjänster har varsin symbol: linjer i 3D som rör sig lugnt och svarar på pekaren. Samma symbol på startsidan och på tjänstens egen sida.

  • Webb och designnexunest.se och designsystemet. Lager som glider isär, med koden på det översta.

  • WebbplatsanalysEtt linjediagram som stiger. Markören läser av kurvan.

  • nexubotSymbolen i linjer. Ögonen följer pekaren och blinkar.

  • FärgBara bläck på ljus bakgrund.
  • LinjeEn tydlig huvudlinje. Resten tunna och dämpade.
  • RörelseLugn loop. Står still vid reducerad rörelse.
  • AnvändningEn symbol per tjänst. Blandas inte med andra ikoner.