# Brand assets and guidelines

Download the startupkit wordmark, mark and app icon, copy the exact colours and type settings, and see how the brand is used. Also available as Markdown for agents.

Download the wordmark, copy a hex, and change nothing. Files, colour values and type settings for anyone putting Kit on a page: a partner's blog post, a conference slide, a press piece, an agent's prompt.

## Wordmark and mark

Two files carry the whole identity: the lowercase wordmark and the plum mark. Every download here is the shipped path, untouched.

### Wordmark, ink

On light surfaces. Lowercase, "startup" regular and "kit" bold, one path.

- SVG transparent: https://startupkit.app/assets/brand/startupkit-wordmark-ink-454577a0.svg
- PNG transparent: https://startupkit.app/assets/brand/startupkit-wordmark-ink-ffa3d255.png
- PNG on white: https://startupkit.app/assets/brand/startupkit-wordmark-ink-on-white-d8cc7a7f.png

### Wordmark, white

On dark surfaces and photographs. Same path, white fill.

- SVG transparent: https://startupkit.app/assets/brand/startupkit-wordmark-white-14002263.svg
- PNG transparent: https://startupkit.app/assets/brand/startupkit-wordmark-white-92cc5bff.png
- PNG on ink: https://startupkit.app/assets/brand/startupkit-wordmark-white-on-ink-4b3b0d48.png

### Mark

The only flat vector of the mark: #fafafc letters on plum. Use it where the wordmark would be too small.

- SVG: https://startupkit.app/assets/brand/startupkit-mark-2eff5e07.svg
- PNG: https://startupkit.app/assets/brand/startupkit-mark-95ae2aac.png

### App icon

The favicon and home-screen icon. Raster only; use it for app listings, not print.

- PNG: https://startupkit.app/assets/brand/startupkit-app-icon-040ff0d0.png

### Avatar

The mark padded so the letters survive a circular crop. For profile pictures.

- PNG: https://startupkit.app/assets/brand/startupkit-avatar-dd9d3658.png

### Download everything

Every file on this page in one zip. https://startupkit.app/assets/brand/startupkit-brand-assets-6ba93399.zip

### Keep it recognizable

- Keep clear space of half the wordmark's height on every side.
- Minimum size: 96 px wide on screen, 24 mm in print. Below that, use the mark.
- Ink on light, white on dark. Nothing else.
- Never: Recolour it
- Never: Stretch or rotate it
- Never: Outline it or add a shadow, glow or gradient
- Never: Re-typeset it in Inter or any other font
- Never: Put it in a box that is not the mark's own square

## Colour

Seven roles cover every screen. Nothing on the site is more saturated than the plum mark and the two pen colours.

| Light mode | Hex | Dark mode | Role |
|---|---|---|---|
| Ink | `#0c090c` | `#f8f6f8` | Text, the primary button, the wordmark on light |
| Paper | `#fafafa` | `#0c090c` | Page ground |
| Mist | `#f3f1f3` | `#1d161e` | Nav and raised surfaces |
| Muted | `#594c5b` | `#a89ea9` | Secondary text, the hero's second line |
| Plum | `#3b0f46` | `#3b0f46` | The mark, avatar and platform email accents |
| Marker | `#fde68a` | `#f7b93b` | Highlight behind a headline's payoff |
| Pen | `#b45309` | `#f7b93b` | Hand-drawn underline under an action |

### The mauve ramp

Every grey on the site is a mauve. Step 50 is the page, 100 the nav and surfaces, 600 secondary text, 950 ink.

- mauve-50: `#fafafa`
- mauve-100: `#f3f1f3`
- mauve-200: `#e7e4e7`
- mauve-300: `#d7d0d7`
- mauve-400: `#a89ea9`
- mauve-500: `#79697b`
- mauve-600: `#594c5b`
- mauve-700: `#463947`
- mauve-800: `#2a212c`
- mauve-900: `#1d161e`
- mauve-950: `#0c090c`

### Dark mode

The ramp flips. Paper becomes mauve 950, ink becomes #f8f6f8, and the primary button fills with mauve 300 under an ink label. Marker and pen both turn #f7b93b.

### Legacy indigo

Indigo #4f46e5 remains on merch in older photos. It predates this palette and is not a current brand colour. Do not sample it from a photograph.

## Type

Two open-source faces. Fraunces for the one line that has to feel written, Inter for everything anyone has to read quickly.

### Fraunces (100–900 variable, optical size 9–144)

