Media Kit — Made In Tandem

Logo

The wordmark and the sigil

The wordmark replaces the "e" in Tandem with a custom "et" ligature: a literal symbol of two things working together. We drew it by hand and it lives only in these files, so always use the supplied vectors and never re-typeset it. Each mark comes in every approved color. Pick the one that contrasts with your background.

Wordmark

Dark Indigo SVG PNG
Medium Indigo SVG PNG
Graceful Olive SVG PNG
Brash Burgundy SVG PNG
Sharpie Black SVG PNG
Forest Green SVG PNG
Ripened Red SVG PNG
Rebellious Red SVG PNG
Growing Green SVG PNG
Original Ochre SVG PNG
Website White SVG PNG
Fog Grey SVG PNG
French Grey SVG PNG
Parchment SVG PNG
Lively Lavender SVG PNG
Mature Yellow SVG PNG
Cold Indigo SVG PNG
BlackOne-color print SVG PNG

Sigil

Dark Indigo SVG PNG
Medium Indigo SVG PNG
Brash Burgundy SVG PNG
Graceful Olive SVG PNG
Sharpie Black SVG PNG
Forest Green SVG PNG
Ripened Red SVG PNG
Lively Lavender SVG PNG
Fog Grey SVG PNG
Website White SVG PNG

Keep

Clear space of at least half the logo's height on every side.
A minimum width of 20px on screen or 1 inch in print. Smaller than that, the ligature stops reading.
A variant that contrasts with its background.

Don't

Rotate, skew, stretch, or recolor it outside this palette.
Add gradients, shadows, outlines, or transparency.
Set it on busy photos or low-contrast backgrounds.
Recreate the "et" ligature or swap in a standard ampersand.

Use the sigil where the wordmark won't fit or won't read: avatars, favicons, app icons, watermarks, and anything under 100px wide. Everywhere else, use the wordmark. Default to Dark Indigo, switch to Website White on dark backgrounds, and reach for Brash Burgundy when you want the energy of a call to action.

Color

Deep indigo, warmed by olive

The palette reads as confident and human rather than corporate and cold. Use the primary group for most of everything and bring in accents only when you need energy or emphasis. Flat, solid color only: no gradients, tints, or opacity on brand colors.

Primary

These four carry the brand and show up in every major touchpoint.

Dark Indigo #001129 rgb(0, 17, 41) Primary brand color. Headers, nav, footer backgrounds.
Medium Indigo #0A2C49 rgb(10, 44, 73) Headings, subheads, secondary buttons.
Graceful Olive #6F7347 rgb(111, 115, 71) Accent. Section labels, quote marks, icons.
Brash Burgundy #8D134D rgb(141, 19, 77) Primary buttons, links, calls to action.

Neutrals

The structural backbone: text, backgrounds, and visual rhythm.

Sharpie Black #191819 rgb(25, 24, 25) Default text. Softer than pure black.
Website White #FBFBF5 rgb(251, 251, 245) Page background. Warmer than stark white.
Fog Grey #F2F2F3 rgb(242, 242, 243) Card backgrounds, alternating sections.
French Grey #E3DCD9 rgb(227, 220, 217) Borders, dividers, subtle UI.
Parchment #FFF4E6 rgb(255, 244, 230) Warm highlight backgrounds, callouts.

Accents

For emphasis, charts, and illustration. Not for large background areas.

Rebellious Red #F06553 rgb(240, 101, 83) Alerts, decorative dashes, energy.
Mature Yellow #FDBE14 rgb(253, 190, 20) Highlights, titles on dark backgrounds.
Cold Indigo #96BCBC rgb(150, 188, 188) Illustrations, subtle tints.
Growing Green #80998C rgb(128, 153, 140) Secondary illustrations.
Lively Lavender #F0E4EB rgb(240, 228, 235) CTA section backgrounds.
Forest Green #2D3F23 rgb(45, 63, 35) Dark alternative to indigo.
Original Ochre #D3AD44 rgb(211, 173, 68) Icon accents, line work.
Ripened Red #962F1E rgb(150, 47, 30) Deep accent, hover states.

Copy-paste tokens

:root {
  --dark-indigo: #001129;
  --medium-indigo: #0A2C49;
  --graceful-olive: #6F7347;
  --brash-burgundy: #8D134D;
  --sharpie-black: #191819;
  --website-white: #FBFBF5;
  --fog-grey: #F2F2F3;
  --french-grey: #E3DCD9;
  --parchment: #FFF4E6;
  --rebellious-red: #F06553;
  --mature-yellow: #FDBE14;
  --cold-indigo: #96BCBC;
  --growing-green: #80998C;
  --lively-lavender: #F0E4EB;
  --forest-green: #2D3F23;
  --original-ochre: #D3AD44;
  --ripened-red: #962F1E;
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'Space Mono', monospace;
}

Typography

The typefaces

Space Grotesk carries the headlines, Inter carries the reading, and Space Mono marks anything that does something: labels, buttons, tags. All 3 are free under the SIL Open Font License, so you can use them anywhere you use our name.

Space Grotesk Display, weights 600 and 700 Headlines, hero text, card titles. Get Space Grotesk on Google Fonts
Inter Body, weights 400 and 500 Paragraphs, descriptions, interface text. Get Inter on Google Fonts
Space Mono Mono, weights 400 and 700 Section labels, buttons, tags, metadata. The "this does something" signal. Get Space Mono on Google Fonts

Scale

Role	Face and weight	Size / line height / tracking
H1 / Display	Space Grotesk 700	48px / 1.1 / -0.02em
H2 / Section	Space Grotesk 700	32px / 1.2
H3 / Subsection	Space Grotesk 600	20px / 1.3
Body	Inter 400	16px / 1.65
Label / Tag	Space Mono 400	11 to 12px / uppercase / 0.1em
Button	Space Mono 700	13px / 0.03em

Download everything

Everything in one zip

The zip has every wordmark and sigil above as SVG and transparent PNG, plus a plain-text README with the colors, the type, and the usage rules.

Download the brand assets (ZIP)

Need something that isn't here, or want to check a use before it goes out? Email hello@madeintandem.com.

Our brand guidelines