3 ventures · 1 open slotPitch an idea

Sowandox AB · Brand kit

SVG · PNG · HTML

Brand kit.

Fig. 0 — The mother cellBud angles in the hero
  • Hejp! 6°
  • Klimatklart 180°
  • PortSupply360 −40°
  • Next venture 140°

Everything you need to use Sowandox correctly.

This page is the kit: the logo, the orb, the colours and the motion here are drawn by the same code as the site. Take the files, follow the rules, never redraw.

Download everything (.zip)

(01) Concept

Knoppning.

Avknoppning is the Swedish word for spin-off – literally a budding-off. The whole identity is built on what the word means.

  1. 01

    In biology, budding is when a new cell grows out of its mother cell, forms a neck and finally breaks free as an organism of its own.

  2. 02

    That is the Sowandox model: the companies are built inside Sowandox AB and spin off as companies of their own once they stand on their own.

  3. 03

    The orb with the cut-out w is the mother cell, and the companies grow out of it as coloured buds – the length of the neck shows how far each has come.

  4. 04

    The motion isn’t decoration. It is the model.

M3 · The birthFig. 1 — The hero pose · Neck length = status

(03) Symbol

The orb.

The circle with the cut-out w is a mark of its own – and the only one allowed to carry buds.

Sowandox

The orb symbol

Orb, inkSVGOrb, paperSVGOrb, inkPNG 512Orb, inkPNG 1024Orb, paperPNG 512Orb, paperPNG 1024OrganismSVGOrganism, paperSVGOrganismPNG 2048
Budthe company’s colourNecklength = statusMotherthe orb symbolOpen slotdashed
Anatomy of the organism

Rules

  1. 01Buds attach outside the orb’s edge and never cover the w.
  2. 02Only the orb symbol carries buds, necks and field lines – never the wordmark.
  3. 03No text over the w.
  4. 04The orb is never rotated, distorted or mirrored at rest.
  5. 05Minimum size 16 px.

Where the orb is used

  • Sowandox – Ideas in. Companies out.
    Favicon
  • App icon
  • Avatar
  • The roller
  • Owned and run by Sowandox AB
    Owner icon

Sizes

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

(04) Colour

Sowandox is black and white.

The colour belongs to the companies. It is only ever graphics – dot, bud, underline – never text, button, link or focus.

Sowandox · ink and paper

Click a value to copy it. The figure in each swatch is the contrast of its sample.

Paper

--paper

Base and background. The hole in the orb’s w.

Ink

--ink

Text, the orb, buttons, night sections.

Paper 2

--paper-2

Sunken surface: cards, form fields.

Ink 2

--ink-2

Raised surface at night.

Graphite

--graphite

Secondary text on paper.

Mist

--mist

Secondary text at night.

Rule

--rule

Hairlines on paper.

Rule, night

--rule-inv

Hairlines at night.

Stone

--stone

Graphics only: the “Left” pictogram. Never text.

The companies and the credit · graphics only

Hejp!

--hejp

Hejp! only: bud, dot, underline, lens ring.

Hejp! soft

--hejp-soft

Hejp! at night: dot and bud.

Klimatklart

--kk

Klimatklart only: bud, dot, underline, lens ring.

Klimatklart soft

--kk-soft

Klimatklart at night: dot and bud.

PortSupply360

--ps

PortSupply360 only: bud, dot, underline, lens ring.

PortSupply360 soft

--ps-soft

PortSupply360 at night: dot and bud.

Svensk Synlighet blue

--ss-blue

Only the credit’s hairline, 62%.

Svensk Synlighet yellow

--ss-yellow

Only the credit’s hairline, 38%.

Rules

  1. 01Sowandox’s own elements are ink or paper – never an accent.
  2. 02Accent colours are never used for buttons, links or focus.
  3. 03Status = coloured dot + ink text.
  4. 04Focus ring: 2 px ink on paper, 2 px paper at night.

Contrast pairs · WCAG 2.1

