FORGE-design-intelligence

FORGE-design-intelligence — Design Intelligence Knowledge Base

DITEMPA BUKAN DIBERI — Forged, Not Given. Kebijaksanaan: Captured from external research (ui-ux-pro-max), distilled for federation use.

Purpose

Provide agents with comprehensive design intelligence when building any UI:

• Federation cockpit surfaces
• Landing pages (arif-fazil.com, federation dashboards)
• MCP GUI applications
• Internal tools and admin panels
• External-facing web properties

When to Use

• Building any new web page or component
• Designing dashboard layouts
• Choosing color schemes for a project
• Selecting typography for a brand
• Reviewing UI for accessibility compliance
• Generating design systems for new projects
• Auditing existing UI for anti-patterns

When NOT to Use

• Token-level Tailwind config → use FORGE-tailwind-tokens
• MCP Apps iframe/CSP wiring → use FORGE-mcp-gui
• Browser automation or navigation → use agentic-web doctrine
• Runtime theme switching logic → use FORGE-tailwind-tokens

Constitutional Floor Alignment

§1 — Industry Design Rules

When building for a specific domain, apply these industry-specific patterns:

Tech & SaaS

Finance & Banking

Healthcare

E-commerce

Services

§2 — UI Style Taxonomy

79 searchable styles organized by visual family:

General Visual Styles (43 active)

Mobile-Specific (2)

Platform Design Systems (3)

Mobile Material (1)

Analytics (1)

§3 — Color Palettes by Industry

Palette Selection Rules

1. Primary — brand identity, 60% of color usage
2. Secondary — supporting, 30% of color usage
3. Accent/CTA — action color, 10% of color usage
4. Background — canvas, never pure white (#FFF) in dark themes
5. Text — must meet WCAG AA (4.5:1 contrast minimum)

Industry Palettes

§4 — Typography Pairing

Pairing Principles

• Maximum 2 font families per project (1 for display, 1 for body)
• Contrast in weight, not in style (avoid mixing script + sans-serif unless intentional)
• Test at all sizes — some fonts break at small sizes

Curated Pairings

Google Fonts Import Pattern

https://fonts.google.com/share?selection.family=Inter:wght@400;500;600;700|Playfair+Display:wght@400;600;700

§5 — Accessibility Guidelines (Non-Negotiable)

WCAG AA Compliance

Semantic HTML

• Use <button> not <div onClick>
• Use <nav>, <main>, <header>, <footer>
• Use <h1>-<h6> in order (no skipping levels)
• Use aria-label when visible text is insufficient

§6 — Anti-Patterns (What NOT To Do)

Universal Anti-Patterns

Federation-Specific Anti-Patterns

§7 — Pre-Delivery Checklist

Before shipping any UI surface:

[ ] No emojis as icons (use SVG: Heroicons, Lucide, or Phosphor)
[ ] cursor-pointer on all clickable elements
[ ] All interactive elements keyboard-accessible
[ ] Focus states visible and styled
[ ] prefers-reduced-motion respected
[ ] Text contrast meets WCAG AA (4.5:1)
[ ] Responsive: tested at 375px, 768px, 1024px, 1440px
[ ] No horizontal scroll on any viewport
[ ] Images have meaningful alt text
[ ] Forms have labels (not just placeholders)
[ ] Error states are clear and actionable
[ ] Loading states exist for async operations
[ ] Dark mode tested (if applicable)
[ ] No layout shift on load (CLS < 0.1)
[ ] Touch targets minimum 44x44px
[ ] Content reflows without clipping at narrow widths
[ ] Badges/chips don't break with long text
[ ] Interaction timing feels responsive (< 100ms feedback)

§8 — Design System Generation Pattern

When asked to generate a complete design system for a new project:

1. IDENTIFY the industry/domain
2. SELECT pattern (hero-centric, dashboard, editorial, etc.)
3. CHOOSE style family (minimalism, soft UI, dark mode, etc.)
4. PICK palette (industry-aligned, WCAG compliant)
5. PAIR typography (display + body, max 2 families)
6. DEFINE effects (shadows, transitions, hover states)
7. LIST anti-patterns to avoid (industry-specific)
8. APPLY pre-delivery checklist

Refusal Surface

• ❌ Never use pure black (#000) for text — use #18181B or similar
• ❌ Never use pure white (#FFF) for backgrounds in dark mode
• ❌ Never use font size below 14px for body text
• ❌ Never use auto-playing media without user control
• ❌ Never sacrifice accessibility for aesthetics
• ❌ Never skip WCAG AA contrast verification
• ❌ Never use more than 2 font families
• ❌ Never ship without mobile testing at 375px

Forged: 2026-08-20 by Hermes under F13 SOVEREIGN directive. Kebijaksanaan captured from external research, distilled for federation governance. DITEMPA BUKAN DIBERI — Forged, Not Given. ⚒️