Branding & Style Guide

The InterlinedList brand is the logo mark: the interlocked knot symbol on its own. Every asset in this guide is the symbol only, so it reads cleanly at any size from a 16 × 16 favicon to a 512 × 512 app icon. The product name may be set beside the mark in exactly one place — see The Wordmark.

The mark is drawn in the same three colours the interface paints with. There is one palette, not a logo palette and an app palette; if a colour here disagrees with brand-kit/theme/tokens.json, the token file is right and this page is a bug.

Download Assets

Download the complete brand kit (ZIP, ~170 KB)

The ZIP contains every file listed below: all icon-mark sizes, all background variants, and the SVG source files.

---

Icon Mark: Individual Downloads

The square logo mark at every standard size. The full-colour variant uses the three brand colours on a transparent background. The white variant is a single-colour knockout, suited to dark or coloured backgrounds.

Filenames use dark for the full-colour mark and light for the white knockout, matching the naming used across the rest of the kit.

Transparent background: full-colour mark

Transparent background: white knockout (for dark surfaces)

On solid backgrounds

The mark is pre-composited onto each background, so no compositing is needed. Each tile carries whichever variant reads against it: the full-colour mark on the light grounds, the white knockout on the dark and teal ones.

Soft sand is the app-icon tile. All three mark colours read against it, which is why every platform icon in the brand kit is built on it.

---

SVG Source Files

Vector files that scale to any size without quality loss. Each contains the logo mark only (the interlocked knot symbol, no text).

For a raster version at a fixed size, use the PNGs in the Icon Mark tables above.

---

Logo Previews

Primary logo mark

This is the logo. Use it wherever the InterlinedList mark is needed.

InterlinedList primary logo mark

Logo mark: white knockout (on transparent)

InterlinedList logo mark, white knockout, 256px

Logo mark: on white background

InterlinedList logo mark on white, 256px

Logo mark: on black background

InterlinedList logo mark on black, 256px

Logo mark: on the soft-sand app-icon tile

InterlinedList logo mark on soft sand, 256px

Logo mark: on teal (white knockout)

The mark's own teal strands would disappear into a teal ground, so the knockout is the only variant that reads here.

InterlinedList logo mark on teal, 256px

---

Brand Story

InterlinedList is a social list-management and cross-posting platform built around the idea of layers: lists within lists, connections between ideas, meaning threaded through everything. The name "Interlined" captures that spirit: content and structure woven together, not stacked on top of each other.

The logo mark distils this into a single symbol: an interlocked knot whose strands cross over and under one another, separate lines that stay connected. It carries the whole identity on its own, which is why the brand leads with the symbol rather than a wordmark.

The palette is called Strata, and it is built from the same layering idea. Teal is the structure: the masthead, the rails, the edges that hold a page together — deep and steady, the colour you navigate by. Green is the action: post, compose, follow, the things you came here to do. Amber is what is happening right now: live status, Digs, the highlight that catches your eye.

They sit on soft sand in light and near-black in dark, so the interface reads as paper or as night without either mode feeling like an afterthought.

Together these colours say: this is a thoughtful, organised, purposeful place to create.

---

Logo Assets

Primary Logo Mark

