Brand & designsystem · v2.0
Ceptiv, skærpet.
Én identitet til alt, vi laver: hjemmesiden, tilbud, opslag på sociale medier, slides og de produkter, vi designer for kunder. Logoet er stadig til at kende. Omkring det har vi bygget en skarpere palet, en ny overskriftsskrift, et grafisk sprog tegnet ud fra spiralen og skabeloner, du kan redigere og downloade lige her.
8
kernefarver
77
farvetokens
7
grafiske systemer
13
bannerformater
01 · Essens
Fra indsigt til interface.
Ceptiv er et design- og udviklingsstudie. Vi starter med de mennesker, der skal bruge produktet, omsætter det, vi lærer, til interfaces og identiteter og bygger dem derefter. Research, UX/UI, brand og kode i ét team, så intet går tabt mellem trinene.
Nysgerrige
Vi spørger, før vi tegner. Interviews, feltbesøg og data kommer først, holdninger bagefter.
Omhyggelige
Detaljerne er produktet. Luft, ordvalg og tilstande får samme omhu som den store idé.
Klare
Almindeligt sprog, faste priser og interfaces, der forklarer sig selv.
Engagerede
Vi bliver. Mange af vores kunder har arbejdet med os i årevis, på tværs af mange projekter.
Sådan lyder vi
Sig det ligeud
Gør: Vi interviewer dine brugere, før vi designer noget.
Undgå: Vi udnytter brugercentrerede metoder til idéudvikling.
Vær konkret
Gør: Tilbud inden for 24 timer. Fast pris.
Undgå: Hurtig levering til en konkurrencedygtig pris.
Varm, ikke sød
Gør: Fortæl os, hvad der er svært i dag. Vi kan lide svært.
Undgå: Lad os skabe magi sammen!! ✨
Personlighed
02 · Logo
Den samme spiral, skærpet.
Vi har beholdt mærket og ordmærket og rettet det, der holdt dem tilbage på skærme: et ordmærke, der blev for lille ved siden af spiralen, en flad sort palet og ingen regler for brugen.
Balanceret logo
Ordmærket er 22 % større og optisk centreret på spiralen, så det kan læses i navigationen på 24 px.
Gnisten
Prikken over i’et er nu en perfekt cirkel i Signal. Det er vores mindste brandelement, og det går igen i hele systemet.
App-ikon
Et nyt afrundet ikon placerer gnisten midt i spiralen, til favicons, apps og avatarer.
Kode, ikke en fil
Logoet er nu en inline SVG-komponent. Det er skarpt i alle størrelser, loader med siden og kan ikke forsvinde.
Konstruktion
Spiralen er tre buer inden i hinanden, der åbner mod højre, som et C, der bliver ved. Ordmærkets x-højde er centreret på spiralens kerne.
Frirum
Hold et frirum omkring logoet svarende til højden af “c” i ordmærket, markeret x.
Mindste størrelse
Vandret logo 80 px / 20 mm bredt. Mærket alene 16 px / 5 mm.
80 px
16 px
Opsætninger
Farvevarianter
Ink on Paper
White on Ink
White on Signal
Mono
Undgå venligst
At strække eller mase det
At rotere det
At farve spiralen i flere farver
At tilføje skygger eller effekter
At placere det på urolige fotos uden bund
At genopbygge ordmærket i en anden skrift
03 · Farver
Blæk og papir, tændt af et signal.
De fleste flader er Ink eller Paper. Signal er accenten: én pr. visning, på det, vi vil have dig til at lægge mærke til. Iris giver dybde til forløb og illustration, og støttefarverne bærer status og data. Alle skalaer er bygget i OKLCH, så samme trin har samme tyngde på tværs af farver.
Fordeling
Cirka 60 % Ink eller Paper, 30 % Graphite, 10 % accenter. Signal fylder sjældent mere end 5 %.
Fulde skalaer
Klik på en farve for at kopiere hex-værdien. Tallet viser kontrasten mod hvid eller ink.
Signal
Iris
Mint
Saffron
Lagoon
Graphite
Paper
Tilgængelige kombinationer
Kontrastforhold for de kombinationer, vi bruger mest. AA kræver 4,5 for brødtekst og 3 for stor tekst.
Forløb
04 · Typografi
En overskriftsskrift med karakter.
Bricolage Grotesque afløser fed Geist i overskrifter. Det er en grotesk med lidt skæve detaljer og optiske størrelser, så den står stramt i store overskrifter og kan læses i små. Geist bliver til UI og brødtekst, Geist Mono markerer data, og Instrument Serif kursiv tilføjer et udtryksfuldt ord en gang imellem.
Display & overskrifter
Bricolage Grotesque
Aa
Research der ændrer beslutninger
Overskrifter, store tal, bannere. 600–700, stram spatiering.
Quick brown foxes jump over lazy dogs. Æble, øl og å.
Tekst & interface
Geist
Aa
Brødtekst, UI, knapper, formularer. 400–600.
Quick brown foxes jump over lazy dogs. Æble, øl og å.
Labels & data
Geist Mono
Aa
Rubrikker, metadata, kode og tal. Versaler med bred spatiering.
Quick brown foxes jump over lazy dogs. Æble, øl og å.
Accent
Instrument Serif
Aa
Et eller to ord i kursiv, i Signal. Aldrig hele sætninger.
Quick brown foxes jump over lazy dogs. Æble, øl og å.
Typeskala
display · 88/84
Research der ændrer beslutninger
h1 · 64/64
Research der ændrer beslutninger
h2 · 44/46
Research der ændrer beslutninger
h3 · 28/32
Research der ændrer beslutninger
lead · 20/31
Research der ændrer beslutninger
body · 16/26
Research der ændrer beslutninger
small · 14/21
Research der ændrer beslutninger
label · 12/16
Case · Grundfos iGRID
05 · Tokens
Systemet i tal.
Afstande, hjørner, dybde og bevægelse deles mellem hjemmesiden, kundeportalerne og designfilerne. Eksporter dem som CSS-variabler eller JSON.
Afstande · 4 px base
Hjørneradius
xs · 6
sm · 10
md · 14
lg · 20
xl · 28
pill · ∞
Dybde
hairline
lift
float
glow
Bevægelse
Hold musen over for at afspille:root {
--ceptiv-ink: #0d0d11;
--ceptiv-paper: #f6f5f1;
--ceptiv-signal-50: #fff4f2;
--ceptiv-signal-100: #ffe7e1;
--ceptiv-signal-200: #fed0c5;
--ceptiv-signal-300: #feb19f;
--ceptiv-signal-400: #fe8a6f;
--ceptiv-signal-500: #ff532b;
--ceptiv-signal-600: #df390c;
--ceptiv-signal-700: #ba2a00;
--ceptiv-signal-800: #941e00;
--ceptiv-signal-900: #701400;
--ceptiv-signal-950: #4a0800;
…Tailwind-klasser
bg-ink bg-paper text-signal-500 bg-signal-500 hover:bg-signal-600 bg-iris-600 text-graphite-600 ring-mint-500 font-display font-serif italic
06 · Komponenter
Bygget af de samme dele.
Kernekomponenterne i de nye tokens. De virker allerede i koden gennem Tailwind-klasser som bg-signal-500 og font-display.
Knapper
Tags & status
Felter
Hvad har du brug for?
Kort
Det komplekse gjort enkelt
Researchbaserede interfaces til portaler, dashboards og apps.
40+
integrationer klar til brug
De arbejder hurtigt og mister aldrig kunden af syne.
Lead Global Product Manager, Grundfos
07 · Grafisk sprog
Stemnings- og identitetsgrafik.
Syv grafiske systemer tegnet ud fra spiralen og gnisten. De genereres i kode, så de skalerer til ethvert format uden at miste detaljer. Vælg et farvetema, og download hver af dem som SVG eller PNG til slides, dokumenter og opslag.
Tema
Orbit
Spiralens omrids gentaget i fire størrelser. Heroes og forsider.
Signalfelt
Et prikgitter med en spiralarm igennem. Data og tech.
Konturer
C-buer i mærkets rytme. Sektionsskift og hjørner.
Aura
Blødt lys i Signal, Iris og Saffron med fin kornethed. Stemning og baggrunde.
Blueprint
Gitter, konstruktionscirkler og mærket. Proces og research.
Gnist
Gnisten med sine baner. Nyheder og citater.
Mønster
Mærket som gentagelse. Merchandise, emballage og tapet.
09 · Tryksager & dokumenter
Materiale til hverdagen.
Visitkort, brevpapir, forsider til tilbud, slides og en mailsignatur. Redigér felterne, og download trykklare filer.
Visitkort · 85 × 55 mm
Brevpapir · A4
Tilbudsforside · A4
Præsentation · 16:9
Mailsignatur
Kopiér HTML’en, og indsæt den i Outlook, Apple Mail eller Gmail.
|
Dit Navn
Senior UX/UI-designer
ceptiv.net Fra indsigt til interface.
|
10 · I brug
Sådan ser det ud uden for skærmen.
Fotorealistiske eksempler på identiteten i brug: tryk, skiltning, merchandise og kampagner.
Visualiseringer til brandmanualen.
11 · Downloads
Det hele samlet.
Logopakke
SVG og PNG, alle opsætninger og farver
App-ikon
Ink, Signal og Paper, 1024 px
Skrifter
Gratis på Google Fonts
Designtokens
CSS-variabler og JSON
Logofiler
Alle opsætninger i fem farveversioner, som SVG til skærm og tryk og PNG i 2000 px.
Vil du have et brandsystem som dette?
Vi designer visuelle identiteter og designsystemer til virksomheder, der vil se lige så godt ud, som de fungerer.