Display. The hero headline and section titles, weight 480, optical size 144, WONK on.

```css
font-family: "Fraunces", ui-serif, Georgia, serif;
font-weight: 480;
font-variation-settings: "SOFT" 0, "WONK" 1, "opsz" 144;
line-height: 1.08;
letter-spacing: -0.005em;
```

- GitHub: https://github.com/undercasetype/Fraunces
- Google Fonts: https://fonts.google.com/specimen/Fraunces

### Inter (100–900 variable)

Text and interface. Body 400, buttons and labels 500, collage headlines 600 at −0.03em.

```css
font-family: "InterVariable", "Inter", ui-sans-serif, system-ui, sans-serif;
font-feature-settings: "liga", "cv02", "cv03", "cv04", "cv11";
font-weight: 400;
```

- rsms.me/inter: https://rsms.me/inter/

Code and hex values use the system monospace stack. `ui-monospace, SFMono-Regular, Menlo, Consolas, monospace`

Both fonts are SIL Open Font License 1.1. Download them from the upstream projects; we do not redistribute the files.

## Buttons

One primary button, one shape. Ink on light surfaces, pale mauve on dark ones. The sign-up button always reads "Get started free".

- Radius: 9999px
- Padding: 12px 20px
- Type: Inter 15px / 500 / 24px
- Icon gap: 8px
- On a light surface: fill `#0c090c`, label `#ffffff`, hover `#2a212c`
- On a dark surface: fill `#d7d0d7`, label `#0c090c`, hover `#f3f1f3`

## Pen marks

The one thing only Kit does. A headline wraps its payoff in a marker highlight and each action in a hand-drawn underline. Both are drawn in CSS, so the text stays text.

```html
Jordan <em>sends a CV</em> and <em>tracks their stage</em>. Your team sees <mark>who does what next</mark>.
```

- One marker per headline, always on the outcome
- Underlines go under verbs, never under nouns
- Headlines only. Never in body copy, buttons or navigation
- Marker #fde68a, pen #b45309. Both turn #f7b93b in dark mode

## Imagery

Two kinds of picture, each with one job. Social cards are paper cut. Blog covers are photographs.

### Social cards

Paper cut on warm oatmeal paper, dusty mauve and deep plum layers, the black wordmark top left. Illustrated hands do a real task: hold a card, move a tile.

- https://startupkit.app/assets/opengraph/hiring-20ba841b.png
- https://startupkit.app/assets/opengraph/home-4cb8c4db.png
- https://startupkit.app/assets/opengraph/trust-925ce79b.png

### Blog photography

35mm editorial film, people wearing startupkit merch, warm light, the logo small and on a shirt rather than on the wall.

- https://startupkit.app/en/blog-images/founder-led-hiring-without-recruiter/cover.jpg
- https://startupkit.app/en/blog-images/hire-specialists-not-generalists-lean-teams-2026/cover.jpg

- Do: Hands in plum knit sleeves doing a real task
- Do: Oatmeal paper, dusty mauve and deep plum layers, fine grain
- Do: The black wordmark top left, nothing else written
- Don't: Decorative floating hands, or a handshake
- Don't: Invented interface text or fake screenshots
- Don't: The logo as the subject of a photo

## Voice

Five rules for anyone writing about Kit. They are the same rules the site is written by.

- **Name the artifact, not the benefit.** Point at a thing that exists. A link, a ledger row, a CSV column, a running clock.
- **Concede one true limit.** One sentence a competitor would refuse to publish buys credibility for every other line.
- **Outsider first.** Start with the person who has no login. The candidate, the researcher, the trainee, the auditor.
- **No category nouns.** No platform, solution, seamless, streamline, robust, leverage, end-to-end, powerful, AI-powered.
- **One sentence, one job.** Cut the clause that restates the one before it. Sentence case, always.

### Naming

- Write: Kit, in sentences
- Write: startupkit, where one word must find us (startupkit.app, @StartupKit_app)
- Write: startupkit, lowercase, in the wordmark
- Never: Startup Kit
- Never: KIT
- Never: Kit.app
- Never: StartupKit in a sentence

## For agents

The same page as Markdown, every hex value and font setting included. Point an agent at it instead of describing the brand by hand. https://startupkit.app/en/brand/llms.txt answers the same file.

The startupkit wordmark and mark identify Kit. Use them to refer to Kit, not to suggest Kit endorses your product.

[Brand](https://startupkit.app/en/brand)