This is the canonical logo. Whenever you need the InterlinedList logo (app icons, favicons, social avatars, navigation bars, or any context where the mark stands), use the logo mark. It is the interlocked knot symbol rendered in the three brand colours — Teal (#184860), Green (#2FA877), and Amber (#F0A830) — on a transparent background, with no type of any kind.

• Vector (preferred): logo-mark.svg scales to any size.
• White knockout: logo-mark-white.svg for dark or coloured surfaces.
• Raster: the icon-* PNGs in the Icon Mark tables, at every standard size.

Do not substitute a screenshot, re-export from another source, or derive a new version. Use the provided files as-is.

Choosing a variant

---

Logo Usage Rules

Do:

• Use the logo mark as-is in all app, web, and product contexts. It is the canonical file.
• Use logo-mark.svg (full colour) on light/white backgrounds.
• Use logo-mark-white.svg (white knockout) on dark or coloured backgrounds.
• Give the mark breathing room: leave clear space on every side of at least 25 % of the mark's width. (The mark is square, so this is the same rule brand-kit/README.md states — it is written one way, here, on purpose.)
• Scale proportionally: hold shift when resizing to avoid distortion.

Minimum size:

Below 24 px, prefer the dedicated small favicons (16 × 16, 32 × 32) which are tuned for tiny sizes.

Do not:

• Recolour the logo. Use only the provided files as-is.
• Add the product name or a tagline to the mark anywhere outside a masthead. Outside that one lockup, the brand is the symbol alone — see The Wordmark.
• Stretch, skew, rotate, or distort the logo in any direction.
• Apply drop shadows, glows, outlines, or other effects.
• Place the logo directly against a background that makes it hard to read (low contrast, busy patterns, clashing colours).
• Place another brand's logo immediately adjacent to the InterlinedList logo without clear visual separation between them.

---

The Wordmark

The mark and the wordmark are not the same thing, and only one of them is the logo.

• The mark alone is the logo. App icons, favicons, avatars, social tiles, and any context where the brand stands on its own use the symbol with no type.
• The wordmark is a lockup, not the logo. Setting "InterlinedList" beside the mark is permitted in exactly one place — the masthead, where the product name is doing navigational work rather than brand work. The theme ships .il-wordmark for precisely that use: "Interlined" in the text colour, "List" in --il-teal-bright (dark) / --il-green (light).
• Nothing else may set the product name in brand type beside the mark. There is no tagline anywhere.

This ruling is written identically in brand-kit/README.md; the two files previously disagreed outright — this page said a wordmark did not exist while the brand kit defined one and the theme shipped the class for it.

---

Brand Colors

Core logo colours

The mark's three colours are the interface's three colours. They do not change between themes.

The two grounds

Light is soft sand rather than white, and dark is near-black rather than grey. The app-icon tiles use these two grounds, which is why the icons in brand-kit/icons/ sit on sand and not on white.

Everything else

Surfaces, borders, links, focus rings, and every status colour (success, danger, info, warning) live in the CSS Custom Properties Reference at the end of this page. That table is the single table of record. It is checked against brand-kit/theme/interlinedlist-theme.css in CI, so it cannot drift from what the app paints.

Do not take a colour value from anywhere else — including from an older copy of this page. An earlier version of this section published a different three-colour palette, an "extended palette", a dark background stack, and a hero gradient. None of them appeared in any stylesheet the product ships, and none of them are part of the brand. If you built against them, the three colours above are the correction.

---

Typography

InterlinedList uses three typefaces, all free from Google Fonts. The mark itself carries no type; these are the voice everywhere text appears.

Weights in use: 400, 500, 600, 700.

Type scale

Fallback stacks

Each token carries its own fallback, so a failed font load degrades to the platform UI face rather than to a serif:

--il-font-display: 'Space Grotesk', system-ui, sans-serif;
--il-font-body:    'Manrope', system-ui, sans-serif;
--il-font-mono:    'JetBrains Mono', ui-monospace, monospace;

Using them in your own content

Paste this into the <head> of your HTML — it is the exact line the app loads:

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap"
  rel="stylesheet"
/>

For non-web contexts (presentations, print, video thumbnails), any geometric sans-serif — Inter, Work Sans, Roboto — stands in acceptably for Space Grotesk and Manrope.

Note for anyone working from an older copy of this guide: this page used to name a single, different primary typeface that appears in no stylesheet in the repository and never shipped. If you built something against it, the three faces above are the correction.

---

The Interface

InterlinedList's layout is built on the Darkone v1.0 Bootstrap admin theme, restyled onto the Strata tokens. The Bootstrap structure is Darkone's; none of its colours survive.

Characteristics worth matching if you are building a tool or extension that should feel native:

• Light by default, dark on request. The theme follows the OS via prefers-color-scheme and honours an explicit <html data-theme="dark">. Soft sand in light, near-black in dark.
• A consistent layout architecture: teal masthead, collapsible sidebar, content cards.
• A sharp radius language — 3 px on controls, 4 px on cards, 10 px on desktop windows.
• Restrained motion, and a full prefers-reduced-motion path.

Link brand-kit/theme/interlinedlist-theme.css and you inherit all of it: the --il-* variables, the .il-* component classes, and both themes.

---

Branding Package for Partners

The complete kit is available as a single download:

Download interlinedlist-brand-kit.zip (~170 KB)

What is included:

interlinedlist-brand-kit.zip
  icon/
    icon-dark-transparent-{16,32,64,128,180,192,256,512}.png   full-colour mark
    icon-light-transparent-{32,64,128,180,192,256,512}.png     white knockout
    icon-on-white-{64,128,256,512}.png
    icon-on-black-{64,128,256,512}.png
    icon-on-teal-{64,128,256,512}.png
    icon-on-sand-{64,128,256,512}.png
  svg/
    logo-mark.svg          full-colour mark (vector)
    logo-mark-white.svg    white knockout (vector)

Every file in the kit is the mark alone — the kit ships no wordmark lockup and no tagline. If you need a custom size or format not listed here, reach out through the InterlinedList contact page.

---

CSS Custom Properties Reference

If you are building a community theme, browser extension, or embedded widget that should feel consistent with InterlinedList's visual design, these are the custom properties the site uses internally.

--il-* is the only colour layer. A parallel --color-* alias layer used to exist alongside it and was removed: two correct names for one colour is a permanent source of drift, and having any alias at all made a third option (a raw hex) look almost as legitimate. Write var(--il-text), never a literal colour, and never a var(--il-text, #fallback) fallback (if the token exists the fallback is dead; if it does not, the fallback hides that).

Ground truth is brand-kit/theme/interlinedlist-theme.css. Two scripts keep this honest, both blocking in CI:

• npm run lint:theme: fails on a raw hex in app/ or components/, on a var() fallback, and on any --il-* referenced but never defined.
• npm run theme:contrast: computes WCAG contrast for every token pair in both themes and fails below AA.

Where a colour must genuinely stay put (the theme-color meta tag, the embed card, a marker on a map tile), annotate it theme-token-allow: <reason> and the guard will accept it.

Fixed accents (identical in both themes)

Theme-dependent tokens

--il-primary and --il-link resolve to different fixed accents per theme; the values below are what each token computes to.

Applying a colour in a component

// Yes: follows the theme.
<span style={{ color: 'var(--il-danger)' }} />

// No: cannot respond to the theme, and the guard rejects it.
<span style={{ color: '#dc3545' }} />

// No: a fallback either does nothing or hides a missing token.
<span style={{ color: 'var(--il-danger, #dc3545)' }} />

The one case that needs more than var() is a colour handed to a library that writes it into an SVG presentation attribute rather than a style (React Flow's <Background> and <MiniMap>, Leaflet's circleMarker). Resolve those through lib/theme/cssTokens.ts, which keeps the token as the source of truth and re-resolves when the theme changes.

---

Dos and Don'ts

Do:

• Use the logo mark as the canonical logo. It is the definitive InterlinedList symbol.
• Use the provided logo files as-is. Do not recreate the mark by hand.
• Match the variant to the background (full-colour logo-mark.svg on light surfaces, logo-mark-white.svg on dark surfaces).
• Use Teal (#184860), Green (#2FA877), and Amber (#F0A830) as your primary colour references, and take every other value from the CSS Custom Properties Reference.
• Use Space Grotesk for headings and display text, and Manrope for body copy, to match the brand feel.
• Give the logo adequate space. Do not crowd it with other elements.
• Credit InterlinedList by name when featuring it in reviews, tutorials, or promotional content.

Do not:

• Recolour, distort, rotate, or add effects to the logo.
• Add the product name or a tagline to the mark anywhere outside a masthead — see The Wordmark.
• Use the logo at sizes smaller than 24 px tall (use the dedicated 16 px / 32 px favicons instead).
• Place the logo on a background that makes it hard to read.
• Imply official endorsement or partnership without written agreement from the InterlinedList team.
• Use InterlinedList's name or logo in a way that could mislead people about the source of your content.
• Combine the logo with other logos without clear visual separation.