adsgo-new-ui-skill

name: adsgo-new-ui-skill description: Use this skill to build any UI for AdsGo.ai — the AI-powered ad management SaaS platform. Invoke immediately whenever the user wants to create, modify, or review any visual element: pages, dashboards, campaign tables, AI analysis panels, optimization consoles, modals, drawers, sidebars, forms, or interactive states. Trigger even when the user just mentions AdsGo, says "make it look like the app", or asks for a component that "matches the design". This skill provides the complete 2026 AdsGo design system: Outfit font, #7033F5 purple primary, pixel-perfect component specs, CSS variables, and AI-specific components unique to AdsGo (Smart Optimization Console, AI Analysis Panel, budget allocation cards). Do not attempt AdsGo UI work without this skill — the brand is distinctive and must stay consistent. Also trigger for: Ads Manager, Campaign Table, Performance Overview, Optimization Hub, Brand Performance Goal, onboarding guides, and any screen shown in the AdsGo product.

AdsGo.ai UI/UX Design System (2026)

Read this file fully before writing any code. Then consult the reference files below as needed — they contain complete CSS code, HTML patterns, and detailed specs.

MANDATORY — Primary Brand Rules

These three rules are absolute and apply to EVERY AdsGo page or component. Never deviate.

1. Font: Outfit (Google Fonts) — Every single text element uses font-family: 'Outfit', sans-serif. No exceptions, no fallback mixing. Import: @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap');

