Brand guidelines
The okthink brand
Our logo, colors and type, and how to use them. Everything on this page is free to download for anyone designing for okthink or writing about us.
Name
okthink is one word, all lowercase, even at the start of a sentence or in a headline. Our product is Firehose, with a capital F.
okthink
- OKthink
- OkThink
- Ok Think
- OKTHINK
- ok-think
Clear space and size
Minimum size
| Screen | 72 px wide |
|---|---|
| 18 mm wide |
Keep the pixels square
Scale the logo proportionally, never one axis alone. On screen it looks sharpest when each grid square lands on whole pixels; the PNGs are drawn that way.
Color
The brand colors are the colors of the logo. Click any value to copy it, or copy the whole palette below in the format your tool wants.
Wordmark spectrum
The primary palette. One colour per letter of okthink, running orange to blue. Use them in this order whenever they appear together.
-
Letter o
- HEX
- RGB
- HSL
- CSS
Contrast 8.4:1 on Night · 2.4:1 on Paper
-
Letter k
- HEX
- RGB
- HSL
- CSS
Contrast 6.4:1 on Night · 3.2:1 on Paper
-
Letter t
- HEX
- RGB
- HSL
- CSS
Contrast 5.0:1 on Night · 4.0:1 on Paper
-
Letter h
- HEX
- RGB
- HSL
- CSS
Contrast 4.1:1 on Night · 4.9:1 on Paper
-
Letter i
- HEX
- RGB
- HSL
- CSS
Contrast 3.5:1 on Night · 5.7:1 on Paper
-
Letter n
- HEX
- RGB
- HSL
- CSS
Contrast 5.6:1 on Night · 3.6:1 on Paper
-
Final k
- HEX
- RGB
- HSL
- CSS
Contrast 4.8:1 on Night · 4.2:1 on Paper
Grounds
The backgrounds the logo is designed for. Night is the dark ground of okthink.ai.
-
Dark background
- HEX
- RGB
- HSL
- CSS
-
Light background
- HEX
- RGB
- HSL
- CSS
Copy the whole palette
Variables and tokens are named okthink-<color>. The Adobe swatch
library imports into Illustrator, Photoshop, InDesign and Affinity.
# Wordmark spectrum
#F09040 Orange
#E07060 Coral
#C85888 Rose
#A050B0 Orchid
#7050C8 Indigo
#4890A8 Teal
#3878E8 Blue
# Grounds
#08060F Night
#FFFFFF Paper
:root {
/* Wordmark spectrum */
--okthink-orange: #F09040;
--okthink-coral: #E07060;
--okthink-rose: #C85888;
--okthink-orchid: #A050B0;
--okthink-indigo: #7050C8;
--okthink-teal: #4890A8;
--okthink-blue: #3878E8;
/* Grounds */
--okthink-night: #08060F;
--okthink-paper: #FFFFFF;
--okthink-spectrum: linear-gradient(90deg, #F09040 0%, #E07060 17%, #C85888 33%, #A050B0 50%, #7050C8 67%, #4890A8 83%, #3878E8 100%);
}
// Wordmark spectrum
$okthink-orange: #F09040;
$okthink-coral: #E07060;
$okthink-rose: #C85888;
$okthink-orchid: #A050B0;
$okthink-indigo: #7050C8;
$okthink-teal: #4890A8;
$okthink-blue: #3878E8;
// Grounds
$okthink-night: #08060F;
$okthink-paper: #FFFFFF;
$okthink-spectrum: linear-gradient(90deg, #F09040 0%, #E07060 17%, #C85888 33%, #A050B0 50%, #7050C8 67%, #4890A8 83%, #3878E8 100%);
@theme {
/* Wordmark spectrum */
--color-okthink-orange: #F09040;
--color-okthink-coral: #E07060;
--color-okthink-rose: #C85888;
--color-okthink-orchid: #A050B0;
--color-okthink-indigo: #7050C8;
--color-okthink-teal: #4890A8;
--color-okthink-blue: #3878E8;
/* Grounds */
--color-okthink-night: #08060F;
--color-okthink-paper: #FFFFFF;
}
{
"okthink": {
"spectrum": {
"orange": {
"$type": "color",
"$value": "#F09040",
"$description": "Orange: Letter o"
},
"coral": {
"$type": "color",
"$value": "#E07060",
"$description": "Coral: Letter k"
},
"rose": {
"$type": "color",
"$value": "#C85888",
"$description": "Rose: Letter t"
},
"orchid": {
"$type": "color",
"$value": "#A050B0",
"$description": "Orchid: Letter h"
},
"indigo": {
"$type": "color",
"$value": "#7050C8",
"$description": "Indigo: Letter i"
},
"teal": {
"$type": "color",
"$value": "#4890A8",
"$description": "Teal: Letter n"
},
"blue": {
"$type": "color",
"$value": "#3878E8",
"$description": "Blue: Final k"
}
},
"ground": {
"night": {
"$type": "color",
"$value": "#08060F",
"$description": "Night: Dark background"
},
"paper": {
"$type": "color",
"$value": "#FFFFFF",
"$description": "Paper: Light background"
}
}
}
}
# Wordmark spectrum
rgb(240, 144, 64) Orange
rgb(224, 112, 96) Coral
rgb(200, 88, 136) Rose
rgb(160, 80, 176) Orchid
rgb(112, 80, 200) Indigo
rgb(72, 144, 168) Teal
rgb(56, 120, 232) Blue
# Grounds
rgb(8, 6, 15) Night
rgb(255, 255, 255) Paper
# Wordmark spectrum
hsl(27, 85%, 60%) Orange
hsl(8, 67%, 63%) Coral
hsl(334, 50%, 56%) Rose
hsl(290, 38%, 50%) Orchid
hsl(256, 52%, 55%) Indigo
hsl(195, 40%, 47%) Teal
hsl(218, 79%, 56%) Blue
# Grounds
hsl(253, 43%, 4%) Night
hsl(0, 0%, 100%) Paper
Values are defined in sRGB. No CMYK or Pantone matches are set yet: convert with your printer's profile and check a proof.
Typography
Three open-source families, all free from Google Fonts. The wordmark is drawn, not typeset, so no font stands in for it.
-
Space Grotesk
Headings and interface
Run every agent from one place.
Get Space Grotesk -
Spectral
Display and editorial accents
Design, code and product are one game.
Get Spectral -
JetBrains Mono
Code, labels and data
git commit -m "ship it"
Get JetBrains Mono
Usage
Use the files as they are. Pick the color logo on Night or Paper, white on photos and saturated grounds, and black where only one ink is available.
-
Do Color logo on Night
-
Do Color logo on Paper
-
Do White logo on imagery
-
Don't Stretch, squash or skew it
-
Don't Rotate it
-
Don't Recolor it or reorder the spectrum
-
Don't Add shadows, glows or outlines
-
Don't Mirror it or rearrange the letters
-
Don't Set the color logo on a clashing or busy ground
-
Don't Soften or blur the pixels
-
Don't Retype the wordmark in a font
Ownership
The okthink name and logo are owned by mkrm inc.
You may use these assets to refer to okthink and its products, for example in articles, event listings and integrations. Please don't use them in a way that suggests we sponsor or endorse you, or make them part of your own product, company or domain name.
Questions, or need a format that isn't here? Write to info@okthink.ai.