Business Cards

Standard business card format: 85 × 55 mm (3.5 × 2 in). Gradient accent bar at the top ties to the brand identity. Name in Poppins Bold, contact details in CW Blue (light) or CW Teal (dark).

Light Variant

CatWing

Sergi Sergiev

CEO

sergi@catwing.ai
+359 888 400 290

Front

CatWing

Deep-tech AI for Supply Chain

catwing.ai

Back

Dark Variant

CatWing

Sergi Sergiev

CEO

sergi@catwing.ai
+359 888 400 290

Front

CatWing

Deep-tech AI for Supply Chain

catwing.ai

Back

Typography Specifications

Construction

• Size: 85 × 55 mm (standard European business card)
• Bleed: 3 mm on all sides
• Safe zone: 5 mm inset from trim edge
• Accent bar: 4px gradient (#336699 → #20b0a5) at top edge
• Corner radius: 3 mm (for rounded-corner print) or 0 (standard cut)
• Logo icon: 28px height, aligned left with wordmark

Print Guidelines

15. Application Gallery

Web App Layout

CatWing

Brand

Status

Tissot

Global Assortment Review 1,247 products · 72% reviewed

Product | Status | Revenue | Zone

Tissot PRX 35mm | STOCK | €12,450 | A

Certina DS Action | STOCK | €8,320 | B

Light mode preview

Presentation Slide

Email Signature

Jane Smith
Supply Chain Analyst · CatWing
jane@catwing.ai · +31 6 1234 5678

Excel Export Header

Terminal / CLI Output

14. Data Visualization

Chart Color Priority

Use colors in this order. First 2 are brand colors; remainder for multi-series charts.

Axis & Grid Styling

• Grid lines: #e0e0e0 at 0.5px, no chart borders
• Axis labels: #666666, Poppins 0.8rem (or Calibri for PPTX)
• Title: Poppins 600, CW Dark (#1c1c1c)

Sequential Palette (Heat Maps)

Recommended: Viridis or Greens sequential. Never use rainbow colormaps.

Inventory Timeline

Area fill: 15% opacity (6% in projection zone) · Line: 2px solid (dashed after “Now”) · Restock: green triangles with +N label · PO: purple diamonds with PO:N label (faded in projection) · Stockout: orange line with hollow dots · Projection zone: diagonal hatching

Demand vs Sales Bar Chart

Grouped bars: demand at 65% opacity beside sales · 2px rounded top corners · Y-axis: “Quantity” label rotated · Axis labels: Poppins 0.8rem

Matplotlib rcParams

import matplotlib.pyplot as plt

plt.rcParams.update({
    "font.family": "Poppins",
    "font.size": 11,
    "axes.facecolor": "#ffffff",
    "axes.edgecolor": "#e0e0e0",
    "axes.grid": True,
    "grid.color": "#e0e0e0",
    "grid.linewidth": 0.5,
    "axes.spines.top": False,
    "axes.spines.right": False,
    "figure.facecolor": "#ffffff",
})

CW_PALETTE = ["#336699", "#20b0a5", "#42A5F5", "#27AE60",
              "#F39C12", "#C0392B", "#8E44AD", "#17A589"]

Do’s and Don’ts

16. Developer Reference

CSS Custom Properties

:root {
  --cw-primary: #20b0a5;
  --cw-blue: #336699;
  --cw-dark: #1c1c1c;
  --cw-bg: #f5f7fa;
  --cw-sidebar-bg: linear-gradient(180deg, #f0f5fc 0%, #e8f0f7 100%);
  --cw-header-bg: linear-gradient(135deg, #336699 0%, #20b0a5 100%);
  --status-stock: #4CAF50;
  --status-notstock: #D32F2F;
  --zone-green: #4CAF50;
  --zone-yellow: #FFC107;
  --zone-orange: #FF9800;
  --zone-red: #D32F2F;
  --confirmed-bg: #E8F5E9;
  --confirmed-border: #4CAF50;
  --drift-bg: #FFF3E0;
  --drift-border: #FF9800;
  --radius: 8px;
  --shadow: 0 2px 8px rgba(0,0,0,0.08);
}

Python Constants

CW_BLUE = "#336699"
CW_TEAL = "#20b0a5"
CW_PPTX_TEAL = "#27C4CC"
CW_DARK = "#1c1c1c"
CW_BG = "#f5f7fa"
STATUS_STOCK = "#4CAF50"
STATUS_NOTSTOCK = "#D32F2F"
ZONE_COLORS = {"A": "#4CAF50", "B": "#FFC107", "C": "#FF9800", "D": "#D32F2F"}

PPTX RGBColor Constants

from pptx.util import Pt, Inches
from pptx.dml.color import RGBColor

CW_BLUE = RGBColor(0x33, 0x66, 0x99)
CW_TEAL = RGBColor(0x27, 0xC4, 0xCC)
CW_GRAY = RGBColor(0x66, 0x66, 0x66)
CW_DARK = RGBColor(0x33, 0x33, 0x33)

Google Fonts Import

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Outfit:wght@700&display=swap" rel="stylesheet">

Quick-Start Patterns

Copy-paste ready. These are the most-used patterns across the app.

/* Brand gradient button */
.btn-primary {
  background: linear-gradient(135deg, #336699 0%, #20b0a5 100%);
  color: #fff; border: none; border-radius: 6px;
  padding: 0.5rem 0.8rem; font-weight: 600; cursor: pointer;
}

/* Status badge */
.badge-stock {
  background: #4CAF50; color: #fff; border-radius: 4px;
  padding: 2px 8px; font-size: 0.7rem; font-weight: 700;
}

/* Confirmed row highlight */
.row-confirmed {
  background: #E8F5E9; border-left: 4px solid #4CAF50;
}

/* Drift row highlight */
.row-drift {
  background: #FFF3E0; border-left: 4px solid #FF9800;
}

/* Card with standard shadow */
.card {
  background: #fff; border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  padding: 1rem;
}

/* Table header */
.thead {
  background: linear-gradient(135deg, #336699 0%, #20b0a5 100%);
  color: #fff; font-weight: 600; font-size: 0.8rem;
}

Build

cd <repo>/catwing-brand
python tools/build.py                # Build and open in browser
python tools/build.py --no-open      # Build without opening
python tools/build.py --fresh-fonts  # Re-download fonts

Logo Assets

brand/logo/                       # All logo variants
  catwing_icon_48.png             # Favicon, tiny UI
  catwing_icon_128.png            # App header, sidebar
  catwing_full_600.png            # Vertical lockup (light bg)
  catwing_full_dark_600.png       # Vertical lockup (dark bg)
  catwing_horiz_800x400.png       # Horizontal lockup (light bg)
  catwing_horiz_dark_800x400.png  # Horizontal lockup (dark bg)
  catwing_wordmark_600.png        # Wordmark only
  catwing_icon.ico                # Browser favicon

UI & App Design Guide

For component specifications, interaction patterns, context-specific color palettes, and CSS implementation details, see the UI & App Design Guide.

Version

v2.0 · Generated 2026-05-07 by tools/build.py