Grafisk profil – Eneo AI

Översikt

Eneo.ai är en öppen AI-plattform för svensk offentlig sektor. Den visuella profilen ska kännas förtroendeingivande, modern och nordisk — med en tydlig signal om svensk datasuveränitet, öppenhet och kvalitet.

Förtroende

Lugna färger, tydlig typografi och mycket andrum. Inga skrikiga effekter — det visuella ska bekräfta seriositet.

Klarhet

Skarpt kontrastförhållande, läsbar text och en stram informationshierarki. Mindre brus, mer fokus.

Modernitet

Subtila gradienter, mjuka skuggor och blå glödeffekt signalerar AI och digital tjänst utan att bli teknik-tungt.

Nordisk ton

Stilren färgpalett, mycket vitrymd, naturliga övergångar. Personlig men professionell.

Logotyp

Logotypen består av en geometrisk ikon (vinklat «e») och ordmärket «eneo». Ikonen står för cirkulär rörelse och AI-precision; ordmärket är geometriskt och lågmält.

Användning på olika bakgrunder

Mörk

Ladda hem SVG Ladda hem PNG

Ljus

Ladda hem SVG Ladda hem PNG

På varumärkesfärg

Ladda hem SVG Ladda hem PNG

Monokrom

Ladda hem SVG Ladda hem PNG

Specifikationer

Ikonfärg: #1a7ad4 · Brand bright
Ordmärke: Adapterar till temat: --text i nav, --text-muted i footer
Minsta höjd (web): 22 px (footer) / 30 px (header)
Minsta höjd (tryck): 10 mm
Frizon: Minst halva logotypens höjd som luft åt alla håll
Format: SVG (primärt), PNG (fallback)

Notering: På sajten renderas ikonen i den ljusare blå nyansen #1a7ad4 (Brand bright). Den fristående SVG-filen public/images/Eneo-logo-svg.svg är ett äldre exemplar med ikonen i #055594 (Brand). Använd inline-SVG:n nedan eller exportera om filen för konsekvent färg.

Gör så här · gör inte

Behåll proportionerna mellan ikon och ordmärke (alltid hela logotypen i SVG).

Använd den ljusa blå #1a7ad4 för ikonen — på alla bakgrunder utom när monokrom krävs.

Lämna alltid frizon runt om — minst halva logotypens höjd.

