Skip to content
Book a demo

Brand kit

Four things never change. Robin, Robin coral, Host Grotesk and the wordmark.

For press, partners, printers and developers: how Swear By looks and sounds, and the files to use. Everything else stays calm: warm paper, ink type and hairlines.

The wordmark. Two weights, one face, and a bird on the b.

swear600by400Tracking−0.035em

Ink on paper is the default. On ink, the words turn paper and Robin wears his night cap so his head still reads. On coral, use the words alone in ink: Robin disappears on coral.

Construction and clear space

Keep the x-height clear on every side: half the type size.
  • Lowercase Host Grotesk: “swear” at 600 and “by” at 400, the conviction heavy and the connective light.
  • Horizontal: Robin mini at 1.1 times the type size, a quarter em from the words.
  • Perched: Robin at 0.55 of the type size, his left edge 2.645 em in and his top 0.409 em above the type, feet on the stem of the b.

Minimum sizes

  • Horizontal lockup16px type
  • Words only13px type
  • Perched lockup40px type
  • Robin alone16px, mini pose

Below 40px, use the horizontal lockup. The smallest words-only use is the “made with swear by” line on customer pages.

Never

  • Swap the weights

  • Stretch or squash it

  • Recolor Robin

  • Put Robin on coral

  • Set it in a pill

Robin, the messenger. A little bird told you.

People say “a little bird told me” about word of mouth. Robin tells an owner somebody swore by them, then flies the thank-you back. He is the only illustration in the system.

Where Robin shows up

  • Once per screen at most.
  • Only good news: a swear-by, a booked job, a thank-you sent, going live.
  • Flat in the product, soft for payoffs, night on ink.
  • He speaks in ink bubbles of eight words or fewer.

Where Robin never goes

  • Never on errors, billing, the budget or a failed payout.
  • Never on customer pages: they wear the business's own brand.
  • Never recolored, restyled or redrawn.
  • Never bigger than the news he brings.

One color. Robin coral. Ink and paper do the rest.

The one color

Robin coral is a fill with ink type on it, one robin button per screen.

  • Robin coral

    #FF6F4Brobin

    Robin's breast, the swear-by bubble, the live dot and the one robin button.

    Ink type on it6.7:1

    Never type on paper2.7:1

  • Robin ink

    #B5391Arobin-ink

    Coral as type, only where type must be coral.

    On paper5.8:1

  • Robin wash

    #FFE9DErobin-wash

    The Booked status and selected rows.

    Robin ink on it5.0:1

