Skip to content

How to use the Frank brand.

The logo files, the palette with its codes, typography by role, and the things you don’t do with any of them. If your case isn’t here, write to us and we’ll sort it out same day.

The name.

It’s short and it’s written one way. These three rules cover almost everything that shows up in an article or a deck.

  • It’s written Frank, capital F. Never FRANK, never frank.
  • It takes no suffix. It isn’t Frank AI, Frank App or Frank.io. The domain is tryfrank.app, but the product is called Frank.
  • In a sentence it works as a proper noun: “Frank trains difficult conversations”, not “the Frank platform”.

What you don’t do with the logo.

Six things that break the brand. If you’re unsure about a seventh, the answer is probably also no.

Don’t recolor it
The symbol is orange with a white wave, always. The wordmark has exactly two states: Ink on light, white on dark.
Don’t distort it
Scale it proportionally. Never stretch it sideways to fill a box.
Don’t rotate it
It runs horizontal. A logo on a diagonal stops being a signature and becomes decoration.
Don’t add shadow or glow
No drop shadow, no glow, no outline. The brand uses none of the three anywhere.
Don’t use the outline only
The symbol is a solid shape. Hollowed out it loses the wave, which is the only thing that identifies it.
Don’t put the dark wordmark on orange
Ink on Frank Orange doesn’t reach minimum contrast. On orange, use the white version.

The color.

The brand has a single accent. Everything else is a warm neutral that exists to let it breathe. The codes below are the ones the site uses: copy them and you get exactly what you see.

  • Frank Orange

    #DE5A24

    The accent. Buttons, links, the wave and the figure that matters.

  • Deep Orange

    #C94D18

    Hover and links on light backgrounds, where the accent doesn’t reach contrast.

  • Clay

    #D47A4A

    The logo wave. The only color that doesn’t change between light and dark.

  • Ink

    #181614

    Primary text and the background of dark bands.

  • Warm White

    #F7F2EB

    Text on dark backgrounds.

  • Bone

    #E7DFD1

    Warm surfaces and chart elements.

  • Warm Gray

    #7A736C

    Secondary text and chart marks.

  • White

    #FFFFFF

    The site’s primary surface.

Where the orange goes

In four places and nowhere else: the accent wave under a word in the headline, buttons, links and the highlighted figure. Never as the background of a whole section, and never as the color of a word in the headline: the word stays in text color and carries the wave underneath.

There are no brand greens, reds or blues. Status colors exist inside the product and are not used in communication.

The typography.

Three families, each with a job. The family is chosen by role, not by size.

HeadlineSora

Never let the first time be the real one

Headlines and subheads only. Nothing under 20px uses Sora: if it looks like a title and measures less, it’s a label.

TextSatoshi

Your team practices the hard conversation before having it.

Body, labels and interface. Labels go in sentence case, no tracking, no all-caps.

DataJetBrains Mono

02:45 / .99 / #DE5A24

Data only: timestamps, sourced figures, codes, file sizes. The question isn’t whether it’s a number, it’s whether the system produced it.

Sora and JetBrains Mono are on Google Fonts. Satoshi is from Fontshare. If you can’t load Satoshi, Hanken Grotesk is the substitute we use.

Case not covered here?

Write to us and we’ll send back the file or the answer you need. If what you’re after is material for an article, the press kit has the boilerplate and the verifiable facts.

contact@tryfrank.appSee the press kit

Let’s talk, and let it be with a person.

Listen to Frank

When you request a demo you talk to someone who builds Frank, not to a form that routes you to an SDR.