Brand assets
Logos, the app icon, colors and type for writing about ThreadGrid. Download the whole kit, or pick single files below.
ZIP SVG and PNG logos App icon Color tokens Share images
Logo
A woven hash and the ThreadGrid wordmark, as vector SVG and transparent PNG. The horizontal lockup is the primary logo: use the full-color version on light backgrounds and the reversed one on dark.
Full color
One color
The weave survives as small gaps where a ribbon passes underneath.
More versions
SVG files for special cases.
App icon
The mark at 75% of a Midnight tile, with a faint blue glow and a thin blue-to-violet rim. Its corners are continuous, with a 22.5% radius, as on Apple platforms.
Files
Where the logo would be smaller than its minimum size, use the mark alone or the app icon, as favicons do.
Share images
Link-preview cards with the logo and tagline, for article headers, posts and slides.
Dark
1200 × 630
Light
1200 × 630
Color
Each ribbon of the mark runs from navy shadow into blue and lavender light, and the palette follows it. Click a swatch to copy its hex code.
Design tokens
Core palette
The same colors as Tailwind's defaults, so its ramps work as tints and shades.
Supporting colors
Gradients
Text on color
White text goes on Action Blue
Royal Blue is the brand's blue, but white body text on it falls short. For buttons and links with normal-size text, use Action Blue, and keep Royal Blue for fills, icons, large type and gradients.
- White on Action Blue5.17:1AA
- White on Royal Blue3.68:1Large text and UI only
- Navy on Pale14.49:1AAA
- Navy on Light Blue9.90:1AAA
- Light Blue on Midnight10.62:1AAA
- Lavender on Midnight7.25:1AAA
Typography
Inter, free under the SIL Open Font License. Its Display optical size is for the wordmark and large headlines; text sizes use the regular optical size.
Typeface
Inter
Display and Text optical sizes
Display · Bold
Build a company with an AI team.
Plan. Build. Verify. Ship.
Text · Regular
A Lead plans the work, engineers build it in parallel, QA and a code reviewer verify it, and it ships.
Weights
- Bold700 · Headlines
- SemiBold600 · Subheads and buttons
- Medium500 · UI labels
- Regular400 · Body text
Tracking
- Display sizes
- −0.02em
- Body text
- −0.011em
The wordmark is outlined Inter Display Bold. Always use the logo files, and never retype the name as a logo in a live font.
Usage
Use the files as they are, give the logo room, and keep it big enough to read.
Clear space
Keep at least X free on every side, where X is the width of one ribbon: about 23% of the mark's height. The files are cropped tight to the artwork, so add it when you place them.
Minimum size
80 px wide for the horizontal lockup, and 16 px for the mark (24 px or more preferred). At smaller sizes, use the mark alone or the app icon.
Don't
Don't place text or other elements inside the clear space.
Don't crop, rotate, stretch or re-weave the mark. The over/under order is fixed.
Don't recolor it, or add strokes, shadows or glows beyond the supplied versions.
Don't put the full-color mark on busy imagery without a calm area behind it.
Writing about ThreadGrid?
For interviews, product screenshots or anything that isn't in the kit, email [email protected].