Sun (#FFB627) is Robin's beak, never the interface. Coral never carries white type.

Ink and paper

Ink does the work: text, the strong button and the current selection. No pure white or black in the interface.

  • Paper

    #FEFDFBpaper

    The page and cards.

  • Stage

    #F5F2EEstage

    Panels, the sidebar and product stages.

    Ink type on it16.6:1

  • Ink

    #17130Eink

    Type, the strong button, the active tab, the ink card and the footer.

    On paper18.2:1

  • Ink 2

    #5C5751ink-2

    Secondary text.

    On paper7.0:1

Status

Product only, small, and always with a word beside the color.

  • Ok

    #13794Aon #E4F2E9

    Paid and sent.

    On its wash4.7:1

  • Wait

    #8A5A00on #FBF0D8

    Waiting on something.

    On its wash5.2:1

  • Err

    #B42318on #FDECEA

    Failed. One plain line says why.

    On its wash5.7:1

Washes

Three soft stages, never more, each holding at most one floating card.

  • Stone

    #EFEBE4#F9F7F3

    The default feature stage.

  • Peach

    #FFE2D4#FFF4EE

    Swear-bys and thank-yous.

  • Sky

    #D9E9FF#F1F7FF

    Payoff moments only.

Avatar tints

One warm tint per person, picked from their name and the same on every screen, with ink initials. The owner is ink. Never a status color.

Ink initials, weakest pair 14.9:1

  • t1#FFE1D4
  • t2#DCEAFF
  • t3#FFEFC2
  • t4#DDF0E1
  • t5#ECE7E0

One typeface. Host Grotesk at regular weight. Size does the shouting.

  • 400Regular

    Hear it, thank them.

    Everything you read, headlines included.

  • 500Medium

    Say thanks

    Controls, labels and row titles.

  • 600SemiBold

    The wordmark only.

The scale

Sizes from the D v5 board, and the class that sets each one in code.

  • d176px · 400 · 1 · −0.03em

    The marketing hero. In code: D1, 40 to 76px

    Somebody's swearing by you.

  • d256px · 400 · 1.03 · −0.024em

    Marketing section headlines. In code: D2, 36 to 56px

    They get thanked.

  • d344px · 400 · 1.06 · −0.02em

    Smaller headlines and the legal pages. In code: D3, 32 to 44px

    Straight answers.

  • h132px · 400 · 1.12 · −0.014em

    Every app screen's one title. In code: title-page, 30 to 36px

    Hi Sam. Somebody swore by you.

  • h224px · 400 · 1.25 · −0.01em

    The task in a hero. In code: title-hero, 24px

    Dana swore by you.

  • h318px · 500 · 1.3 · −0.006em

    Card and row titles. In code: title-row, 16px

    Dana R. swore by you to Dave M.

  • body16px · 400 · 1.5 · 0

    Everything you read. In code: text-base

    Give each customer a link, see every friend who books, and say thanks once the job is done and paid.

  • ui14px · 400 · 1.45 · 0

    Controls, rows and side lines. In code: text-sm

    Deep clean · done and paid

  • sm13px · 400 · 1.4 · 0

    Footnotes and fact lines. In code: text-[13px]

    Billing starts when you go live.

  • tag11px · 500 · 1.3 · +0.07em, caps

    Labels and the live line. Never a headline. In code: tag

    This week's swear-bys

Fragment Mono

For real numbers in live chips, times and codes: 12px on stage, after an 11px tag.

Views412Booked9· Example business

Nanum Pen Script

Only for a customer's own words, on their link, at 28px and up. Never our voice.

Ask for Maria. She's amazing.
Dana R. · Illustrative example

Where the fonts come from

All three come from Google Fonts under the SIL Open Font License 1.1, free to use, embed and share. The site loads them with next/font/google in src/app/fonts.ts, which downloads the files when the site builds and serves them from our own domain, so a visitor's browser never asks Google for them. Nanum Pen Script isn't preloaded: it only shows where a customer wrote a note. Read the license.

Plain, warm, specific. Short sentences, real numbers, no hype.

Our words

swear-by
A customer's recommendation, as a noun. “Dana sent you a swear-by.”
thank-you
The reward a customer gets when their friend books. “Your thank-you is on its way.”
Say thanks
Approving a thank-you so it goes out. “Say thanks · $50”
regulars
People with two or more swear-bys. “Priya's a regular now.”
The Little Bird
The owner's Monday email. “Who swore by you, who booked, what it cost.”
Pass it on
What a customer does with their link. “They swear by you. They pass it on.”

Say this, not that

  • SayPsst. Dana swore by you.

    NotYou have a new referral notification.

  • SaySay thanks · $50

    NotApprove pending reward

  • SayNot enough money in the wallet.

    NotOops! Something went wrong.

  • Say$149 a month. No fee per job.

    NotPricing that scales with your success!

  • Owners hear plain words: a swear-by, a thank-you, Say thanks, regulars.
  • Customers and their friends see “refer a friend”, never “ad”.
  • No em dashes or double hyphens: use a period, comma, colon or parentheses.
  • Promise behaviors, never results. A benchmark is a range with its source, and an example number says “Example business”.
  • Robin says eight words or fewer.

Downloads. Plain files. Use them as drawn here.

App icon

Robin on a paper tile: the home screen, the favicon, avatars.

  • PNGs have transparent backgrounds, at 1x, 2x and 4x.
  • SVGs are vector. In the wordmark and lockups the words are outlined, so no font is needed.
  • Robin's files are the same drawings the product uses, never retraced.
  • Use them to show or link to Swear By. Please don't redraw, recolor or rearrange them.