Outfit
Logo and headings · logo 400 · headings 450
Outfit-RegularOutfit-MediumOutfit-SemiBoldOutfit-VariableLicenseGoogle Fonts (opens in a new tab)
the robot works · Version 1.2.1
Brand kit.
Logos, fonts, colors and Goose artwork, with the rules for using them. Download what you need, or everything at once.
Always lowercase: the robot works, even at the start of a sentence.
The same guide is available as plain Markdown, with a link to every file, for scripts and AI tools.
The logo
A stacked, lowercase wordmark in Outfit Regular, with the orange beak after “the”. Use the SVG files: the letters are outlined, so they look right without the font installed.
Clear space
Keep empty space on every side at least as tall as the lowercase “o”. The card files already include it.
Minimum size
PNG copies come at 600, 1200 and 2400 px wide; the app icon from 32 to 1024 px.
One-line lockup
For short, wide spaces only. The stacked wordmark stays the default.
Use it when the space is less than about one-third as tall as it is wide:
- slim web and app headers
- email signatures and newsletter footers
- slide footers and video lower thirds
- narrow labels, badges and merch strips
Same words and clear space as the stacked mark; the beak moves to the end, a word space after “works”. Minimum 120 px wide.
Keep it intact
Always lowercase: the robot works, even at the start of a sentence.
Don’t retype it or swap the font.
Don’t restack the words.
Don’t stretch or squash it.
Don’t rotate it.
Don’t recolor the beak.
Don’t add shadows or effects.
Ivory, ink and a little orange.
Three core colors from the brand reference. Everything else supports them, and orange stays small: the beak, one warm headline word and the main call to action.
Core
- Ivory
#faf6f0 - Ink
#1c1917 - Orange
#ff914d
Orange family
- Accessible
#9a3e0b - Heading
#c65c1c - Hover
#ffb88c - Soft
#f9e6d5
Supporting
- White
#ffffff - Mist blue
#e1eaf2 - Deep blue
#315571 - Sage
#e2ebdf - Pine
#355544 - Cloud
#f0f3f5 - Blue hover
#cbdce9 - Illustration
#4b2418
Neutrals
- Surface
#f2e8dd - Text secondary
#625a52 - Control border
#786e64 - Divider
#c9beb3
| Sample | Text on background | Ratio | Use for |
|---|---|---|---|
| Ink on ivory | 16.2 | All text | |
| Ink on orange | 7.8 | All text | |
| Orange on ivory | 2.1 | Not for text | |
| Orange accessible on ivory | 6.4 | All text | |
| Orange heading on ivory | 3.9 | Large text only | |
| Ink on orange soft | 14.4 | All text | |
| Text secondary on ivory | 6.3 | All text | |
| Deep blue on ivory | 7.3 | All text | |
| Pine on ivory | 7.7 | All text | |
| Ivory on ink | 16.2 | All text |
Two typefaces, one voice.
Outfit carries the logo and headings. DM Sans carries reading text, interface and labels. Both are free under the SIL Open Font License, including for commercial work.
DM Sans
Reading text, interface and labels · body 400 · medium 550 · labels 650
DMSans-RegularDMSans-MediumDMSans-SemiBoldDMSans-VariableLicenseGoogle Fonts (opens in a new tab)
| Role | Font | Weight | Size | Line height |
|---|---|---|---|---|
| Display (page title) | Outfit | 450 | 56–116 px | 1.06 |
| Heading | Outfit | 450 | 40–76 px | 1.06 |
| Small heading | Outfit | 450 | 26 px | 1.2 |
| Lead paragraph | DM Sans | 400 | 20 px | 1.55 |
| Body | DM Sans | 400 | 17 px | 1.65 |
| Label | DM Sans | 650 | 14 px | 1.5 |
| Caption | DM Sans | 400 | 14 px | 1.5 |
Tight headings
Outfit headings track at about −3.5%. Body text is never tracked.
One warm word
A headline may end on one word in heading orange, at 24 px and up: “Goose.”, “life.”, “home.”
Installing
Static Regular, Medium and SemiBold files work in any app; the variable files suit Figma. Install one set, not both. The files cover English and Western European text; for other scripts, use Google Fonts.
Goose, and the brand at work.
Goose has no separate logo. It’s presented through the product render and the warm “Goose.” headline.
- Place the cutout directly on ivory or white; the file has a transparent background.
- Keep the robot’s own colors. Don’t tint the scarf or body to the palette.
- Give each image or film one main placement; don’t repeat the hero render across pages.
goose-cutout.png · 1536 × 1024 · transparent
The brand guidelines PDF shows the kit applied: social posts, a business card, a newsletter header, slides, video end cards and a print footer.
Web address
How to write and place www.therobotworks.ai.
- All lowercase, like the wordmark. Never TheRobotWorks.ai.
- With “www.” in print, signage, video and anywhere people type it. Drop “https://”. In tight interface text, therobotworks.ai is fine.
- DM Sans 550, ink on light or ivory on dark. Not Outfit, not orange.
- Outside the logo’s clear space, below or beside it, never inside the lockup.
- On screen, link it to https://www.therobotworks.ai.
www.therobotworks.ai
www.therobotworks.aiThe address sits centered under the stacked logo, just outside its clear space. Use the full logo whenever the space is roughly square or taller; switch to the one-line lockup only for short, wide spaces.
Goose drawings
The line-art Goose that appears across therobotworks.ai, and more drawings ready for posts and social.
One brown line
Even-weight rounded strokes in the illustration color, #4b2418. No shading or gradients.
Orange is the spark
Orange fills only the beak and small accents: hearts, sparkles, a block or a ball.
Same Goose every time
Dotted hood, visor face, neckerchief, long neck and round base.
Transparent, on light
Place on ivory, white or orange soft. Never on ink: the brown line disappears.
On the site now
6 drawings used across the public pages.
More drawings
7 drawings ready for blog posts, social and other uses.
Questions?
Need a format that isn’t here, or not sure how to use something? Email info@therobotworks.ai.
