Sowandox AB · Brand kit

SVG · PNG · HTML

Brand kit.

Fig. 0 — ModercellenKnoppvinklar i heron

Hejp! 6°
Klimatklart 180°
PortSupply360 −40°
Nästa venture 140°

Allt som behövs för att använda Sowandox rätt.

Sidan är kitet: logotypen, orben, färgerna och rörelserna här ritas av samma kod som sajten. Ta filerna, följ reglerna, rita aldrig om.

Ladda ner allt (.zip)

(01) Konceptet

Knoppning.

Avknoppning är svenskans ord för spin-off. Hela identiteten bygger på vad ordet betyder.

01
I biologin är knoppning när en ny cell växer ut ur modercellen, får en hals och till sist lossnar som en egen organism.
02
Det är Sowandox modell: bolagen byggs inuti Sowandox AB och knoppas av som egna företag när de bär sig.
03
Orben med det utstansade w:et är modercellen, och bolagen växer ut ur den som färgade knoppar – halsens längd visar hur långt de kommit.
04
Rörelsen dekorerar inte. Den är modellen.

M3 · FödelsenFig. 1 — Hero-posen · Halsens längd = status

(02) Logotyp

Ordmärket.

Två färger: bläck på papper och papper på bläck. Aldrig accentfärg, gradient, skugga eller kontur. Rita aldrig om – använd filerna.

Standard · bläck på papper

Bläck: Med ™SVG Bläck: Utan ™SVG Bläck: 600 pxPNG Bläck: 1200 pxPNG Bläck: 2400 pxPNG

Natt · papper på bläck

Papper: Med ™SVG Papper: Utan ™SVG Papper: 600 pxPNG Papper: 1200 pxPNG Papper: 2400 pxPNG

currentColor för webbenSVG

Frizon

rrrrh

r = ½ hOrbens radie r runt hela märket. r är halva ordmärkets höjd. Inga knoppar, fältlinjer eller text innanför.

Minsta storlek

Med ™ – från 120 px bredd

Utan ™ – under 120 px

20 pxOrdmärke, minsta höjd
24 pxOrdmärke i headern
16 pxOrbsymbol, minsta storlek

På natt.

Papper på bläck i nattsektioner och footer. Loggan kommer in genom orben: den snurrar fram och bokstäverna vecklas ut ur den.

M1 · Knoppning · ≈ 1,5 s · en gång per besökM16 · Rull · vinkel = sträcka ÷ radie

(03) Symbolen

Orben.

Cirkeln med det utstansade w:et är ett eget märke – och det enda som får bära knoppar.

Orbsymbolen

Orb, bläckSVG Orb, papperSVG Orb, bläckPNG 512 Orb, bläckPNG 1024 Orb, papperPNG 512 Orb, papperPNG 1024 OrganismSVG Organism, papperSVG OrganismPNG 2048

Knoppbolagets färgHalslängd = statusModerorbsymbolenLedig platsstreckad

Organismens delar

Regler

01Knoppar fäster utanför orbens kant och täcker aldrig w:et.
02Bara orbsymbolen bär knoppar, halsar och fältlinjer – aldrig ordmärket.
03Ingen text över w:et.
04Orben roteras, förvrängs eller speglas aldrig i vila.
05Minsta storlek 16 px.

Här används orben

Sowandox – Idéer in. Bolag ut.
Favicon
Appikon
Avatar
Rullaren
Ägs och drivs av Sowandox AB
Ägarikon

Storlekar

16 px
24 px
32 px
48 px
64 px
96 px
128 px

(04) Färg

Sowandox är svartvitt.

Färgen tillhör bolagen. Den används bara som grafik – prick, knopp, understrykning – aldrig som text, knapp, länk eller fokus.

Sowandox · bläck och papper

Papper

--paper

Bas och bakgrund. Hålet i orbens w.

Bläck

--ink

Text, orben, knappar, nattsektioner.

Papper 2

--paper-2

Sänkt yta: kort, formulärfält.

Bläck 2

--ink-2

Upphöjd yta på natt.

Grafit

--graphite

Sekundär text på papper.

Dimma

--mist

Sekundär text på natt.

Linje

--rule

Hårlinjer på papper.

Linje, natt

--rule-inv

Hårlinjer på natt.

Sten

--stone

Bara grafik: piktogrammet ”Kvar”. Aldrig text.

Bolagen och krediten · bara grafik

Hejp!

--hejp

Bara Hejp!: knopp, prick, understrykning, linsring.

Hejp! soft

--hejp-soft

Hejp! på natt: prick och knopp.

Klimatklart

--kk

Bara Klimatklart: knopp, prick, understrykning, linsring.

Klimatklart soft

--kk-soft

Klimatklart på natt: prick och knopp.

PortSupply360

--ps

Bara PortSupply360: knopp, prick, understrykning, linsring.

PortSupply360 soft

--ps-soft

PortSupply360 på natt: prick och knopp.

Svensk Synlighet blå

--ss-blue

Bara kreditens hårlinje, 62 %.

