Design system · v1

Team ScaleUp design system.

The living reference for everything on teamscaleup.se. Tokens, components, motifs, and voice, rendered from the production stylesheet so what you see here is exactly what any new page will get. Pair with DESIGN.md for the non-visual rules and with the brand PDF for print applications.

01 · Brand marks

Logo lockups.

Four approved wordmark lockups and three logomark-only variants. Gold on navy is the primary and preferred combination for all brand materials.

Wordmark

Gold on navy

Primary. Use for the vast majority of brand materials.

Black on white

Print documents, contracts, and light backgrounds.

White on dark

Dark photography, video overlays, reversed contexts.

Navy on gold

Gold accent panels, campaign hero cards, high-contrast callouts.

Logomark only

Gold logomark

Favicon, app icon, tight-space uses under 120px wide.

Black logomark

Print favicon, light-background icon uses.

White logomark

Reversed on dark photography or coloured panels.

Clear space: maintain a margin around the logo equal to the height of the letter S in ScaleUp. Minimum size: 120px wide (digital) or 35mm wide (print). Below these sizes, use the logomark only.

Use the approved lockups without modification
Keep clear space around the mark
Place the logo on solid brand colours

Don't

Stretch, distort, or rotate the logo
Recolour arbitrarily or add drop shadows
Alter mark-to-wordmark spacing
Place on busy or patterned backgrounds without a solid container

02 · Colour

Palette in use.

Midnight navy is the foundation. White is the body copy. Gold is the accent. The full extended palette from the brand PDF is available but rarely used in production; the site relies on primary colours plus opacity variants.

Primary — used everywhere

Midnight navy

#000427

var(--navy)

Golden yellow

#EFC957

var(--gold)

White

#FFFFFF

var(--white)

Navy 2

#07082F

var(--navy-2)

Opacity tokens — the real workhorses

All body copy, secondary text, and borders are white or gold at reduced opacity over navy. Prefer these over the extended palette for anything that goes on-screen.

Text

white 65%

var(--text)

Text dim

white 55%

var(--text-dim)

Border

white 7%

var(--border)

Gold dim

gold 50%

var(--gold-dim)

Border gold

gold 20%

var(--border-gold)

Gold faint

gold 7%

var(--gold-faint)

Extended palette — brand book reserve

Defined in the brand PDF for print material and future surfaces. Not currently used on the site.

Deep navy

#1A1D3F

Mid navy

#33365C

Slate navy

#4D5080

Muted navy

#8688A8

Pale navy

#C2C3D4

Deep gold

#D4AF25

Warm gold

#F2D470

Light gold

#F7E49A

Pale gold

#FAF0C4

Cream

#FFFBEC

Ratio: aim for roughly 65% navy · 25% white · 10% gold across any brand material. Navy is the foundation. Gold is reserved for headlines, labels, and highlights only — never for body copy.

03 · Typography

Montserrat, four weights.

One typeface across the entire brand. The site loads weights 400, 500, 600, and 700. Body copy renders at 400; headings step through 600 and 700 for emphasis. Line height stays generous for readability.

Type scale

Hero H1
clamp / 700 / 1.05

We help you become undeniable to investors.

Section H2
28–38px / 700 / 1.15

A clear map from where you are to investor-ready.

Card H3
22–26px / 700 / 1.2

Diligence on you, before the fund does.

Card H4
15px / 600 / 1.2

Siavash Habibi

Lede
16px / 400 / 1.65

High potential founders get rejected on criteria they didn't know existed.

Body
13.5–14px / 400 / 1.6–1.7

Two-week sprints. Bi-weekly check-ins. Gather artifacts. Strengthen the data room. We close the gaps that matter, in the order that matters.

Eyebrow
10px / 700 / caps / .2em

The third issue · company readiness

Role label
10px / 600 / caps / .16em

Co-founder & CEO

Button
11–12px / 700 / caps / .1em

Request analysis

Uppercase transforms — use sparingly. The text-transform: uppercase rule appears on only these element types: eyebrows, role labels, buttons, form-step badges, footer copy, small-caps footnotes. Body copy, headings, and lede paragraphs stay in sentence case. Never write source text in ALL CAPS — always let CSS handle the transform so the underlying content stays readable.

04 · Layout

One page, one column of thought.

Sections stack vertically at a fixed max width. Content sits inside 40px of horizontal padding on desktop, 20px on mobile. Sections separate with a 1px navy-tinted border and vertical breathing room of 120px.

.section { max-width: 1280px; margin: 0 auto; padding: 120px 40px; /* mobile: 72px 20px */ border-bottom: 1px solid var(--border); }

Grid patterns in use: 2-col (team cards, why-cols), 3-col (partner logos), 5-col (process cells), 1-col at <780px. Cards inside a grid share a 1px navy-tinted border. The border comes from the grid background bleeding through 1px gaps between children.

05 · Buttons

Two buttons. That's it.

A gold primary and a ghost secondary. Both are all-caps at 12px with wide letter-spacing. Both lift 2px on hover and gain a warm gold shadow.

gold + ghost

Request analysis How it works

<Button Variant="Primary">Request analysis</Button> <Button Variant="Outline">How it works</Button>

When to use each: gold for the one action you want on the page. Ghost for the alternate path (learn more, secondary CTA). Never two golds side by side, never a ghost without a gold on the same screen.

06 · Eyebrow pattern

The section opener.

Every section on the site opens with the same three-part pattern: a gold eyebrow label, a bold heading (usually with a gold-accented phrase), and a body-tinted lede paragraph. This is the visual rhythm of the whole site.

