Skip to main content
LocalStacked

The marks, and where each one goes

Everything you need to put LocalStacked on a page: the logomark in the inks it is meant to sit in, the colours and the jobs they each do, and the type the site is set in.

The mark

Three plates, stacked

The stack in the name, drawn literally: each plate sits on the next, and one sweep runs from amber at the top to burnt orange at the bottom. One-colour versions cover print, embroidery and anything under 24 pixels.

Sweep on charcoal · primary

Sweep on card surface

Sweep on white

Sweep on light grey

White on charcoal

Charcoal on white

White on burnt orange

Charcoal on burnt orange

Charcoal on amber

Amber on charcoal

Burnt orange on white

White on border grey

The lockup

Mark and name, set together

The name sets in caps in the lockup. That is a typographic treatment, not the spelling — written out, it is LocalStacked, one word.

Side by side

The default: headers, documents, email signatures.

LocalStacked

Sweep on dark

LocalStacked

Sweep on light and print

LocalStacked

White on charcoal

LocalStacked

Charcoal on white

LocalStacked

White on the accent

LocalStacked

Amber on charcoal

Stacked

For square placements: social avatars with text, signage, footers.

LocalStacked

On dark surfaces

LocalStacked

On the accent

LocalStacked

On light and print

The lockup files set the name as live text in a serif (Georgia on most machines), so on a machine without it the name falls back to another serif. For print or signage, open the file in a design tool and convert the text to outlines first.

App icon & favicon

The mark on a tile

The mark fills 78% of a rounded square. Below 24 pixels the gradient cannot be seen, so the 16-pixel favicon uses the flat amber mark.

App icon, charcoal tile
Charcoal
App icon, white tile
White
App icon, burnt orange tile
Burnt orange
Favicon at 48px
48px
Favicon at 32px
32px
Favicon at 16px, flat amber
16px, flat amber

Usage

Clear space and minimum size

  • Keep one plate-height (a quarter of the mark) clear on every side.
  • Smallest size for the sweep: 20px on screen, 6mm in print. Below that the gradient disappears — use a one-colour mark, down to 12px or 4mm.

On this website the top plate is a lighter orange (#EA580C), because amber fades on the ivory pages. The files below still carry the original amber sweep; updated files will replace them.

Downloads

Every file, in SVG and PNG

SVG stays sharp at any size — use it for websites and print. PNG is for tools that do not take SVG: social profiles, CRMs, documents.

Logomarks

The mark on its own, transparent background.

  • SweepThe primary mark, amber to burnt orange
  • WhiteFor dark and accent backgrounds
  • CharcoalThe brand black, for light backgrounds and print
  • Pure black#000, for one-colour print, stamps and engraving
  • AmberOne colour, on dark
  • Burnt orangeOne colour, on light
  • Inherits colourfill="currentColor", for embedding inline in code

Lockups

Mark and name side by side, background included.

  • Sweep on charcoalFor dark grounds
  • Sweep on whiteFor light grounds and print
  • WhiteOne colour, for dark and accent grounds
  • CharcoalOne colour, for light grounds

Stacked lockups

Mark above name, for avatars with text, signage and footers.

  • Sweep on charcoalFor dark grounds
  • White on burnt orangeOn the accent
  • Sweep on whiteFor light grounds and print

App icons

The mark on a rounded square tile — profile pictures, app stores, directory listings.

  • Charcoal tileThe default app icon
  • White tileFor light surroundings
  • Burnt orange tileThe accent version

Favicons

What browsers show in the tab. The site already uses these.

  • FaviconScalable, the sweep on a charcoal tile (512 PNG alongside)
  • Favicon, 16pxFlat amber: below 24px the gradient cannot be seen
  • Apple touch icon180px, for iPhone home screens

Colour

Paper, ink, and one orange

The site sits on warm ivory with near-black ink. Burnt orange is the only accent, and it marks one thing: the free evaluation.

Neutrals

  • #FAF9F5--background

    Ivory. The page ground: warm paper, never pure white.

  • #F0EEE6--secondary

    The band: a slightly darker paper behind rows of cards. Sections separate with thin rules, not heavy fills.

  • #E3DACC--card

    Oat. Cards on the band, and the forms.

  • #141413--foreground

    Ink. Headings, text, and every button that is not the free evaluation.

    17.50:1 on ivory and 13.31:1 on oat.

  • #5E5D59--muted-foreground

    Secondary text: summaries, notes, labels.

    6.26:1 on ivory and 4.76:1 on oat.

Accent

  • #C2410C--primary

    Burnt orange, the one accent. It fills the free-evaluation button and nothing else.

    5.18:1 holding a white label, and 4.92:1 on ivory.

  • #EA580C--mark-top

    The top plate of the logo's sweep on this website, a lighter orange in place of amber, which fades on ivory. Never used for text.

    3.38:1 on ivory, above the 3:1 a graphic needs.

Typography

Three faces, each with one job

A grotesque for headlines and buttons, a serif for reading, and a mono for the small labels. All three are free Google Fonts, served from this site.

Local growth, built and measured.

Instrument Sans--font-sans

Headlines, buttons, navigation and the wordmark on this site

Loaded from Google Fonts through next/font, so it is self-hosted at build time and there is no third-party request at runtime.

Instrument Sans, then the system sans fallback

Local growth, built and measured.

Source Serif 4--font-serif

Paragraphs, articles, and the big headline over the horizon picture

Loaded the same way, from Google Fonts through next/font.

Source Serif 4, then the system serif fallback

Local growth, built and measured.

IBM Plex Mono--font-mono

The small typewriter labels: dates, categories, row labels

Loaded the same way, from Google Fonts through next/font.

IBM Plex Mono, then the system monospace fallback

Need something that isn't here?

Ask for it and we'll send it over — a different format, the wordmark as artwork, or a line checked before you publish it.

contact@localstacked.com