Brand

Assets and rules for representing Inkling Labs. Download the files below rather than recreating them.

The mark

An ink drop in a rounded square. The light version has a white drop with a teal gleam; the dark version has an ink drop with a white gleam. Use whichever matches the background.

LightInkling Labs mark, light
SVGPNG
DarkInkling Labs mark, dark
SVGPNG

The lockup

The mark with the wordmark. The wordmark is set in Timeburner Bold and is outlined in these files, so no font is needed to use them. Do not reset the wordmark in another typeface.

LightInkling Labs lockup, light
SVGPNG
DarkInkling Labs lockup, dark
SVGPNG

Spacing

Proportions are defined by the square, so they hold at any size.

Mark to wordmark gapOne fifth of the square's height, measured from the square's right edge to the first letter. 48px square: 10px gap. 24px square: 5px. 96px square: 19px.
Wordmark sizeType size is 34px at a 48px square (0.7 of the square height), vertically centered.
Clear spaceKeep at least half the square's height free on every side of the mark or lockup.
Minimum sizeMark no smaller than 16px. Lockup no narrower than 120px.
Corner radiusThe square's radius is one quarter of its size (6 on a 24 grid).

Colors

Teal is the brand color. Everything else is support.

Teal#219EBCPrimary accent on light backgrounds. The mark, links, highlights.
Teal Bright#4FC2E0Primary accent on dark backgrounds.
Ink#0E0F14Dark mode background. The drop in the dark mark.
Paper#EFEEEALight mode background.
Text#16171BBody text on light.
Text Light#ECECF1Body text on dark.
Soft#5F6470Secondary text on light.
Soft Light#9498A5Secondary text on dark.
Gold#E8B04BSecondary accent. Icons on dark tiles.
Plum#3B2A55Secondary surface. Open-source tile, avatars.
Cream#F2E9D4Text and marks on dark tile art.

Typography

Two typefaces. One is reserved for the name.

Inkling Labs

Timeburner Bold

Used only for the wordmark. Never for headings, body text, or product names. Free for commercial use.

TTF
We turn inklings into reality.

Poppins

Everything else: headings, navigation, body, UI. Weights 400 through 800. Open Font License.

Google Fonts
UsePoppins weightSize
Hero headline500, accent word 80036 to 56px
Section headings70028px
Page titles70034 to 46px
Navigation50022px
Sublines and ledes40019 to 22px
Body40016 to 17px
Labels, buttons, pills60013 to 16px
Tile titles70030 to 40px

Credits

Interface icons across the site are from Font Awesome Free, used under the CC BY 4.0 license. Poppins is published under the SIL Open Font License and served from this site.

Layout

The numbers the site is built on, for anything that needs to match it.

Content width1120px max, 28px side padding
Grid gap18px
Tile radius26px large, 20px small, 99px pills
Section spacing56px to 110px between major sections
Hairlines1px, color Soft at low contrast