Brand.

The mark

The icon alone is the primary logo. Use it everywhere.

The mark, on dark

The gradient does the work, so the mark needs no inverted version.

The icon is the logo. Not the text, not a wordmark. The mark.

Logo variations

Three ways to show it.

The icon is the primary mark. The full lockup (icon plus wordmark) is for headers and brand moments. Never make a new variation.

Full lockup

Icon plus wordmark. For page headers, splash screens, and brand moments.

Icon alone

The everyday logo. Avatars, favicons, app icons, buttons.

On dark

Works on any dark surface. No outline, no glow, no changes.

Small sizes

The thick ring keeps it readable down to 32px. Below that, it is too small to use.

Usage

Clear space and minimum size.

Give the mark room to breathe. Keep clear space equal to the ring width on all sides, and never set it smaller than 32px.

x x x x

x equals the width of the white ring. Nothing enters this zone: no text, no edges, no other logos.

Minimum digital: 32px

Favicons, tab icons, tiny UI. Any smaller and the llama disappears.

Minimum print: 12mm

Merch, stickers, packaging. The gradient needs room to show its colors.

Color

The gradient.

Four colors, one diagonal flow. Purple leads, yellow lands. Use the full gradient for brand moments, single colors for UI.

Typography

Type.

The system font stack, set with confidence. Big headlines, tight tracking, friendly body copy.

In the wild

The brand in the wild.

What the identity looks like out in the world: the app icon, the feed, the profile, the merch.

@llamagram

Share something kind.

Good morning

Your feed is full of kindness.

llamagram

Llamagram

Do and don't

Treat it right.

The mark is simple, so mistakes show. These are the big ones.

Do

Use the official files

Download the mark from this page. Never redraw it, screenshot it, or rebuild it from memory.

Don't

Stretch or squash it

The icon is a square. Keep the aspect ratio, always. If it looks wrong, it is wrong.

Do

Give it a clean background

White, light gray, or dark. The gradient needs a calm surface to shine against.

Don't

Recolor or clash it

Never change the gradient colors, go grayscale, or place it on a busy clashing background.

Do

Keep it readable

32px minimum on screen. The llama and the ring should always be recognizable.

Don't

Add effects

No rotation, no drop shadows, no outlines, no bevels. The mark ships finished.

House rules

The non-negotiables.

These keep the brand honest.

• 1
  The icon is the logo. Not the text.

  The mark is the app icon alone. The wordmark is a lockup for headers, not a standalone logo.

• 2
  The gradient always flows purple to yellow.

  135 degrees, top left to bottom right. Never reverse it, never go vertical.

• 3
  It is "Llamagram", one word.

  Capital L, lowercase rest. Never "Llama Gram", never "LLAMAGRAM".

• 4
  No em-dashes, anywhere.

  Commas, colons, periods, parentheses. The dash with spaces around it is banned from brand copy.

• 5
  The gradient is earned, not sprayed.

  One gradient moment per view is plenty. If everything gradients, nothing does.

• 6
  Kind over clever.

  Llamagram is the kind corner of the internet. The brand sounds like a friend, never a billboard.

Tokens

The tokens.

Copy-paste ready. Drop this :root block into any new page and it will look like us.

/* Llamagram brand tokens */
:root {
  --grad: linear-gradient(135deg, #833ab4 0%, #d62976 45%, #fa7e1e 80%, #feda75 100%);
  --purple: #833ab4;    /* lead color */
  --magenta: #d62976;   /* heart of the gradient */
  --orange: #fa7e1e;    /* warmth */
  --yellow: #feda75;    /* landing color */
  --ink: #1d1d1f;       /* headlines, body */
  --gray: #6e6e73;      /* secondary text */
  --line: #e8e8ed;      /* borders */
  --light-gray: #f5f5f7; /* section bg */
  --white: #ffffff;
}