Skip to content
Start free

Brand

The live indicator is the logo.

twelvebit is one word in lower case, set in Red Hat Display Black. The dot on the i is the Readout, the mark that shows live data in the product. This page has the files and the rules.

Download all filesSee the colours

twelvebit-brand.zip · 16 SVG and 14 PNG files · the wordmark is outlined, so no font is needed

02 · Clear space and size

Give it one x-height of room.

The unit x is the x-height of the wordmark. Keep at least 1x clear on every side of a lockup. Around the symbol alone, keep a quarter of its width clear.

xxxx

Minimum sizes

  • Horizontal 96 px wide or more · 24 mm in print
  • Stacked 64 px wide or more · 16 mm in print
  • Symbol 24 px or more
  • Below 24 px use the 16 and 32 px favicon masters

03 · Lockups

Three shapes, four colourways.

Horizontal is the default. Stacked is for square spaces. The symbol is for places where the name is already on the screen. Each one comes for dark grounds, light grounds, one colour and white.

twelvebit horizontal
HorizontalThe default lockup, on Deep Field.SVGPNGPNG @2x
twelvebit horizontal, light ground
Horizontal, light groundNight and deep coral on Daylight.SVGPNGPNG @2x
twelvebit stacked
StackedFor square spaces. The name splits into its two words.SVGPNGPNG @2x
twelvebit stacked, light ground
Stacked, light groundFor square spaces on light grounds.SVGPNGPNG @2x
twelvebit symbol
SymbolThe tittle alone. Use it only when the name is already on the screen.SVGPNGPNG @2x
twelvebit symbol, light ground
Symbol, light groundThe tittle alone on light grounds.SVGPNGPNG @2x
twelvebit one colour
One colourFor one-ink print. The unlit bits become rings.SVG
twelvebit reversed
ReversedWhite only, for single-colour dark grounds.SVG
twelvebit reversed on coral
Reversed on coralMarketing and events only. Never in the product.SVG
twelvebit app icon
App icon1024 px master. The full-bleed version is for platforms that cut their own corners.SVGPNGPNG @2x
Revenue · twelvebitFavicon at 16 pxFavicon at 32 px
Favicon16 and 32 px masters. Each bit sits on whole pixels.16 px SVG32 px SVG

04 · Do and do not

Use the files as they are.

The wordmark is artwork, not type. Use the SVG, keep its colours, and keep its shape.

Do Use full colour on Deep Field.
Do Use Night and deep coral on light grounds.
Do Use one colour when only one ink is possible.
Don’t Recolour the bits. Coral is the payment and nothing else.
Don’t Stretch, squash or skew the lockup.
Don’t Rotate or mirror the symbol. The reading has a direction.
Don’t Add glows, shadows, outlines or gradients.
TwelveBit
Don’t Retype the wordmark or change its case.
Don’t Place it on photos or busy colour without a glass plate.

05 · Colour

One colour, one meaning.

This is the Deep Field palette that the product ships. A colour means the same thing on every surface. The logo uses only Ink, Ice and Coral. Select a value to copy it. Contrast is measured against Space.

Ground and text

Space--bg

The page ground. Deep space behind the globe.

Ground
Ink--ink

Primary text and the wordmark.

18.2:1 AAA text
Muted--mut

Secondary text, labels and axis text.

6.6:1 AA text
Dim--dim

Timestamps and inactive dots.

4.9:1 AA text

Meaning

Ice--ice

Traffic and visitors. The lit bit. The primary button.

16.1:1 AAA text
Coral--coral

Revenue and payments. The coral bit in the logo. Money only.

8.1:1 AAA text
Mint--mint

Signups, goals and positive change.

13.5:1 AAA text
Sky--sky

Live state, links and the globe glow.

9.6:1 AAA text
Amber--amber

Code values and warnings. Never in the logo.

12.9:1 AAA text
Error--red

Errors only. Errors never use coral.

9.1:1 AAA text

Plans (categorical)

Plan 1--p1

Starter. Fixed order, never cycled.

6.1:1 AA text
Plan 2--p2

Pro. Also the coral bit on light grounds.

5.6:1 AA text
Plan 3--p3

Lifetime.

6.5:1 AA text

Light grounds

For docs, print, invoices and partner pages. Each meaning colour has a deeper version that passes 4.5:1 for text. Contrast is measured against Daylight.

Daylight--day

The light ground for docs, print, invoices and partner pages.

Ground
Night--night

Text, the wordmark and the lit bit on light grounds.

17.4:1 AAA text
Coral deep--p2

The coral bit on light grounds. Graphics only, not text.

3.3:1 Large text and graphics
Coral text--coral-t

Coral words in text on light grounds.

4.5:1 AA text
Mint text--mint-t

Goal words on light grounds.

4.6:1 AA text
Sky text--sky-t

Links on light grounds.