Svensk Synlighet gul

--ss-yellow

Bara kreditens hårlinje, 38 %.

Regler

01Sowandox egna element är bläck eller papper – aldrig accent.
02Accentfärger används aldrig till knappar, länkar eller fokus.
03Status = färgad prick + bläcktext.
04Fokusring: 2 px bläck på papper, 2 px papper på natt.

Kontrastpar · WCAG 2.1

Sowandox
Förgrund / bakgrund	Kvot	Används till
Bläck / Papper	16,71:1	All text
Bläck / Papper 2	14,97:1	All text
Grafit / Papper	5,82:1	Brödtext, mono från 11 px
Grafit / Papper 2	5,22:1	Brödtext
Papper / Bläck	16,71:1	All text
Dimma / Bläck	7,88:1	Brödtext, mono
Dimma / Bläck 2	7,07:1	Brödtext
Sten / Papper	3,05:1	Bara piktogrammet ”Kvar”

Bolagen
Förgrund / bakgrund	Kvot	Används till
Hejp! / Papper	2,72:1	Aldrig text. Grafik från 3 px, med bläcktext bredvid
Bläck / Hejp!	6,15:1	Text på orange yta (vit text förbjuden)
Klimatklart / Papper	5,07:1	Grafik. Text tillåten men används inte
PortSupply360 / Papper	3,61:1	Grafik (≥ 3:1), aldrig brödtext
Bläck / PortSupply360	4,63:1	Text på blå yta
Hejp! soft / Bläck	7,42:1	Prickar och namn på natt
Klimatklart soft / Bläck	7,61:1	Prickar och namn på natt
PortSupply360 soft / Bläck	7,29:1	Prickar och namn på natt
Klimatklart / Bläck	3,29:1	Stora knoppar på natt, aldrig text

(05) Typografi

Två familjer. En breddaxel.

Mona Sans bär allt utom meta. Martian Mono bär index, status och telemetri. Bredden 75–125 är motorn i den kinetiska typografin.

Mona Sans

GitHub · SIL OFL 1.1 · vikt 200–900 · bredd 75–125

Allt utom meta: rubriker, bröd, knappar.

Martian Mono

Evil Martians · SIL OFL 1.1 · vikt 400–500 · bredd 75–112,5

Meta: index, status, telemetri. 12 px, versaler, bredd 87,5 %.

Bredd

Idéer in.Bolag ut.

Bredd wdth100 %

Vikt wght780

M2 · första raden pressas in, andra trycks utfont-stretch: 100%; font-weight: 780;

Typskalan

text-heromin(12.2vw, 21vh, 236px)
Rad .83 · Spärr −.052em · Vikt 780H1 på startsidan
Idéer in.
text-megaclamp(64px, 12vw, 220px)
Rad .84 · Spärr −.055em · Vikt 780”Plats för en till.”, ”Skriv.”
Plats för en till.
text-giantclamp(50px, 7.4vw, 142px)
Rad .84 · Spärr −.055em · Vikt 780Kapital. Kompetens. Samarbete.
Kapital.
text-displayclamp(44px, 6.6vw, 118px)
Rad .90 · Spärr −.045em · Vikt 760Sektionsrubriker (H2)
Fyra steg. Samma ägare tills det bär.
text-stepclamp(40px, 4.6vw, 80px)
Rad .95 · Spärr −.045em · Vikt 760Modellsteg, strykord
Bygge
text-manifestclamp(30px, 4.05vw, 70px)
Rad 1.03 · Spärr −.035em · Vikt 620Manifestet
Sowandox är ett venturebolag.
text-h3clamp(24px, 2.3vw, 36px)
Rad 1.08 · Spärr −.025em · Vikt 640Taglines, kortrubriker
Ett bolag som föder bolag.
text-leadclamp(19px, 1.6vw, 24px)
Rad 1.34 · Spärr −.01em · Vikt 450Ingresser
Allt som behövs för att använda Sowandox rätt.
text-kickerclamp(17px, 1.3vw, 20px)
Rad 1.35 · Spärr −.012em · Vikt 520Hero-kicker
Venturebolaget som äger Hejp!, Klimatklart och PortSupply360.
text-body17px (16px ≤ 760)
Rad 1.5 · Spärr 0 · Vikt 430Brödtext
Vi finansierar, bygger och driver dem inuti Sowandox AB – tills de bär sig och knoppas av som egna företag.
text-ui14–15px
Rad 1.2 · Spärr −.005em · Vikt 560–600Nav, knappar, chips
Pitcha en idé
text-mono12px
Rad 1.5 · Spärr .04em · Vikt 400Meta, index, status
Sowandox AB · Venturebolag

(06) Stegen

Fyra steg. En knopp.

Samma organism visar var ett bolag står. Halsens längd är status, och i steg 04 nyps den av.

Stegmätaren – med riktiga data

Hejp!Idé klart · Bygge pågår

IdéKlart
ByggePågår
DriftKvar
Eget bolagKvar

KlimatklartIdé klart · Bygge pågår

