Brand guidelines

Code & State

Updated 3 September 2026164 files6.5 MBManropebrandkit.codeandstate.com ↗
Lockup PNG1200px, on its groundMark PNG512px avatar tileFaviconICO, 16 to 64pxApp icon1024px, opaque

Using the logo

Clear space, the smallest it may go, and the six things that break it. Each pair below is the real lockup, correct on the left and wrong on the right.

X X
Clear space Keep the height of the mark clear on all four sides. Nothing crosses that line, including the edge of the page.
150px minimum for the lockup
28px for the mark alone. Below that, use the mark, never the lockup
Minimum size Shown at real size. The wordmark stops being legible before the mark does.
Correct: full opacity
Full opacity
Never fade it
Never fade itSubtlety comes from size and position. A faded mark just looks broken.
Correct: both axes together
Both axes together
Never stretch it
Never stretch itScale both axes together. Fit by height, then crop the ground.
Correct: an approved treatment
An approved treatment
Never recolour it
Never recolour itThere are four approved treatments. Recolouring makes a fifth.
Correct: flat art
Flat art
Never add effects
Never add effectsNo shadow, glow, bevel or outline. It is flat art.
Correct: on the horizontal
On the horizontal
Never rotate it
Never rotate itThe lockup sits on the horizontal, on every surface.
Correct: clear space kept
Clear space kept
Never crowd it
Never crowd itThis one breaks the clear space above. Give it room or leave it out.

Colour

Click a value to copy it. Every swatch carries both the hex and the rgb triple, because half the surfaces here want one and half want the other.

Brand colour

primary yellow
light yellow

Neutrals

pure white
cloudy gray
heavy carbon
ink

Venture colours, one arm each

talentdb blue
solidstate green
education purple
orange

Typography

Manrope throughout: Semibold for headings, Regular for body. One typeface, so hierarchy comes from size and weight rather than a second family. Sizes and tracking below are the brand guide's type hierarchy, unchanged.

Aa ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 & @ % — “ ”
ManropeDisplay and body · variable 200–800 · SIL Open Font License 1.1 Everything. Semibold for headings, Regular for body.
Download WOFF2 · 52 KBLicenceGoogle Fonts ↗Source ↗

Load them

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap">

Use them

:root {
  --font-display: 'Manrope',ui-sans-serif,system-ui,sans-serif;
  --font-body: 'Manrope',ui-sans-serif,system-ui,sans-serif;
}

The scale, at real size

Headline 1 · Manrope · 60px · 600 · -.02em

We start companies with founders.

Headline 2 · Manrope · 48px · 500 · -.02em

We start companies with founders.

Headline 3 · Manrope · 36px · 500 · -.02em

We start companies with founders.

Headline 4 · Manrope · 26px · 500 · -.03em

We start companies with founders.

Subtitle · Manrope · 20px · 400 · .02em

We start companies with founders.

Body 1 · Manrope · 20px · 400 · .02em

We start companies with founders.

Overline · Manrope · 14px · 500 · .02em

We start companies with founders.

Button · Manrope · 16px · 400 · .02em

We start companies with founders.

Components

Built from the tokens above. Click to copy the CSS.

Primary
Secondary
PaperThe page background, html and body
WindowThe System 6 card: 2px border, hard offset shadow, no radius
Paper deepButton hover fill

Applications

The brand on the surfaces people meet it on. Shaded areas are where each platform stamps its own avatar or crops: measured against live pages by gtm/social-profile-assets, not taken from a published guide. The downloads are the clean files without the shading.

