Our design
system

See one we built: ours. This is the same kind of kit we build for clients, made for our own brand: colors that work in light and dark, a full set of type sizes, our icons, our pattern and our mascot. Yours holds your brand the same way.

Speed, the Speed Styles cheetah, in a maroon race suit and black sunglasses, waving

Try
Speed.

Put Speed to work in your own AI tool.

Say what Speed should do. We write the prompt, with his full look and links to his pictures. You paste it into ChatGPT, Claude or Gemini.

  1. Pick a background
  2. Copy it and paste it into ChatGPT

    Open ChatGPT

Paste this into ChatGPT, Claude, or Gemini

Make an image of Speed, the Speed Styles mascot.

WHAT SPEED IS DOING
Wave from the pit wall while a wall of screens shows on-brand ads.

WHO SPEED IS
Speed is a golden cheetah mascot: quick, confident and grinning. Keep his exact look in every image.
- Fur and face: golden cheetah fur with solid black spots, a white muzzle, dark round ears and black brows. A spotted tail with a dark tip.
- Suit: a deep maroon quilted race suit (#551C1C) with racing red (#FF0000) side and shoulder panels, thin signal yellow (#EDED24) piping and a signal yellow ribbed collar. The red and yellow S patch sits on his left chest.
- Sunglasses: black wraparound sunglasses with two white highlight bars on each lens. Always on.
- Gloves: white four-finger gloves with maroon cuffs.
- Boots: maroon race boots with red and yellow trim.
- Proportions: a cartoon mascot with an enlarged head.
- Expression: happy. Match the expression reference below. His feelings show through his brows, ears and mouth, never through the sunglasses.

REFERENCE IMAGES
Attach these images to your chat, or fetch them from these links, before you start:
- Master pose: https://speed.style/assets/mascot/speed-master.webp
- Front: https://speed.style/assets/mascot/speed-front.webp
- Back: https://speed.style/assets/mascot/speed-back.webp
- Left side: https://speed.style/assets/mascot/speed-left.webp
- Right side: https://speed.style/assets/mascot/speed-right.webp
- Expression (happy): https://speed.style/assets/mascot/speed-expression-happy.webp
- S mark, for the patch on his chest: https://speed.style/assets/logos/speedstyles-mark-red-yellow.svg
The full mascot specs: https://speed.style/design-system#mascot

BACKGROUND: PIT GARAGE SCENE
Speed's pit garage. A dark maroon (#3D0C0C) and near-black (#220404) garage with racing red (#FF0000) and signal yellow (#EDED24) light trails streaking through it, warm overhead lights and a glossy floor that catches the color.
For the look of the garage and the light, see https://speed.style/assets/scenes/scene-pigeon-new-way.webp (match the background only).
Keep the area right around Speed calm and darker, so he stands out from the scene.

RULES
- Never change his colors, his costume or his proportions.
- Never remove or change his sunglasses.
- No neon and no glow.
- Show his full figure, or crop at a clean edge like the waist. Never crop at his face.
- No text over him. He always has his own area.
- Stay in the brand colors: racing red #FF0000, signal yellow #EDED24, maroon #551C1C and #3D0C0C, and ivory #FFFFF0.
Show full promptShow less
Speed, the Speed Styles cheetah, in his maroon race suit and black sunglasses

Six
themes.

Every theme in light and dark.

Every section of our site picks one of six color themes, and each one has a light and a dark version. Every text color is easy to read on its background. The site follows your device’s light or dark setting.

Neutral Primary · lightSpeedDesign at super speeds

Every logo, palette and layout is hand tuned on an AI powered system.

Get started
Neutral Secondary · lightSpeedDesign at super speeds

Every logo, palette and layout is hand tuned on an AI powered system.

Get started
Accent Primary · lightSpeedDesign at super speeds

Every logo, palette and layout is hand tuned on an AI powered system.

Get started
Accent Secondary · lightSpeedDesign at super speeds

Every logo, palette and layout is hand tuned on an AI powered system.

Get started
Dark Secondary · lightSpeedDesign at super speeds

Every logo, palette and layout is hand tuned on an AI powered system.

Get started
Dark Primary · lightSpeedDesign at super speeds

Every logo, palette and layout is hand tuned on an AI powered system.

Get started
Neutral Primary · darkSpeedDesign at super speeds

Every logo, palette and layout is hand tuned on an AI powered system.

Get started
Neutral Secondary · darkSpeedDesign at super speeds

Every logo, palette and layout is hand tuned on an AI powered system.

Get started
Accent Primary · darkSpeedDesign at super speeds

Every logo, palette and layout is hand tuned on an AI powered system.

Get started
Accent Secondary · darkSpeedDesign at super speeds

Every logo, palette and layout is hand tuned on an AI powered system.

Get started
Dark Secondary · darkSpeedDesign at super speeds

Every logo, palette and layout is hand tuned on an AI powered system.

Get started
Dark Primary · darkSpeedDesign at super speeds

Every logo, palette and layout is hand tuned on an AI powered system.

Get started

Type
ramp.

A type size for every job.

Stretch Pro makes the one big statement in a section. Unbounded Bold sets headlines and titles. Geist does the reading and the labels. Nothing on our site uses a size that is not on this list.

Display XL · Stretch Pro · 128px

Go fast

Display L · Stretch Pro · 96px

Display

Display M · Stretch Pro · 64px

Pit stop

Display S · Stretch Pro · 40px

Lap time

Headline XL · Unbounded Bold · 64px

On brand, every time

Headline L · Unbounded Bold · 48px

Design at super speeds

Headline M · Unbounded Bold · 36px

Where does your brand look off?

Headline S · Unbounded Bold · 28px

With Speed Styles: ask once

Title L · Unbounded Bold · 24px

Your logo, done right

Title M · Unbounded Bold · 20px

Do I need to be technical?

Body / Lead · Geist · 36px

Look like the business you are.

Body / Large · Geist · 24px

We put your logo, colors, fonts and voice in one place your whole team works from.

Body / Medium · Geist · 18px

Customers judge you on every page, email and ad. When each one looks a little different, you look smaller than you are.

Body / Regular · Geist · 16px

Every version of your logo, which one goes where, and files anyone can download.

Body / Compact · Geist · 14px

Typical timings from our own launches.

Body / Small · Geist · 12px

Captions and fine print.

Body / Tiny · Geist · 10px

Legal lines only.

Label · Geist Bold · 16px

Your website

Label / Small · Geist Bold · 14px

Step 1

Action · Geist Bold · 24px
Secondary CTAPrimary CTA

Chrome
icons.

Real 3D chrome, on every theme.

Our icons are rendered in 3D chrome and always sit on their own dark tile, so they shine the same way on every color theme. Small controls, like the menu button, stay simple.

Websites
Landing pages
Email and mobile
Social and ads
Reach
Logo
Color and art
Photos
Video
Print
AI
Audit and results
Access

Ready
templates.

Posts, thumbnails, decks and cards, already on brand.

Every template is built from the same themes, type and flag as this site, so a post, a video thumbnail, a pitch deck and the card in your pocket all look like one business.

Slow and steady loses the race.

Social postsSquare, portrait and story posts for Instagram, Facebook and LinkedIn.

Get up to speed.

Speed grinning with excitementSpeed Styles
YouTube thumbnailsOne big line and Speed, readable at phone size, one treatment per series.

Your brand, AI ready.

One idea per slide, in your fonts and colors.

03
Slide decksTitle, section and content slides for pitches, workshops and reviews.
Speed Styles
Your NameYour title[email protected]
Business cardsFront and back in each theme, with the contact lines sized to read.

The
flag.

From the finish line, in the bottom left corner.

A stair of squares from the finish line. It sits in the bottom left corner of a section, never behind text, and takes the color of the theme around it.

Speed, the Speed Styles cheetah, in a maroon race suit and black sunglasses, waving

Speed vs
Sloth.

Speed leads, Sloth lags.

Speed is the face of every hero and every call to action. He always stands in his own column, never under text. Sloth appears only as the contrast, doing things the slow way.

Speed’s expressions

Speed looking happy
Happy
Speed looking excited
Excited
Speed looking neutral
Neutral
Speed looking confused
Confused
Speed looking mad
Mad
Speed looking sad
Sad
Sloth, a brown sloth in a black 1800s coat with gold trim, a cream waistcoat and cravat, and a black and gold bicorne with a cream plume

Meet Sloth

Sloth is the old way of doing things. He lives in the 1800s, so everything around him looks like a faded print.

Character
A brown sloth with a cream face, dark eye patches, a small dark nose and long curved claws. Drowsy and patient.
Costume
A black 1800s coat with gold trim and brass buttons, a cream waistcoat, a ruffled cravat, cream breeches, dark boots and a black and gold bicorne with a cream plume.
Palette
The vintage palette only. Never racing red, signal yellow or ivory around him.
  • Parchment
  • Linen
  • Ochre
  • Brass
  • Sepia
  • Oxblood
  • Sage
  • Umber
Where
Only on the old-way side of a comparison, opposite Speed: paper files on a donkey, a carrier pigeon, an hourglass. Never a hero, never alone.
  • Sloth looking happy
    Happy
  • Sloth looking neutral
    Neutral
  • Sloth looking confused
    Confused
  • Sloth looking sad
    Sad
  • Sloth looking mad
    Mad
  • Sloth looking excited
    Excited
HighlightsSpeedSloth
WhoA golden cheetah with solid black spots, a white muzzle and dark round ears.A brown sloth with a cream face, dark eye patches and long curved claws.
WearsA maroon quilted race suit with red and yellow panels, the S patch on the chest, white gloves, and black sunglasses he never takes off.A black 1800s coat with gold trim and brass buttons, a cream waistcoat, a ruffled cravat, and a black and gold bicorne with a cream plume.
PaletteThe brand: racing red, signal yellow, maroon and ivory.The vintage palette only: parchment, sepia, brass and oxblood, like a faded print. Never racing red or signal yellow.
WhereEvery hero and every call to action, always in his own column.Only on the old-way side of a comparison, opposite Speed. Never a hero, never alone.
MoodQuick, confident, grinning.Drowsy and patient, doing things the slow way.

Start your
engine.

See where your brand drifts. Free.