På mörka bakgrunder: ordmärket vitt. På ljusa: mörkgrått (#1a1f2e) eller svart.

Rotera, sträck, lutar eller deformera inte logotypen.

Byt inte färg på ikonen utöver vit, svart eller #1a7ad4.

Lägg inte logotypen på fotografiska bakgrunder med dålig kontrast.

Skapa inte egna sammansättningar (text + symbol åtskilda eller utbytta typsnitt).

Färgsystem

Färgerna är definierade som CSS-variabler i css/v2-variables.css och anpassar sig till mörkt och ljust tema. Brand är primärfärg, Brand Bright är dominerande accent (logotyp, länkar, knapp-gradient).

Varumärke

vit text · 8.4:1

Brand

--brand

#055594 rgb(5, 85, 148)

vit text · 4.9:1

Brand Bright

--brand-bright

#1a7ad4 rgb(26, 122, 212)

Brand Light

--brand-light

#3a9aef rgb(58, 154, 239)

15% alfa

Brand Dim

--brand-dim

rgba(5, 85, 148, 0.15) tags · hover-bg

Accent

--accent

#38bdf8 rgb(56, 189, 248)

Statusfärger

Success

--success

#22c55e

Green

--green

#34d399

Amber

--amber

#f0a030

Purple

--purple

#a78bfa

Red

--red

#f87171

Rose

--rose

#fb7185

Yta · mörkt tema

Background

--bg

#060c17

Background Raised

--bg-raised

#0b1322

Card

--bg-card

#0f1a2e

mörk text · 12.4:1

Text

--text

#e4e9f0

Text Muted

--text-muted

#7889a0

Text Faint

--text-faint

#5e7389

Yta · ljust tema

mörk text

Background

--bg (light)

#f8f9fb

vit yta

Card / Raised

--bg-card (light)

#ffffff

Text

--text (light)

#1a1f2e

Text Muted

--text-muted (light)

#5a6578

Gradienter

Gradienter är en signaturkomponent — främst för knapp-fyllning, hero-bakgrund och accentlinjer. Använd alltid 135° vinkel om inget annat anges.

Primary Button

linear-gradient(135deg, --brand, --brand-bright)

Button Hover

linear-gradient(135deg, --brand-bright, --brand-light)

Gradient Text

linear-gradient(135deg, --brand-light, --accent)

Hero Glow

radial brand glow + dark base

Gradient-text på rubriker

Generativ AI med svensk datasuveränitet

Typografi

Två typsnitt: Newsreader (serif) för rubriker och citat, Plus Jakarta Sans (sans-serif) för all löpande text och UI.

Display · Newsreader

Aa æ

Serif, optisk storlek · för rubriker, citat och kursiv accent. Källa: fonts.google.com/specimen/Newsreader

Light 300 Regular 400 Medium 500 Semibold 600 Bold 700

Body · Plus Jakarta Sans

Aa Åä

Geometrisk sans-serif · för brödtext, navigation, knappar och formulär. Källa: fonts.google.com/specimen/Plus+Jakarta+Sans

Light 300 Regular 400 Medium 500 Semibold 600 Bold 700

Typskala

H1clamp(2, 5vw, 3.5)rem

Generativ AI med precision

H2clamp(1.5, 3vw, 2.25)rem

Svensk datasuveränitet

H3clamp(1.125, 2vw, 1.5)rem

Plattform för offentlig sektor

H41.125rem

Rubrik på kort eller modul

Lead1.1rem · 1.7

Eneo är den öppna AI-plattformen som ger offentliga organisationer full kontroll över var data lagras.

Body1rem · 1.6

Brödtext är 1 rem (16 px) i Plus Jakarta Sans Regular. Använd --text för rubriker och primär text och --text-muted för stödjande text.

Small0.875rem

Hjälptext, footer-länkar och sekundär metainformation.

Caption0.72rem · uppercase

Eyebrow / kategori

Riktlinje: Använd letter-spacing: -0.03em på H1, -0.025em på H2–H4. Brödtext har line-height: 1.6–1.7. Maxbredd för läsbar text ≈ 65 ch.

Knappar

Tre varianter används på sajten — primär (gradient), outline och ghost. Alla har 8 px radie, semibold-vikt och mjuk hover med translation 1–2 px upp.

Variant	Klass	Användning
Primary	`.btn .btn-primary`	Huvud-CTA per sektion. Endast en per vy.
Outline	`.btn .btn-outline`	Sekundär handling vid sidan av primär.
Ghost	`.btn .btn-ghost`	Lågprioriterad åtgärd, t.ex. «Ladda ned» intill primär.

Komponenter

Återkommande byggstenar från designsystemet — kort, taggar, badge och feature-listor.

Hero-badge

Öppen AI-plattform för offentlig sektor

Advantage card

Datasuveränitet

Data behöver aldrig lämna Sverige. Du behåller kontrollen över var, hur och av vem den behandlas.

Tag / chip

Öppen källkod EU-värd Kompatibel v1.9.0

Feature item

Plattformen är öppen källkod under Apache 2.0.

Stöd för svenska, kommunal terminologi och offentliga arbetsflöden.

Skuggor & djup

Skuggor används sparsamt för att signalera elevation och hover. Mörka teman har djupare alfa, ljust tema har subtilare.

--shadow-sm

--shadow-md

--shadow-lg

--shadow-xl

--shadow-brand

--shadow-glow

Form & spacing

Mjuka hörn ger en vänlig, modern känsla. Skalan bygger på 4-px-multipler.

Border radius

radius
0.5 rem--radius

md
0.75 rem--radius-md

lg
1 rem--radius-lg

xl
1.5 rem--radius-xl

pill
100 px(badge)

Spacing-mått

0.25 rem

0.5 rem

0.75 rem

1 rem

1.5 rem

2 rem

3 rem

5 rem

Containerns max-bredd är 68.75 rem (1 100 px) med padding clamp(1.25 rem, 5vw, 3 rem). Sektioner har vertikal padding 5 rem (mobil: 3 rem).

Ikoner

Ikoner är linjebaserade (stroke) i 1.8 px stroke, 24×24 viewBox och färgsätts med currentColor. Stilen följer Lucide / Feather-konventionen.

shield

globe

chat

document

github

moon

sun

arrow

Tips: Använd aria-hidden="true" på dekorativa ikoner och role="img" + aria-label på meningsbärande.

Rörelse

Animationer ska vara snabba, mjuka och respektfulla — aldrig distraherande. Sajten respekterar prefers-reduced-motion.

Token	Värde	Användning
`--transition-fast`	0.15s cubic-bezier(0.4,0,0.2,1)	Mikrointeraktioner
`--transition-normal`	0.2s ease	Standard, hover
`--transition-smooth`	0.3s cubic-bezier(0.4,0,0.2,1)	Knapp / kort
`--transition-entrance`	0.6s cubic-bezier(0.4,0,0.2,1)	Inanimering

Mönster

Hover-lyft: kort flyttas upp 2–4 px med ökad skugga.
Fade up: innehåll fadear in nedifrån vid scroll-entré (20 px translation).
Pulse: badge-prick pulserar i 2.5 s loop som subtil livssignal.
Reduced motion: alla translations stängs av om användaren begärt det.

Röst & tonalitet

Eneo skriver på tydlig svenska, för svensk offentlig sektor. Tonen är saklig, varm och självsäker — utan teknisk jargong eller hype.

Tydlig

Korta meningar. Konkret framför abstrakt. Förklara förkortningar första gången.

Saklig

Underbygg påståenden med konkreta funktioner eller egenskaper. Undvik superlativer.

Inkluderande

Skriv för läsaren — ofta en kommunal medarbetare. Ingen forskningsjargong eller AI-mystik.

Trygg

Lyft frågor om datasuveränitet, integritet och kontroll proaktivt. Förtroende är centralt.

Skriv så här · skriv inte

Skriv så här Eneo körs på svenska servrar. Du bestämmer var datan lagras och vem som har tillgång.

Inte så här Vår banbrytande AI-plattform revolutionerar paradigmet för enterprise-grade compliance.

Skriv så här En öppen plattform — du kan granska koden, anpassa modulerna och bygga vidare själv.

Inte så här State-of-the-art LLM-orkestrering med next-gen RAG-arkitektur.

Skrivregler för namnet

Konsekvent stavning är ett av de enklaste — och viktigaste — sätten att bygga igenkänning. Använd någon av tre godkända former i text.

Lång form

Eneo AI

Vid första nämnande, i officiella sammanhang och när det behöver framgå att det handlar om en AI-plattform.

Kort form · vardag

Eneo

I löptext efter första nämnande, i interna sammanhang och i vardaglig kommunikation.

Webbform

Eneo.ai

När det är naturligt att referera till webbplatsen eller signalera den digitala destinationen — t.ex. «läs mer på Eneo.ai».

Stort E, små bokstäver för resten. Namnet stavas alltid med versalt E — oavsett position i meningen och oavsett vilken form som används. Aldrig versaler, aldrig gemener, aldrig sammansatt med «AI» utan blanksteg.

Eneo AI är en öppen AI-plattform för offentlig sektor.

Vi har använt Eneo i tre månader nu.

Med Eneo behåller du kontrollen över datan.

Läs mer på Eneo.ai.

eneo är en AI-plattform. (litet e)

ENEO levererar… (versaler)

Vi använder Eneo Ai eller Eneo ai. (AI ska alltid vara versaler)

EneoAI eller Eneo-AI (felaktig sammansättning)

Övriga konventioner

«AI» (versaler), «LLM» (versaler) — förkortningar utan punkter.
Vi skriver «offentlig sektor», inte «public sector» eller «myndighet» (det senare när det specifikt avses).
Citationstecken: «svenska gåsögon», inte "raka" eller "engelska".
Tankstreck: – (en dash) med blanksteg, inte - (bindestreck).

Sociala medier

Riktlinjer för avatar, omslag, OG-bild och inläggsformat. Konsekvens i avatar och tonalitet bygger igenkänning över tid.

Format

Riktlinjer per kanal

Kanal	Avatar	Omslag/banner	Inlägg
LinkedIn	400×400	1128×191	1200×627 (länk) eller 1080×1080
X / Bluesky	400×400	1500×500	1200×675
YouTube	800×800	2560×1440	Tumnagel 1280×720
OG (länkdelning)	—	—	1200×630 (placerad i `public/og-image.png`)

Inläggsstruktur

Krok — En konkret iakttagelse eller fråga, första raden.
Substans — Vad är nytt? Varför spelar det roll för offentlig sektor?
Avslut — Länk, fråga eller inbjudan till samarbete.
Hashtaggar — Sparsam användning. Föredra svenska: #offentligsektor #digitalisering #AI #öppenkällkod.

Bildregler: Använd alltid varumärkesblå bakgrund eller den mörka hero-glow-gradienten. Undvik stockfoton som inte representerar svensk offentlig sektor. Bilder ska vara läsbara även på liten skärm — text minst 32 px för OG-bilder.

Tillgänglighet

Eneo riktar sig till offentlig sektor — tillgänglighet är ett baskrav, inte en pluskvalitet. Designen följer WCAG 2.1 AA.

Kontrast: brödtext mot bakgrund ≥ 4.5:1, stora rubriker ≥ 3:1.
Fokus: alla interaktiva element har tydlig fokusring (outline: 2px solid var(--brand-bright)).
Tangentbord: all navigation och interaktion ska gå att nå med tabb och retur.
Hoppa till innehåll: varje sida börjar med en skip-länk till #main-content.
Reduced motion: respektera prefers-reduced-motion — animationer stängs av.
Forced colors: gradient-text faller tillbaka till LinkText i Windows High Contrast.
Språk: alltid lang="sv" i HTML-rotelementet.
Alt-text: meningsbärande bilder får beskrivande alt; dekorativa får alt="" eller aria-hidden="true".

Tillgänglighetsredogörelse: Den officiella redogörelsen finns på tillganglighetsredogorelse.html och uppdateras minst en gång per år.

Resurser

Filer för nedladdning. För konsekvens — använd alltid de officiella filerna nedan, inte skärmdumpar eller exporter från Word.

Logotyp · SVG Eneo-logo-svg.svg OG-bild · PNG og-image.png · 1200×630 Favicon favicon.ico · 16/32/48 Apple touch icon 180×180 Designguide (Markdown) DESIGN-GUIDE.md Designtokens (CSS) css/v2-variables.css