4.8:1 AA text
  • Keep coral for money. Do not use coral as a general accent or for errors. Errors use Error, #FF8C8C.
  • Put text on glass. Body text over the globe sits on a glass panel: rgba(10,16,30,.74) for cards and .86 for long text.
  • Plans keep their order. Plan 1, 2 and 3 always map to the same plans. Never cycle them for other series.

06 · Typography

Red Hat Display for words, Red Hat Mono for data.

Display sets everything people read. Mono sets data, code, timestamps and axis labels. Both are free under the SIL Open Font License.

Headline sentenceDisplay 700 · 28–52 px · −0.035em · 1.04
1 in 6 people finish this funnel.
KPI valueDisplay 700 · 28 px · −0.02em · tabular
$12,480.00
Card titleDisplay 600 · 14 px
Revenue by first touch
BodyDisplay 400 · 14 px · 1.5
X brought 34% of revenue from only 22% of visitors in the last 30 days.
SecondaryDisplay 400 · 13 px · Muted
First touch attribution · 17 Sep to 17 Oct
DataMono 400 · 12 px
14:02:11 amber-fox-4821 /pricing → /checkout $49.00
Axis and panel labelMono 500 · 11 px · upper case · 0.08em
Visitors · last 30 days

07 · Meaning colours

The highlight takes the colour of what it counts.

A headline highlights one phrase, in the colour of the thing it measures. The highlight links to the data behind it.

Ice · traffic

12,840 people visited this month.

Coral · money

amber-fox paid $49 for Pro.

Mint · goals

1 in 6 people finish this funnel.

Sky · live

37 people are here now.

08 · The Readout

The only mark that moves.

The Readout is the tittle on its own, in the colour of the event. It shows live state across the product. Feed rows age: four bits switch, then two hold, then one holds.

Kinds

SkyLive state
IcePage views
MintGoals and signups
CoralPayments
AmberWarnings
OffNo data

States

NowFour bits switch
OlderTwo bits hold
OldestOne bit holds
CalmReduced motion and static places

09 · Icons

Circles and straight lines, like the bits.

Globe
Funnel
Revenue
Person
Terminal
Ask
  • Icons sit on a 20 px grid with a 1.5 px stroke, round caps and round joins.
  • Build icons from circles and straight lines. Corners are 2 px.
  • Icons are Ice or Muted. Only bits and the Readout are filled.
  • Never put the logo in an icon set. Never animate the letters of the logo.

10 · Imagery

The globe and the data. No photos.

  • The globe is 2,600 points on a Fibonacci sphere, tilted 22°. Land is brighter than ocean.
  • Pings use the meaning colour of the visitor’s last event. Arcs go from the visitor to the server region.
  • The globe sits behind content, never inside a card. It stops for reduced motion.
  • Charts use linear scales and one y-axis, with values on hover. Name the time range and the attribution model.

X brought 34% of revenue from 22% of visitors.

Visitors · Revenue · last 30 days · first touch

11 · Voice and tone

Lead with the number, in a plain sentence.

State a fact; do not give advice. One sentence, about 20 words at most, in the active voice. Write “twelvebit” in lower case, also at the start of a sentence.

Write1 in 6 people finish this funnel.NotFunnel conversion rate: 16.67%WhyPeople, not rates. Round to a ratio people can picture.
WriteX brought 34% of revenue from only 22% of visitors.NotX is your top-performing channel!WhyTwo numbers make the claim. No exclamation marks.
Write37 people are here now.Not37 active sessionsWhyNo jargon: no “sessions”, no “bounce rate”.
WriteNo events in 10 minutes. Check that the script loads on fernpost.com.NotOops! Something went wrong.WhySay what happened and what to do next.
WriteCopy promptNotGet startedWhyA button says what it does.

12 · Where it appears

One logo on every surface.

Product

The horizontal lockup, 20 px high, top left. In the app header the tittle switches live; everywhere else it is still. The favicon uses the 16 and 32 px masters.

Marketing

One sentence-first headline over the moving globe. The full-colour lockup on Deep Field. A coral ground only for a reversed logo at events.

Docs

Docs may use the light set: Daylight ground, Night text and the deeper meaning colours. Code is set in Red Hat Mono. The lockup uses the light version there.

Social cards

1200 × 630. The lockup top left at 3.6% of the width, one sentence, the globe cropped at the right edge, and the domain in Mono. No dashboard screenshots.

npm and CLI

A text version of the logo: ▘▗ twelvebit. Ice and coral as 256-colour ANSI (153 and 209). The spinner is the Readout drawn with quadrant blocks, ▘ ▝ ▗ ▖, with ▚ as the calm frame.

MCP and agents

Tool names and answers in plain sentences with the number first, so an agent can quote them unchanged.

Email

The wordmark as a PNG (120 × 24 on Space) at the top left, linked from an absolute URL. The alt text is “twelvebit”.

13 · Downloads

Every file, in one zip or one at a time.

The SVG files are the masters. The PNG files are exports at 1x and 2x.

SVG

PNG

Download twelvebit-brand.zip