Branding & Style Guide

Download Assets

Download the complete brand kit (ZIP, ~1.3 MB)

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

---

Icon Mark — Individual Downloads

Square icon mark at every standard size. Dark variant has the full brand palette on a transparent background. Light variant uses white fills, suited for dark or coloured backgrounds.

Transparent background — dark fills

Transparent background — light fills (for dark surfaces)

On solid backgrounds

---

Logotype — Individual Downloads

Full horizontal logotype with the InterlinedList wordmark.

Transparent background

Logotype on solid backgrounds

---

SVG Source Files

Vector files that scale to any size without quality loss. Each SVG contains the full combined wordmark — logo mark plus the "InterlinedList" name — not the icon mark alone. For the standalone icon mark, download interlinedlist-logo-only.png from the icon table above.

---

Logo Previews

Primary logo mark — interlinedlist-logo-only.png

This is the logo. Use it wherever a standalone icon is needed.

Icon mark — transparent background (dark)

Icon mark — on white background

Icon mark — on black background

Icon mark — on Ocean Blue background

Logotype — transparent background

Logotype — on white background

Logotype — on black background

Logotype — on Ocean Blue background

---

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 visual identity draws from two overlapping worlds. Ocean Blue comes from deep-sea exploration — depth, calm, and discovery. Emerald Green brings in lush natural growth — momentum, freshness, and life. Amber Gold ties them together as the warm highlight that catches your eye and invites action.

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

---

Logo Assets

Primary Logo Mark — interlinedlist-logo-only.png

This is the canonical logo. When you need the InterlinedList logo in isolation — app icons, favicons, social avatars, navigation bars, or any context where the icon stands alone — use interlinedlist-logo-only.png. It is the definitive, production-ready form of the mark.

The logo mark is the interlocked chain/knot symbol rendered in the three brand colours: Ocean Blue (#0F4C5F), Emerald Green (#34A56D), and Amber Gold (#F9AF36), on a transparent background.

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

SVG Variants

Two SVG files are provided. Each contains the full combined wordmark — the logo mark on the left plus the "InterlinedList" text on the right. The text is two-colour: Interlined in Ocean Blue (#0F4C5F) and List in Emerald Green (#34A56D).

Use the SVG wordmark when you need the icon and the name together at large display sizes (headers, presentations, print). For everything else — favicons, app icons, nav bars — use interlinedlist-logo-only.png.

Other PNG Assets

---

Logo Usage Rules

Do:

• Use interlinedlist-logo-only.png as the logo mark in all app, web, and product contexts — it is the canonical file.
• Use logo-light.svg (white counters) on light/white backgrounds when displaying the full wordmark.
• Use logo-dark.svg (dark counters) on dark or coloured backgrounds when displaying the full wordmark.
• Give the logo breathing room — leave clear space around it equal to roughly the height of the "I" in "Interlined."
• Use the icon-only PNG when space is very tight (profile pictures, small app tiles, favicons).
• Scale proportionally: hold shift when resizing to avoid distortion.

Minimum sizes:

Do not:

• Recolour the logo — use only the provided files as-is.
• 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.

---

Brand Colors

Core logo colours

Extended palette (Darkone theme)

Dark mode background stack

Hero gradient

• Start: #667EEA
• End: #764BA2

This gradient works well for event banners, social media headers, and email header backgrounds where you want to evoke the InterlinedList landing experience.

---

Typography

InterlinedList uses the Play typeface (available free from Google Fonts at fonts.google.com). Play is a clean, modern geometric sans-serif with a slightly technical character that complements the platform's data-forward personality without feeling cold.

Using Play in your own content:

1. Visit fonts.google.com/specimen/Play.
2. Click Get font, then Get embed code.
3. Paste the provided <link> tag into the <head> of your HTML, or download the font files for desktop publishing tools.

For non-web contexts (presentations, print, video thumbnails), any clean geometric sans-serif such as Roboto, Inter, or Nunito reads similarly well as a stand-in when Play is not available.

---

The Darkone Theme

InterlinedList's interface is built on the Darkone v1.0 Bootstrap admin theme. Understanding the theme helps community developers build tools and extensions that feel visually consistent with the platform.

Key characteristics of the theme:

• Deep, layered dark backgrounds designed to reduce eye strain during long sessions.
• High-contrast text against those backgrounds for comfortable reading.
• A consistent layout architecture: top navigation bar, collapsible sidebar, and content cards.
• Smooth transitions and subtle gradients throughout interactive elements.

If you are building a community tool or integration and want your UI to feel native to InterlinedList, the dark background stack in the Brand Colors section above gives you the colour values you need.

---

Branding Package for Partners

The complete kit is available as a single download:

Download interlinedlist-brand-kit.zip (~1.3 MB)

What is included:

interlinedlist-brand-kit.zip
  icon/
    icon-dark-transparent-{16,32,64,128,180,192,256,512}.png
    icon-light-transparent-{32,64,128,180,192,256,512}.png
    icon-on-white-{64,128,256,512}.png
    icon-on-black-{64,128,256,512}.png
    icon-on-ocean-{64,128,256,512}.png
  logotype/
    logotype-transparent-{200w,400w,600w,1200w}.png
    logotype-on-white-{400w,600w,1200w}.png
    logotype-on-black-{400w,600w,1200w}.png
    logotype-on-ocean-{400w,600w,1200w}.png
  svg/
    logo-dark.svg
    logo-light.svg

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, the following CSS custom properties are what the site uses internally.

Light theme (default)

Dark theme ([data-theme="dark"])

---

Dos and Don'ts

Do:

• Use interlinedlist-logo-only.png as the canonical logo mark — it is the definitive file for the InterlinedList icon.
• Use the provided logo files as-is — do not recreate the logo by hand.
• Match the SVG wordmark variant to the background (logo-light.svg on light surfaces, logo-dark.svg on dark surfaces).
• Use Ocean Blue (#0F4C5F), Emerald Green (#34A56D), and Amber Gold (#F9AF36) as your primary colour references.
• Use the Play typeface for headings and display text 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.
• Use the logo at sizes smaller than 24 px tall (icon) or 120 px tall (full logotype).
• 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.