# Logosystem

> Logosystem

- Skill: `shashidharbabu/logosystem` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add shashidharbabu/logosystem`
- Raw SKILL.md: https://api.skillmd.com/api/skills/shashidharbabu/logosystem/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: shashidharbabu (https://skillmd.com/u/shashidharbabu)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/shashidharbabu/logosystem

---


# Logosystem

Logosystem (logosystem.co) is a **free, browser-based inspiration gallery**, not
a design tool. It curates 1,300+ real logo systems — wordmarks, symbols, and
animated logos — aggregated from designers' public posts (each entry links back
to the original on X/Dribbble/etc.), tagged by studio: Pentagram, Porto Rocha,
DNCO, Locomotive, Accept and Proceed, and hundreds of independents. There is no
API, no asset downloads, no npm package. Saving to collections/moodboards needs
an account; browsing doesn't.

## Name resolution

"Logosystem" is ambiguous. This skill resolves it to **logosystem.co** (an
actual product at exactly that name). It could also have meant: (a) the generic
logo-grid design methodology (base/construction/lockup/clearspace grids —
covered in this skill's implementation reference), or (b) various Figma
logo-asset plugins, none actually named LogoSystem. If someone means those,
the implementation reference here still applies.

## The hard rule

Every logo in the gallery is **someone's real trademark and someone's real
work**. It is reference material only. Never copy, trace, recolor, or "adapt
closely". Extract *structural* lessons — how a lockup is spaced, how a mark
simplifies at small sizes, what a monoline style does for a fintech — never
the shapes themselves. A launch page shipping a lookalike of a gallery logo is
a trademark dispute, not an homage.

## Selection — using the gallery

1. **Browse with facets**, don't scroll blind. Filters are URL-addressable:
   - Type: `logosystem.co/?type=Symbol%20%26%20Text` (also Wordmark, Symbol, Animated)
   - Industry: `/?industries=Fashion` — Style: `/?styles=Monoline` (Bold, Rounded, Outline…)
   - Color: `/?colors=Black` — Mood: `/?moods=Playful` — Designer: `/?q=Pentagram`
2. **Hand the human 2–3 pre-filtered URLs** matching the brief (e.g. a dev-tool
   brand: `/?styles=Monoline&moods=Bold` plus `/?type=Wordmark`) and ask them to
   pick 3–5 references. Detail pages live at `logosystem.co/logo/<slug>`.
3. **Translate picks into a brief using the gallery's own facet vocabulary** —
   type, style, shape, mood — plus named structural observations ("mark holds up
   at 16px", "wordmark-only, no symbol", "animated variant exists"). That brief
   feeds a human designer, or the **logoai** skill if generating.
4. For animated logo references, note *what* animates (draw-on, morph, reveal);
   implementation goes through the **jitter** skill (Lottie) or **motion-primitives**.

## Integration — systematic logo implementation

Once a logo exists (from a designer, or via the **logoai** skill), the gallery's
lesson is that good logos ship as *systems*, not files. Implement all of this —
concrete Next.js/Tailwind code in `references/implementation.md`:

- **Lockup variants**: full lockup (mark + wordmark) in headers/footers at wide
  widths, mark-only below `md:` and in constrained slots (favicon, avatar, mobile nav).
- **Clearspace as CSS**: encode the exclusion zone as padding tied to mark
  height, so no one places UI inside it by accident.
- **currentColor theming**: single-color marks inherit text color — one asset
  serves light and dark. Multi-color marks need explicit `dark:` variant swaps
  (this repo uses `darkMode: "class"`, so `<picture media>` tricks won't follow the toggle).
- **Scaling floor**: define the minimum rendered size at which the mark stays
  legible; below it, swap to a simplified mark or drop the wordmark.
- **Favicon derives from the mark**, never the lockup (Next.js `app/icon.svg`
  conventions — details in the logoai skill's integration reference).

## When not to use

- **You need an actual logo file** — this site produces nothing. Generate via
  the **logoai** skill or commission a designer.
- **Hero/layout inspiration, not logos** — that's **supahero** (heroes),
  **cosmos** (moodboards), or **recent-design** (trend freshness).
- **Overall visual direction for a page** — **frontend-design** / **taste-skill**.
- **The brand already has a logo and guidelines** — implement the guidelines;
  don't relitigate the mark against a gallery.

## Anti-patterns

- Copying or closely adapting a gallery logo (trademark + copyright exposure).
- Sending the human to the unfiltered firehose instead of pre-filtered facet URLs.
- Collecting 30 references with no extracted brief — inspiration without
  decisions is procrastination.
- Shipping one logo file with no size/clearspace/dark-mode rules, then watching
  every page crop it differently.
- Treating "we saw it on Logosystem" as evidence a style fits *this* brand —
  facets describe the reference, the brief must argue the fit.