linkedin page cover, 4200 by 700 pixels, with the platform’s keep-empty regions shaded
linkedin page cover 4200 × 700 · Logo tile eats x0-1750 below y250, and grows to 40% of the width at a 360px viewportDownload PNG
x header, 1500 by 500 pixels, with the platform’s keep-empty regions shaded
x header 1500 × 500 · Avatar union is x42-546, y330-500; mobile web keeps only x352-1148Download PNG
youtube banner, 2560 by 1440 pixels, with the platform’s keep-empty regions shaded
youtube banner 2560 × 1440 · Only x507-2053, y508-931 is safe on every deviceDownload PNG
og card, 1200 by 630 pixels, with the platform’s keep-empty regions shaded
og card 1200 × 630 · Open Graph, so this is the Slack and WhatsApp unfurl too. Keep the bottom 80px clear and stay under 600KB, which is WhatsApp's limitDownload PNG
github social preview, 1280 by 640 pixels, with the platform’s keep-empty regions shaded
github social preview 1280 × 640 · Repo Settings, Social preview. GitHub rejects anything over 1MBDownload PNG
play store feature graphic, 1024 by 500 pixels, with the platform’s keep-empty regions shaded
play store feature graphic 1024 × 500 · Play Console header, 1MB ceiling. The store draws the app title across the top strip, so nothing of ours goes thereDownload PNG
slide title, 1920 by 1080 pixels, with the platform’s keep-empty regions shaded
slide title 1920 × 1080 · Deck opener at 16:9Download PNG
slide content, 1920 by 1080 pixels, with the platform’s keep-empty regions shaded
slide content 1920 × 1080 · Body slide. The lockup sits small and bottom-left so it never competes with the contentDownload PNG
video call background, 1920 by 1080 pixels, with the platform’s keep-empty regions shaded
video call background 1920 × 1080 · Zoom, Meet and Teams. The shaded box is roughly where a head sits, so the mark goes to a bottom cornerDownload PNG
email signature, 1200 by 218 pixels, with the platform’s keep-empty regions shaded
email signature 1200 × 218 · 2x retina; scale it to 600 wide in the clientDownload PNG
document header, 2480 by 400 pixels, with the platform’s keep-empty regions shaded
document header 2480 × 400 · A4 at 300dpi, for letterhead and contractsDownload PNG

Writing the name

  • Code & State with an ampersand in prose. The logo sets it lowercase as code & state; that is the wordmark, not a licence to lowercase the name in a sentence.
  • The short code is CS: caps in a filing name, lowercase-kebab in anything a machine reads (cs-website, cs-brandkit).
  • Positioning is “a venture builder”. “One hundred companies”, “three humans” and “venture studio” are RETIRED and belong to Marbling now.
  • The logo is the yellow disc with the CS monogram, from the brand guide. The crescent mark that appeared in the website's icon.svg on 2026-09-02 is not it.

Boilerplate

The approved words. Paste them into a profile or a page as they are: a second description of the company is how a brand starts disagreeing with itself.

One-liner34 characters

Code & State is a venture builder.

The single sentence. Site hero, X bio, a tagline field.

Short description169 characters

Code & State is a venture builder. We start companies with founders and build alongside them: product, engineering and go-to-market, from nothing to a company in market.

LinkedIn tagline, a directory entry, a card.

About503 characters

Engineers and operators in the work with you, writing the code, shipping the product, finding the first customers. Not a monthly check-in and a deck of suggestions. You are the founder and you run the company. We take a minority stake, and in every deal we have done the founder has kept the majority. We have to earn it, the same way you do. Every company we start inherits the infrastructure, the playbooks and the expensive lessons of the one before it. Each one begins further ahead than the last.

LinkedIn About, an About page, a press boilerplate.

Links

Downloads

The vector masters first: regenerate from these, never hand-edit an exported PNG. Everything else is derived from them by the generators.

What is in the kit

FolderFilesSizeFormats
applications18 1.0 MBjpg, json, png
favicon5 90 KBico, png
fonts2 58 KBtxt, woff2
lockup20 2.3 MBpng
mark64 1.7 MBjpg, png
services52 1.4 MBjpg, png
vector3 82 KBsvg
Downloads work from the kit folder. Open this page from inside the folder and every link resolves to the file next to it.