Brand guidelines

An identity
on purpose.

These are the rules for how Aloha looks and sounds. Our team follows them; partners, press and customers are welcome to use the identity as long as they do too.

Brand kit on /pressUnsure about something? Write us

The wordmark

Fraunces aloha
indigo period.

The period is the brand. A quiet mark at the end of a confident word. Do not remove it. Do not shift its colour.

Aloha.
Aloha.
Aloha.

The mark

A square for small surfaces.

Favicons, app icons, avatars, OG cards. The standalone mark shares the wordmark's rules — keep the period indigo and give it breathing room.

Aloha mark
Aloha mark on peach
Aloha mark, reversed

Asset files

Download what you need.

Full press kit

Do

  • · Keep the period in the primary indigo, every time.
  • · Give it 40px of clear space on all sides at any size.
  • · Use on cream or peach backgrounds; use the ink inverse on dark.

Don't

  • · Don't recolour the wordmark. Ink on cream or peach on ink. Those are the two.
  • · Don't stretch or condense. Fraunces wants the proportions it came with.
  • · Don't add glow or drop shadows. The mark is a warm-ink printed thing, not a neon sign.
  • · Don't place on busy photography. If you need to, use a 12% peach-100 scrim behind it.

Colour

Cream, ink,
one warm family.

Warm cream ground, warm ink foreground, a single peach family for warmth, indigo for calls to action only. No grays, no pure black, no secondary accent colour.

Surface

background

#f6f1e4

Warm cream. The ground state of every page.

background-elev

#fffdf6

Elevated surfaces — cards on cream.

foreground / ink

#1a1612

Warm ink. Body text and ink-inverted cards.

Peach (the only accent family)

peach-100

#fbe6cf

Softest — page backgrounds, quiet callouts.

peach-200

#f9d5ae

Cards, hero backgrounds.

peach-300

#f4bf87

Active states, emphasis.

peach-400

#ed9f57

Loudest — use rarely, sparingly.

Primary (indigo — CTAs only)

primary

#4f46e5

Buttons, links, emphasis italic.

primary-soft

#ecebfc

Tinted backgrounds, secondary cards.

primary-deep

#2e2a85

Hover / pressed state for primary.

Tokens are exported as CSS variables in app/globals.css and mapped to Tailwind via @theme inline.

Typography

Fraunces for voice,
Outfit for clarity.

A display serif paired with a clean sans. Fraunces carries the editorial personality — headlines, quotes, italics — while Outfit handles body, UI, and mono-free data.

Fraunces · display

Aa

A monday note.

a soft afternoon.

400 regular · 500 medium · · opsz 36

Outfit · sans

Aa

Aloha is a social media tool that helps creators and small teams schedule posts across eight networks without losing their voice to it.

400 regular · 500 medium · 600 semibold

Both licensed open source — Fraunces via SIL Open Font License, Outfit via SIL Open Font License. Self-hosted through next/font; no external CDNs.

Voice

Honest, calm,
occasionally funny.

We write like a careful editor, not a growth marketer. No exclamations, no emoji in default copy, no “game- changing” anything. A short truth beats a polished over-claim.

We say

  • "Post less, say more."
  • "Your voice, eight ways."
  • "We'll tell you to go elsewhere."
  • "The export button is the point."

We don't say

  • "Unlock explosive growth."
  • "Game-changing AI."
  • "Let's 10× your reach."
  • "Transform your business."

Motion

Gentle,
rarely essential.

Animations are confirmations, not entertainment. Short durations (150–400ms), eased curves, and a strong bias toward CSS-only effects.

Float

✳

float-soft · 6s ease · hero cards, mock UI panels

Entrance ping

animate-ping · live indicators only

Respect prefers-reduced-motion. Every animated element in the codebase disables itself when the user has the OS setting on.

One family of marks.
Many places they show up.

Download the kitbrand@usealoha.app