Sowandox
Foreground / backgroundRatioUsed for
Ink / Paper16.71:1All text
Ink / Paper 214.97:1All text
Graphite / Paper5.82:1Body text, mono from 11 px
Graphite / Paper 25.22:1Body text
Paper / Ink16.71:1All text
Mist / Ink7.88:1Body text, mono
Mist / Ink 27.07:1Body text
Stone / Paper3.05:1Only the “Left” pictogram
The companies
Foreground / backgroundRatioUsed for
Hejp! / Paper2.72:1Never text. Graphics from 3 px, with ink text beside
Ink / Hejp!6.15:1Text on an orange surface (white text forbidden)
Klimatklart / Paper5.07:1Graphics. Text allowed but not used
PortSupply360 / Paper3.61:1Graphics (≥ 3:1), never body text
Ink / PortSupply3604.63:1Text on a blue surface
Hejp! soft / Ink7.42:1Dots and names at night
Klimatklart soft / Ink7.61:1Dots and names at night
PortSupply360 soft / Ink7.29:1Dots and names at night
Klimatklart / Ink3.29:1Large buds at night, never text

(05) Typography

Two families. One width axis.

Mona Sans carries everything but meta. Martian Mono carries index, status and telemetry. The 75–125 width axis drives the kinetic typography.

Mona Sans

GitHub · SIL OFL 1.1 · weight 200–900 · width 75–125

Everything but meta: headings, body, buttons.

Martian Mono

Evil Martians · SIL OFL 1.1 · weight 400–500 · width 75–112.5

Meta: index, status, telemetry. 12 px, capitals, width 87.5%.

Width

Ideas in.Companies out.

100%
780

M2 · the first line is pressed in, the second pushed outfont-stretch: 100%; font-weight: 780;

The type scale

The smallest text size is 11 px.
  1. text-heromin(12.2vw, 21vh, 236px)
    Line .83 · Tracking −.052em · Weight 780    H1 on the home page

    Ideas in.

  2. text-megaclamp(64px, 12vw, 220px)
    Line .84 · Tracking −.055em · Weight 780    “Room for one more.”, “Write.”

    Room for one more.

  3. text-giantclamp(50px, 7.4vw, 142px)
    Line .84 · Tracking −.055em · Weight 780    Capital. Engineering. Partnership.

    Capital.

  4. text-displayclamp(44px, 6.6vw, 118px)
    Line .90 · Tracking −.045em · Weight 760    Section headings (H2)

    Four steps. Same owner until it pays its own way.

  5. text-stepclamp(40px, 4.6vw, 80px)
    Line .95 · Tracking −.045em · Weight 760    Model steps, struck words

    Build

  6. text-manifestclamp(30px, 4.05vw, 70px)
    Line 1.03 · Tracking −.035em · Weight 620    The manifesto

    Sowandox is a venture company.

  7. text-h3clamp(24px, 2.3vw, 36px)
    Line 1.08 · Tracking −.025em · Weight 640    Taglines, card headings

    A company that grows companies.

  8. text-leadclamp(19px, 1.6vw, 24px)
    Line 1.34 · Tracking −.01em · Weight 450    Intros

    Everything you need to use Sowandox correctly.

  9. text-kickerclamp(17px, 1.3vw, 20px)
    Line 1.35 · Tracking −.012em · Weight 520    Hero kicker

    The venture company that owns Hejp!, Klimatklart and PortSupply360.

  10. text-body17px (16px ≤ 760)
    Line 1.5 · Tracking 0 · Weight 430    Body text

    We fund, build and run them inside Sowandox AB – until they stand on their own and spin off as separate companies.

  11. text-ui14–15px
    Line 1.2 · Tracking −.005em · Weight 560–600    Nav, buttons, chips

    Pitch an idea

  12. text-mono12px
    Line 1.5 · Tracking .04em · Weight 400    Meta, index, status

    Sowandox AB · Venture company

(06) The steps

Four steps. One bud.

The same organism shows where a company stands. The length of the neck is the status, and at step 04 it pinches off.

The stage meter – with real data

