StartupOulu

Brand

StartupOulu visual identity — logos, colors, and gradients

Logo

Wide — Dark text, white outline

Wide — Dark / White outline

SVG PNG
Wide — White text, dark outline

Wide — White / Dark outline

SVG PNG
Wide — Green text, dark outline

Wide — Green / Dark outline

SVG PNG
Wide — Dark text, green outline

Wide — Dark / Green outline

SVG PNG
Stacked — Dark text, white outline

Stacked — Dark / White outline

SVG PNG
Stacked — White text, dark outline

Stacked — White / Dark outline

SVG PNG
Stacked — Green text, dark outline

Stacked — Green / Dark outline

SVG PNG
Stacked — Dark text, green outline

Stacked — Dark / Green outline

SVG PNG

Logo Clearspace

The clearspace for horizontal logos is one times the width of the letter O (x) in all directions.

The clearspace for vertical logos is one times the width of the letter O (x) in all directions.

Typeface

Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#&()–

Hanken Grotesk Black

Headlines & display

900

The quick brown fox

The quick brown fox

The quick brown fox jumps over the lazy dog

Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#&()–

Hanken Grotesk Regular

Body & UI text

400

The quick brown fox

The quick brown fox

The quick brown fox jumps over the lazy dog

Available on

Brand Colors

Canvas

  • HEX#EDF2F5
  • RGB237 242 245
  • CMYK9 3 4 0
  • PMS656 C

Knowledge

  • HEX#070540
  • RGB8 5 62
  • CMYK100 95 40 50
  • PMS288 C

Passion

  • HEX#FF3296
  • RGB255 50 150
  • CMYK0 90 0 0
  • PMS232 C

Inspiration

  • HEX#E9DEFF
  • RGB233 222 255
  • CMYK10 16 0 0
  • PMS263 C

Growth

  • HEX#D2FACD
  • RGB210 250 205
  • CMYK26 0 32 0
  • PMS7485 C

Fame

  • HEX#FF4600
  • RGB255 70 0
  • CMYK0 87 100 0
  • PMS1655 C

Brand Gradients

Canvas
→
Inspiration
Inspiration
→
Growth
Passion
→
Knowledge
Growth
→
Inspiration
→
Passion
Fame
→
Growth
Growth
→
Passion
→
Fame

Shapes

Corner

SVG code 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 680 377">
  <path d="M 640,337 Q 659,337 659,320 L 660,87 L 595,18
           L 49,17 Q 28,17 28,34 L 29,154 L 88,215
           Q 114,215 114,219 L 117,275 Q 117,295 137,315
           L 179,335 Q 179,337 200,337 Z"/>
</svg>

Corner −8°

SVG code 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -96 680 473">
  <g transform="skewY(-8)">
    <path d="M 640,337 Q 659,337 659,320 L 660,87 L 595,18
             L 49,17 Q 28,17 28,34 L 29,154 L 88,215
             Q 114,215 114,219 L 117,275 Q 117,295 137,315
             L 179,335 Q 179,337 200,337 Z"/>
  </g>
</svg>

Box

SVG code 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 562 322">
  <path d="M 32,13 L 486,14 L 516,56 L 515,288
           Q 515,296 503,296 L 46,293 L 19,252
           L 20,21 Q 20,13 32,13 Z"/>
</svg>

Box −8°

SVG code 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -79 562 401">
  <g transform="skewY(-8)">
    <path d="M 32,13 L 486,14 L 516,56 L 515,288
             Q 515,296 503,296 L 46,293 L 19,252
             L 20,21 Q 20,13 32,13 Z"/>
  </g>
</svg>

Long L-shape

SVG code 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 548 530">
  <path d="M 36,20 L 465,25 L 517,83 L 510,501
           Q 510,510 500,510 L 202,502 L 152,447
           L 152,268 Q 152,256 140,255 L 74,252
           L 18,196 L 21,30 Q 21,20 36,20 Z"/>
</svg>

Long L-shape −8°

SVG code 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -77 548 607">
  <g transform="skewY(-8)">
    <path d="M 36,20 L 465,25 L 517,83 L 510,501
             Q 510,510 500,510 L 202,502 L 152,447
             L 152,268 Q 152,256 140,255 L 74,252
             L 18,196 L 21,30 Q 21,20 36,20 Z"/>
  </g>
</svg>

Square

SVG code 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 296 270">
  <path d="M 31,10 L 237,10 L 276,34 L 278,250
           Q 278,256 270,256 L 55,256 L 19,233
           L 16,17 Q 16,10 31,10 Z"/>
</svg>

Square −8°

SVG code 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -42 296 312">
  <g transform="skewY(-8)">
    <path d="M 31,10 L 237,10 L 276,34 L 278,250
             Q 278,256 270,256 L 55,256 L 19,233
             L 16,17 Q 16,10 31,10 Z"/>
  </g>
</svg>

Wide Square

SVG code 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 592 270">
  <path d="M 62,10 L 474,10 L 552,34 L 556,250
           Q 556,256 540,256 L 110,256 L 38,233
           L 32,17 Q 32,10 62,10 Z"/>
</svg>

Wide Square −8°

SVG code 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -84 592 354">
  <g transform="skewY(-8)">
    <path d="M 62,10 L 474,10 L 552,34 L 556,250
             Q 556,256 540,256 L 110,256 L 38,233
             L 32,17 Q 32,10 62,10 Z"/>
  </g>
</svg>

Image Frame

Frame photos and artwork with the brand's graphic shapes. Drop an image, choose a shape and background, optionally layer a brand gradient — then download or copy as PNG.

Drop image here or click to choose a file

CSS

brand.css 
:root {

  /* ── Colors ─────────────────────────────── */
  --color-canvas:      #EDF2F5;
  --color-knowledge:   #070540;
  --color-passion:     #FF3296;
  --color-inspiration: #E9DEFF;
  --color-growth:      #D2FACD;
  --color-fame:        #FF4600;

  /* ── Typography ─────────────────────────── */
  --font-family:         'Hanken Grotesk', sans-serif;
  --font-weight-black:   900; /* headlines */
  --font-weight-regular: 400; /* body */

  /* ── Gradients ───────────────────────────── */
  --gradient-canvas-inspiration:         linear-gradient(to bottom, #EDF2F5, #E9DEFF);
  --gradient-inspiration-growth:         linear-gradient(to bottom, #E9DEFF, #D2FACD);
  --gradient-passion-knowledge:          linear-gradient(to bottom, #FF3296, #070540);
  --gradient-growth-inspiration-passion: linear-gradient(to bottom, #D2FACD, #E9DEFF, #FF3296);
  --gradient-fame-growth:                linear-gradient(to bottom, #FF4600, #D2FACD);
  --gradient-growth-passion-fame:        linear-gradient(to bottom, #D2FACD, #FF3296, #FF4600);

}