2. Primary Color: #7033F5 — This purple is the core identity of AdsGo. It is used for:

   • All primary buttons (background: #7033F5)
   • Active navigation items (left accent bar 4px solid #7033F5 + bg #F5F1FF)
   • Toggle ON state (background: #7033F5)
   • Input focus border (border-color: #7033F5)
   • Active pagination page (background: #7033F5)
   • Action icon hover (color: #7033F5)
   • AI/sparkle accents (color: #7033F5)
   • Links and interactive text highlights
   • Hover dark variant: #5221CF

3. Pill-shaped buttons — All buttons use border-radius: 9999px. Never use rectangular or slightly rounded buttons. This is AdsGo's signature look.

If any generated code uses a different font, a different primary color, or rectangular buttons — it is WRONG and must be corrected.

Reference Files

1. Brand Identity

Purple Color System (core of AdsGo's visual identity)

Neutral Colors

Semantic / Status Colors

AI Console Colors (blue tint — NOT purple)

Note: The Smart Optimization Console uses blue tints, not purple. This is intentional — it visually separates the AI optimization panel from the rest of the purple brand UI.

2. Typography Scale

Font: Outfit (mandatory for ALL text). No other font is used anywhere in AdsGo.

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap');
* { font-family: 'Outfit', sans-serif; }

3. Layout Structure

┌──────────────────────────────────────────────────────────┐
│  SIDEBAR (232px)  │          HEADER (64px)               │
│                   │──────────────────────────────────────│
│  Logo (68px)      │                                      │
│  Brand Selector   │         MAIN CONTENT AREA            │
│  (54px)           │         margin-left: 232px           │
│  ─────────────    │         padding: 24px                │
│  Nav items        │                                      │
│  (48px each)      │                                      │
│  ─────────────    │                                      │
│  Upgrade Card     │                                      │
└──────────────────────────────────────────────────────────┘

Sidebar: 232px fixed, white, border-right: 1px solid #F1F5F9. Read references/layout.md for the full CSS shell and internal layout.

Header: 64px sticky, white, border-bottom: 1px solid #F1F5F9. Contains breadcrumbs left, timezone pill + bell + user avatar right.

Active nav item: background #F5F1FF + left accent bar 4px solid #7033F5 with border-radius: 0 9999px 9999px 0. This is mandatory — it's the signature AdsGo nav style.

4. CSS Variables (MUST include in every page)

:root {
  /* PRIMARY — the #7033F5 purple that defines AdsGo */
  --color-primary: #7033F5;
  --color-primary-dark: #5221CF;
  --color-primary-bg: #F5F1FF;
  --color-primary-bg-mid: #EDE8FF;
  --color-primary-text: #5E26D6;
  --color-primary-text-dark: #501DC7;
  --color-text-dark: #1D293D;
  --color-text-main: #314158;
  --color-text-body: #45556C;
  --color-text-muted: #62748E;
  --color-text-placeholder: #90A1B9;
  --color-border: #F1F5F9;
  --color-border-medium: #E2E8F0;
  --color-bg: #FFFFFF;
  --color-bg-soft: #F9FAFC;
  --color-bg-page: #F9F9F9;
  --color-bg-panel: #F7F8FA;
  --color-danger: #FB2C36;
  --color-danger-bg: #FFEDEF;
  --color-danger-border: #D4004A;
  --color-success: #00941E;
  --color-success-bg: #E1FAE1;
  --color-warning: #FF8E2B;
  --color-warning-bg: #FFF5E6;
  --color-warning-bg-light: #FFF3E9;
  --color-blue-tint: #F2F8FF;
  --color-blue-tint-deep: #E0EEFF;
  --font-main: 'Outfit', sans-serif;
}

5. Component Quick Reference

These components appear across the product. Detailed CSS is in references/components.md.

6. Status Tags

Status tags are pill-shaped badges used extensively in campaign tables.

All tags: border-radius: 25px, padding: 1px 8px, font-size: 12px, font-weight: 500.

7. Data Display Quick Reference

Full patterns with HTML + CSS are in references/data-display.md.

KPI metric card: white card, label 11px/600/uppercase/#90A1B9, value 28px/700/#1D293D, trend pill (up = green #D1FAE5, down = red #FEF2F2).

Campaign table row height: 120px (accommodates multi-line campaign info). Header bg #F8FAFC. See references/data-display.md for column widths and expanded adset rows.

Today's stats: 4-metric row (Spend, Revenue, ROAS, Conversions) with vertical separators 1px #E2E8F0.

Pagination: Active page background: #7033F5, border-radius: 8px, white text.

8. AI Component Quick Reference

These are unique to AdsGo. Full patterns in references/ai-components.md.

AI Analysis Panel: Header with gradient bg linear-gradient(135deg, #FAFAFA, #F5F1FF), sparkle icon + title. Three insight types: highlight (green left border), optimize (purple left border), risk (amber left border).

Smart Optimization Console (337×483px): Background gradient linear-gradient(#F1F7FF, #FFFFFF) — blue tint, not purple. Border 1px solid #F5F5F5. Shadow -2px 2px 15px rgba(14,0,45,0.06). Two modes — Recommendations and Auto-apply: inactive #F2F8FF, active gradient linear-gradient(#3080E3, #285388) with stroke #E7F0FF.

AI Pending state: Purple lock icon + countdown ("06h 06m remaining") + timeline steps.

9. Spacing & Radius Reference

10. Interaction States

11. Design Principles

These explain why the rules exist — understanding them helps make better design decisions beyond what's listed here.

#7033F5 purple IS AdsGo: The entire product identity is built around this specific purple. It is used for every primary action, every active state, every toggle, every focus ring. When a user sees #7033F5, they know "this is interactive / selected". Never substitute with blue, indigo, or any other purple shade for primary elements. The dark variant #5221CF is ONLY for hover/pressed states of elements already using #7033F5.

Outfit everywhere: The brand voice lives in the font. Every heading, every body text, every label, every button — all use Outfit. Mixing in system fonts, Inter, or any other font immediately breaks the AdsGo look. Always import Outfit from Google Fonts with weights 400, 500, 600, 700.

Purple color hierarchy:

• #7033F5 → interactive elements (buttons, toggles, links, active indicators)
• #F5F1FF → active background (nav items, icon hover areas)
• #EDE8FF → active tab backgrounds, pending badges
• #5E26D6 / #501DC7 → purple text on light purple backgrounds
• #5221CF → hover/pressed states only

Pill radius on buttons: Pill-shaped buttons (border-radius: 9999px) give AdsGo its friendly, modern identity. Rectangular buttons look enterprise-generic and break the visual language.

Light purple bg on active items (#F5F1FF): This soft background + the accent bar form a two-signal active state — legible at a glance without being harsh.

Trend colors (green/red): Performance metrics always use green (#00941E) for positive, red (#FB2C36) for negative. Never use purple for trend indicators — purple is reserved for brand/navigation.

12. Building a New Page — Checklist

1. Import Outfit font from Google Fonts (weights 400, 500, 600, 700) and set as font-family on * or body
2. Include CSS variables from Section 4 — especially --color-primary: #7033F5
3. Read references/layout.md for the page shell (sidebar + header + content area)
4. Mark the correct sidebar nav item active (left bar 4px solid #7033F5 + bg #F5F1FF)
5. Use #7033F5 (via var(--color-primary)) for all primary buttons, toggles, focus states, and active indicators
6. Add platform tabs if the page handles campaign/ad data (Meta / Google / TikTok)
7. Build the content using the relevant reference files
8. Map every text element to the typography scale in Section 2
9. Apply spacing from Section 9
10. Add hover + active states from Section 10 — button hover uses #5221CF
11. Handle all data states: loading, empty, error, demo, AI-pending (see references/data-display.md)
12. Verify: All buttons are pill-shaped (border-radius: 9999px), all text is Outfit, primary color is #7033F5

13. Page Catalog (Figma Verified)