Status is always written out in words – “Build done · Operations in progress” – never as a fraction.

Hejp!Idea done · Build in progress

  1. IdeaDone
  2. BuildIn progress
  3. OperationsLeft
  4. Spin-offLeft

KlimatklartIdea done · Build in progress

  1. IdeaDone
  2. BuildIn progress
  3. OperationsLeft
  4. Spin-offLeft

PortSupply360Build done · Operations in progress

  1. IdeaDone
  2. BuildDone
  3. OperationsIn progress
  4. Spin-offLeft

Stage pictograms · 80×44

Neutral in ink and graphite, or in the company’s colour. Left is always drawn in stone. Click for the SVG.
Stage pictograms · 80×44
StepDoneIn progressLeft
01 Idea
02 Build
03 Operations
04 Spin-off

(07) Field lines

The field around the orb.

Contour lines of the organism’s field. They merge around the necks and break by themselves when a bud pinches off. Always decoration, never information.

(08) Motion

Every movement means something.

One animation engine, smooth scrolling and one rule: the pulse is the only endless loop. Everything pauses out of view, and everything has a still state.

Curves

Durations

Signature moves

(09) Grid

Twelve columns. Four on mobile.

Full width, no max width – content follows the columns. Margin and gutter scale with the window.

12 columns · margin — · gutter —

Label · col 1–2Label · col 1–4Heading · col 3–11Heading · col 1–4Note · col 3–7Note · col 1–4
A section head on the grid

Measures

Measures
TokenSizeNow
--mPage marginclamp(16px, 2.5vw, 36px)—
--gGutterclamp(12px, 1.7vw, 24px)—
--secSection spacingclamp(88px, 12vw, 180px)—
--hdrHeader64px64 px

Breakpoints

  • sm≤ 760 pxMobile, 4 columns
  • md761–980 px12 columns, mobile menu
  • lg981–1180 pxFull navigation
  • xl1181–1199 pxStatus in the header
  • hero≥ 1200 pxFree bud labels in the hero

Radii

  • 99pxPill: buttons, chips
  • 18pxCard
  • 3pxFocus ring
  • 1px --ruleHairline
  • 1px --inkStrong divider

(10) Applications

The same organism everywhere.

Share images, covers, avatars, badges and an email signature – drawn from the same geometry as the site.

Share images · 1200×630

  • Share image for Home
    Home/en/opengraph-image/og
  • Share image for Hejp!
    Hejp!/en/ventures/hejp/opengraph-image/og
  • Share image for Klimatklart
    Klimatklart/en/ventures/klimatklart/opengraph-image/og
  • Share image for PortSupply360
    PortSupply360/en/ventures/portsupply360/opengraph-image/og
  • Share image for Model
    Model/en/hur/opengraph-image/og
  • Share image for Brand kit
    Brand kit/en/kit/opengraph-image/og

Covers

Avatars · 1080×1080

The orb fills 62% and survives a round crop.

Stage badges · 512×512

Icons

Email signature

Table layout and no web fonts, so it holds up in every email client.

Open the fileorb-40.png

(11) Do / don’t

Do this. Not this.

Six rules that keep the identity whole. The examples are drawn, not photographed.

  1. 01
    Do
    Do: Buds grow out of the orb symbol.
    Don’t
    Don’t: Buds on the wordmark.
  2. 02
    Do
    Do: The logo in ink or paper.
    Don’t
    Don’t: The logo in an accent colour, a gradient or with a shadow.
  3. 03
    Do
    Do: Text beside the orb.
    Don’t
    Don’t: Text over the w.
  4. 04
    Do
    Do: Ink text on an orange surface.
    Don’t
    Don’t: White text on Hejp! orange.
  5. 05
    Do
    Do: Status as a coloured dot and ink text.
    Don’t
    Don’t: Status as coloured text.
  6. 06
    Do
    Do: The logo as it is.
    Don’t
    Don’t: A rotated, distorted or mirrored logo.

Credits

Identity and site developed by Svensk Synlighet.

svensksynlighet.se (opens in a new tab)
Contents