CatWing

2. Brand Philosophy

Core Positioning

CatWing is the infrastructure layer for intelligent inventory. We transform raw supply chain data into precise, actionable decisions. Every pixel in our interface exists to help analysts make better choices faster.

Personality Pillars

This, Not That

Visual Identity → AI

• Gradient = data flow (blue inputs → teal outputs)
• Monospace numbers = engineering credibility
• Information density = AI processing power
• Semantic-only color = no decoration, every hue means something

3. Logo System

Icon Mark

The wing icon is the primary visual mark for CatWing.

Wing Icon Mark

catwing_icon_128.png — 128×128px

Favicon

catwing_icon.ico — multi-size

Icon on Backgrounds

White

#f5f7fa

#0f1923

Brand gradient

The wing icon works on all backgrounds without modification.

Vertical Lockup (Icon + Wordmark)

Vertical — Light

catwing_full_600.png

Vertical — Dark

catwing_full_dark_600.png

Use vertical lockup when the logo is the primary focal point (title slides, splash screens, about pages).

Horizontal Lockup (Icon + Wordmark)

Horizontal — Light

catwing_horiz_800x400.png

Horizontal — Dark

catwing_horiz_dark_800x400.png

Use horizontal lockup for headers, navigation bars, and inline placements.

Wordmark Only

Wordmark — Light

catwing_wordmark_600.png

Wordmark — Dark (inverted)

Use white text on dark backgrounds

Wordmark alone for tight spaces or when the icon is already visible nearby. Outfit Bold, charcoal #1a1a2e on light, white on dark.

Construction Rules

• Typeface: Outfit Bold (700), PascalCase “CatWing”, letter-spacing 4px at 100pt
• Clear space: Minimum = height of the “C” character on all sides
• Minimum sizes: Icon 32px, horizontal lockup 120px width
• Light text color: Charcoal #1a1a2e
• Dark text color: White #ffffff

When to Use Each Variant

Do’s and Don’ts

File Formats

4. Color System

Primary Palette

Click any swatch to copy its hex code.

Gradients

Semantic Colors

Data Visualization Palette

Background Tints

Used for status row highlighting and product labels.

WCAG Accessibility Matrix

Fragmentation Notes

5. Typography

Font Pairing

Type Scale

Line Height

Letter Spacing

• Logo wordmark: 4px at 100pt
• Sidebar headings: 0.04em uppercase
• Everything else: normal

Number Formatting

font-variant-numeric: tabular-nums · right-aligned · comma thousands · € prefix, no decimals for large values · 1 decimal for percentages

Pairing Rules

• Never use Outfit in body text — reserved for the wordmark
• Never use Poppins for the logo — always Outfit Bold
• Code blocks: SFMono-Regular, Consolas, monospace at 0.88em

Typography in Context

6. Iconography

CatWing uses Unicode characters + CSS indicators rather than an icon library. This keeps the bundle minimal and ensures icons render without external dependencies.

Zone Dots

The canonical micro-icon. 10px circles with semantic zone colors.

Status Indicators

Chevron Rotation

Chevrons rotate 90° on expand with transition: transform 0.15s.

Product Labels

Textual icons with color coding. Responsive: full text on desktop, abbreviation on phone.

Future Direction

7. Voice & Tone

Overall voice: analyst-to-peer. Direct, specific, not dumbed down. We write for people who understand inventory and supply chain.

Tone by Context

Case Conventions

Number Formatting

Error Message Structure

[Failed to {action}]: {cause} ({recovery})

Example: “Failed to save changes: network timeout (retry or check connection)”

Notification Hierarchy

Rule: never use a modal for success. Never auto-dismiss errors. Always offer undo for bulk actions.

13. Dark Mode

Toggle the theme using the button in the navigation sidebar to see this guide adapt in real-time.

Dark Palette Mapping

Status colors (green #4CAF50, red #D32F2F, orange #FF9800) remain unchanged on dark backgrounds.

Implementation

:root {
  --guide-bg: #f5f7fa;
  --guide-surface: #ffffff;
  --guide-text: #1c1c1c;
  --guide-border: #dce3ed;
}

[data-theme="dark"] {
  --guide-bg: #0f1923;
  --guide-surface: #1a2332;
  --guide-text: #e2e8f0;
  --guide-border: #2a3a4a;
}

Toggle via data-theme="dark" on <html>. Persisted to localStorage. Respects prefers-color-scheme as default.

Side-by-Side Comparison

Logo on Dark

The wing icon works on both light and dark backgrounds. Wordmark: white “Cat” + CW Presentation Teal “Wing” on dark.