Case · 08 · 2026

Ett nytt AI-byrå behövde en sajt som låter olikt resten.

Synora Systems byggs av en operatör som tröttnat på pilotprojekt som aldrig går i drift. Sajten behövde säga det rakt, signalera teknisk höjd och hålla sig undan generisk AI-estetik. Vi landade i en dark-tech-palett med en konstellation som signatur, Space Grotesk för displayen och Astro under huven.

2026 synora-systems-2026-preview.netlify.app ↗ Astro · Tailwind v4 · Custom SVG-konstellation · Edge deploy
Synora Systems — desktop
Synora Systems — mobil

Bespoke design utan templater. Konstellationen ritas i SVG och rör sig subtilt så sajten andas utan att tigga om uppmärksamhet. Live tre veckor efter brief, 95+ Lighthouse, full edge-deploy.

3 v
Från brief till live
95+
Lighthouse-snitt
8
Tjänsteflöden i marquee
Utmaningen

Ny byrå, fullt brus i kategorin.

Synora startades av en grundare med 15 års bygg-bakom-sig. Marknaden för AI-byråer är full av purple-gradient-sajter, ChatGPT-emojier och hype-språk. Ny aktör som vill bli tagen på allvar behöver en sajt som signalerar avstånd från det bruset utan att tappa tekniskt djup.

Lösningen

Konstellation, Space Grotesk, dark-tech.

Vi gick rakt på dark-tech: bas i nästan-svart, två accenter (teal + violett) som plockas upp i konstellation-prickarna. Space Grotesk för display ger geometrisk skärpa utan att kännas standard-tech. Konstellationen är ritad i SVG och rör sig subtilt med CSS — ingen tung canvas, ingen WebGL. Hero-rubriken "AI som faktiskt går i drift" säger positioneringen rakt: vi bygger system som lever, inte demos.

Resultatet

Live på tre veckor. Säger det rakt.

Sajten gick live tre veckor efter brief. 95+ Lighthouse, edge-deployad, helt SSR med 0 tracking-script innan samtycke. Konstellationen blev signatur som spiller över i mejlsignatur, slides och social profil. Grundaren har en sajt han kan visa varje köpare utan att förklara bort den.

Så byggde vi det

Process från brief till live.

4 steg
v.1

Positionering & messaging

Workshop med grundaren. Vi fångar core-konflikten: pilotprojekt som dör vs system som går i drift. Resultat: positioneringsdokument, hero-headline "AI som faktiskt går i drift", och en messaging-hierarki som hela sajten följer.

v.1–2

Brand & visuell signatur

Bygger logotyp-systemet: märke (konstellation) + ordmärke i Space Grotesk 600. Tre logo-varianter (dark/light/mark) för olika kontexter. Färgpalett bas + teal + violett. Konstellationen prototypas i SVG.

v.2–3

Astro-bygge + custom SVG

Astro + Tailwind v4. Custom SVG-konstellation som signatur över hela sajten. Mörkt tema som default, ljust tema som toggle. Mobil-först med läsbar typografi.

v.3 launch

Launch + brand-paket

Edge-deploy, schema-markup, GA4. Brand-tillgångar paketerade som /public/brand/ med README så grundaren kan skicka vidare till underleverantörer utan att be om SVG.

Vad vi gjorde

Tjänster i projektet.

PositioneringVarumärkeWebbplatsCopyDesign
Tekniken bakom

Stack.

AstroTailwind v4Custom SVG-konstellationEdge deploy
Lighthouse

Mätbar kvalitet, i siffror.

Mätt 2026-06
Performance
98
Accessibility
100
Best practices
95
SEO
100
"

Jag bad inte om en wow-sajt, jag bad om en sajt som säger vad vi gör utan att jag måste förklara. NoFrame förstod det innan vi själva satt ord på det. Konstellationen är nu vår signatur överallt.

Magnus Persson · Grundare, Synora Systems
Vanliga frågor

Frågor vi får ofta.

Hur lång tid tog projektet?
3 veckor från brief till live. Det inkluderar positionering, logo-system, custom SVG-konstellation, Astro-bygge och launch-support.
Varför Astro istället för Next.js för en AI-byrå?
Synora bygger AI-system, men sajten själv behöver inte vara interaktiv. Astro ger 95+ Lighthouse out-of-the-box, full SSR utan client-runtime för 90 procent av sidorna och en stack som grundaren kan iterera i utan oss. Next.js hade adderat overhead utan motsvarande värde.
Hur fungerade signatur-konstellationen?
Vi prototypade flera grafiska signaturer och landade i en konstellation som binder ihop AI-temat (noder, sambands-linjer) med ett mindre använt visuellt språk. Den ritas i SVG och rör sig subtilt med CSS. Eftersom den är vektor-baserad skalar den oändligt och kan återanvändas i logo, hero-bg, mejlsignatur och slides utan kvalitetsförlust.
Säg hej

Vill du ha en sajt byggd från grunden?

Berätta vad ni vill bygga. Vi svarar med en plan och ett fast pris, oftast inom en arbetsdag.

Boka möte