.eyebrow · .h2 · .lede

How it works

A clear map from where you are to investor-ready.

Five phases. No theatre. Surgical work, delivered when it moves the needle. Guided by founder operators who have scaled companies before.

<div class="eyebrow">How it works</div> <h2 class="h2">A clear map from <em>where you are</em> to investor-ready.</h2> <p class="lede">Five phases. No theatre.</p>

The gold em rule. Wrap one phrase per heading in <em>. It renders in gold and pulls the eye to the key word. Never wrap the whole heading, never wrap more than one phrase. If nothing feels right to accent, drop the em entirely.

07 · Cards

Card variants.

Four card patterns cover ~90% of the site: team cards, process cells (the how-it-works steps), the case card (pull-quote with sidebar), and the CTA block that closes every page.

Team card

.team-card

Siavash Habibi

Co-founder & CEO

Founder operator focused on helping ambitious teams close the company-readiness gaps investors see first.

Ulrika Tornerefelt

Co-founder & Chair

Experienced scaleup leader bringing governance, commercial, and board-level perspective to every engagement.

Recruit card

.team-card-recruit

Want to work with us?

Get in touch

Used to balance the team grid when the member count is odd. Photo slot becomes a dashed-gold + to distinguish from a real person. Chevron becomes a right-arrow to signal action instead of expand.

Process cell

.proc-cell

Step 01

Apply

Tell us where you are, where you're going, and the round you're about to run.

Deliverable: Reply from a real analyst

Step 02

Diagnose

A small expert squad benchmarks you against what a Series A partner needs to see.

Deliverable: Baseline and a prioritised plan

Case card with pull quote

.case-card + .case-pull

Our story · so far

Europe has a readiness problem.

We've met countless founders who fail on criteria they didn't know they were being judged on.

Capital follows readiness.

"When I met the team behind Team ScaleUp, it became clear they are addressing a real gap in the ecosystem."

Peter DahlgrenFounder and CEO, Dahlgren Capital

Footer CTA

.pcta

Get started

Scaling is a team sport.

We're looking for partners, sponsors, and investors to back the European scaleup ecosystem with us.

Get in touch

Stat cells

.problem-h · .ph-cell

seeded companies reach Series A: 1 in 5; Are you sure you're going to be one of them?
between rounds: 18–24mo; Enough time to get ready. Or to burn through runway.

08 · Forms

Multi-step, opinionated inputs.

Both the founder and investor pages use the same 3-step form shell. Inputs are borderless-bottom, gold-accented on focus. File inputs use a custom label pattern. Progress and step navigation live in a left rail on desktop, above the fields on mobile.

.finp · .fselect · .ftarea · .ffile

Company

Current funding stage

What are you building?

Pitch deck (optional · PDF, max 50MB)

Choose PDF No file selected

Field label pattern: primary label in white, secondary hint in a smaller dim span inside the same label. Never use placeholder text as a substitute for a label — placeholders disappear on focus and are lost to screen readers.

09 · Chatbot

FAB + invite pill + slide-in panel.

Circular gold action button pinned bottom-right, with a navy pill to its left inviting a click. Panel slides in from the right, 400px wide on desktop, full-width on mobile. Powered by a Claude Haiku 4.5 edge function.

.chat-fab + .chat-fab-label

Questions? Ask our chatbot

Voice guardrails. The chatbot's answers follow a strict set of never-do rules baked into its system prompt — no partner-fund names, no equity terms, no service-time promises, no bullet points, no em-dashes. See DESIGN.md § Voice for the full list.

10 · Decorative motifs

Arcs, dashes, dots.

Three signature decorative elements repeat across the site. They sit at low opacity behind content and reinforce the celestial / orbital metaphor of the rocket-and-moon logomark. No paper texture in production yet — it's on the experimental list.

Hero arcs

.hero-arcs

Dashed divider

border-top: 1px dashed var(--border)

Text after a dashed divider. Used between logical blocks inside cards, especially to separate attribution from a quote.

Dot pulse

.hero-eyebrow .dot

The third issue · company readiness

Paper texture Experimental

Paper-textured backgrounds are on the roadmap. The brand PDF describes them as a signature element (page 8), but they are not yet implemented on the site. Reserved for future exploration: hero backgrounds, quote cards, print collateral. When we implement, aim for a very low-opacity overlay (5–10%) so it reads as tactile grain rather than a busy background.

11 · Voice

Direct. Informed. Encouraging. Human.

Full editorial rules live in DESIGN.md. This section is the summary card — the four pillars, the do/don't, and the brand vocabulary that must always be capitalised the same way.

Sentence case in all headlines and eyebrows
Founder-first, precise language
Use “you” and “we” — direct address
Evidence-backed, operator voice
Short sentences. No filler.
Oxford commas: partners, sponsors, and investors

Don't

Em-dashes (—) or double hyphens (--)
ALL CAPS or Title Case Every Word in source text
Consultant jargon or corporate buzzwords
Passive voice or nominalisations
Third-person copy about ourselves
Service-time promises (with one narrow exception)

Brand vocabulary — always spelled this way

Team ScaleUp (capital U — not "Team Scaleup" or "TeamScaleUp") the third issue (lowercase — the framing for "company readiness") Signal (program name — 3–4 months, 350k SEK) Velocity (program name — 8–9 months, 450k SEK) Series A (capital S — not "series A" or "series a") Nordic (adjective, capitalised) Pyyne (partner name — not "Pine")