IdéKlart
ByggePågår
DriftKvar
Eget bolagKvar

PortSupply360Bygge klart · Drift pågår

IdéKlart
ByggeKlart
DriftPågår
Eget bolagKvar

Stegpiktogram · 80×44

Stegpiktogram · 80×44
Steg	Klart	Pågår	Kvar
01 Idé
02 Bygge
03 Drift
04 Eget bolag

(07) Fältlinjer

Fältet runt orben.

Topografiska linjer av organismens fält. De går ihop runt halsarna och bryts av sig själva när en knopp nyps av. Alltid dekor, aldrig information.

(08) Rörelse

Varje rörelse betyder något.

En animationsmotor, mjuk scroll och en regel: pulsen är den enda ändlösa loopen. Allt pausas utanför vy, och allt har ett stilla läge.

Kurvor

Längder

Signaturrörelser

(09) Grid

Tolv kolumner. Fyra i mobilen.

Full bredd, ingen maxbredd – innehållet följer kolumnerna. Marginal och kolumngap skalar med fönstret.

12 kolumner · marginal — · gap —

Etikett · kol 1–2Etikett · kol 1–4Rubrik · kol 3–11Rubrik · kol 1–4Not · kol 3–7Not · kol 1–4

Sektionshuvud på gridden

Mått

Mått
Token	Storlek	Nu
`--m`Sidomarginal	`clamp(16px, 2.5vw, 36px)`	—
`--g`Kolumngap	`clamp(12px, 1.7vw, 24px)`	—
`--sec`Sektionsluft	`clamp(88px, 12vw, 180px)`	—
`--hdr`Header	`64px`	64 px

Brytpunkter

sm≤ 760 pxMobil, 4 kolumner
md761–980 px12 kolumner, mobilmeny
lg981–1180 pxFull navigation
xl1181–1199 pxStatus i headern
hero≥ 1200 pxFria knoppetiketter i heron

Radier

99pxPiller: knappar, chips
18pxKort
3pxFokusring
1px --ruleHårlinje
1px --inkStark avdelare

(10) Tillämpningar

Samma organism överallt.

Delningsbilder, omslag, avatarer, badges och mejlsignatur – ritade ur samma geometri som sajten.

Delningsbilder · 1200×630

Startsidan/sv/opengraph-image/og
Hejp!/sv/ventures/hejp/opengraph-image/og
Klimatklart/sv/ventures/klimatklart/opengraph-image/og
PortSupply360/sv/ventures/portsupply360/opengraph-image/og
Modellen/sv/hur/opengraph-image/og
Brand kit/sv/kit/opengraph-image/og

Mejlsignatur

Tabellayout och inga webbtypsnitt, så att den håller i alla mejlprogram.

Öppna filen orb-40.png

(11) Gör / gör inte

Gör så här. Inte så här.

Sex regler som håller identiteten hel. Exemplen är ritade, inte fotograferade.

01
Gör
Gör: Knoppar växer ur orbsymbolen.
Gör inte
Gör inte: Knoppar på ordmärket.
02
Gör
Gör: Loggan i bläck eller papper.
Gör inte
Gör inte: Loggan i accentfärg, gradient eller med skugga.
03
Gör
Gör: Text bredvid orben.
Gör inte
Gör inte: Text över w:et.
04
Gör
Gör: Bläcktext på orange yta.
Gör inte
Gör inte: Vit text på Hejp!-orange.
05
Gör
Gör: Status som färgad prick och bläcktext.
Gör inte
Gör inte: Status som färgad text.
06
Gör
Gör: Loggan som den är.
Gör inte
Gör inte: Roterad, förvrängd eller speglad logga.

Krediter

Identitet och sajt utvecklade av Svensk Synlighet.

svensksynlighet.se (öppnas i ny flik)

Innehåll

Brand kit.

Knoppning.

Ordmärket.

Frizon

Minsta storlek

På natt.

Orben.

Regler

Här används orben

Storlekar

Sowandox är svartvitt.

Sowandox · bläck och papper

Papper

Bläck

Papper 2

Bläck 2

Grafit

Dimma

Linje

Linje, natt

Sten

Bolagen och krediten · bara grafik

Hejp!

Hejp! soft

Klimatklart

Klimatklart soft

PortSupply360

PortSupply360 soft

Svensk Synlighet blå

Svensk Synlighet gul

Regler

Kontrastpar · WCAG 2.1

Två familjer. En breddaxel.

Mona Sans

Martian Mono

Bredd

Typskalan

Fyra steg. En knopp.

Stegmätaren – med riktiga data

Stegpiktogram · 80×44

Fältet runt orben.

Varje rörelse betyder något.

Kurvor

Längder

Signaturrörelser

Tolv kolumner. Fyra i mobilen.

Mått

Brytpunkter

Radier

Samma organism överallt.

Delningsbilder · 1200×630

Omslag

Avatarer · 1080×1080

Stegbadges · 512×512

Ikoner

Mejlsignatur

Gör så här. Inte så här.

Krediter