> ## Documentation Index > Fetch the complete documentation index at: https://devdocs.aiconnected.ai/llms.txt > Use this file to discover all available pages before exploring further. # Content Strategist AI > Design Specifications Last Updated: January 2, 2026 Design Owner: Manual Design (Google AI Studio conversion) Table of Contents 1. Design Philosophy 2. Color... Normalized for Mintlify from `knowledge-base/aiconnected-apps-and-modules/modules/aiConnected-paper/paper-design-spec-overiew.mdx`. # Content Strategist AI ## Design Specifications **Version:** 1.0\ **Last Updated:** January 2, 2026\ **Design Owner:** Manual Design (Google AI Studio conversion) *** ## Table of Contents 1. [Design Philosophy](#design-philosophy) 2. [Color System](#color-system) 3. [Typography](#typography) 4. [Spacing & Layout](#spacing--layout) 5. [Components](#components) 6. [Screen Specifications](#screen-specifications) 7. [PDF Template Specifications](#pdf-template-specifications) 8. [Responsive Behavior](#responsive-behavior) 9. [Accessibility](#accessibility) *** ## 1. Design Philosophy ### Core Principles | Principle | Implementation | | ----------------- | ----------------------------------------------------------------------------------------- | | **Minimal** | No unnecessary decoration. Every element serves a purpose. Clean lines, ample whitespace. | | **Brand-Neutral** | Design must not clash with any agency's brand. Avoid strong stylistic choices. | | **Professional** | This is B2B SaaS for agencies. No playful elements. Sophisticated and trustworthy. | | **Flexible** | Must look good in light mode, dark mode, and with any accent color combination. | ### Design Constraints * No rounded corners greater than 8px (keeps it professional) * No gradients in UI (save for PDFs and subtle hover states) * No shadows heavier than `0 2px 8px rgba(0,0,0,0.1)` * No animations longer than 300ms * Icons: Outline style only (Lucide, Heroicons, or similar) *** ## 2. Color System ### Base Modes **Light Mode (Default)** ```css theme={null} --bg-primary: #FFFFFF; --bg-secondary: #F8F9FA; --bg-tertiary: #F0F1F3; --text-primary: #1A1A1A; --text-secondary: #6B7280; --text-tertiary: #9CA3AF; --border-default: #E5E7EB; --border-strong: #D1D5DB; ``` **Dark Mode** ```css theme={null} --bg-primary: #0F0F0F; --bg-secondary: #1A1A1A; --bg-tertiary: #262626; --text-primary: #FFFFFF; --text-secondary: #A1A1AA; --text-tertiary: #71717A; --border-default: #27272A; --border-strong: #3F3F46; ``` ### Accent Colors (Customizable) Each white-label instance has 3 accent colors: ```css theme={null} /* Default (Oxford Pierpont example) */ --accent-1: #1A1A1A; /* Primary actions, headers */ --accent-2: #6B7280; /* Secondary elements */ --accent-3: #3B82F6; /* Highlights, links */ /* Alternative example (Blue/Gold brand) */ --accent-1: #1a4a6e; /* Primary */ --accent-2: #b8860b; /* Secondary/Gold */ --accent-3: #2980b9; /* Highlight */ ``` ### Semantic Colors (Fixed) ```css theme={null} --success: #10B981; --success-bg: #ECFDF5; --warning: #F59E0B; --warning-bg: #FFFBEB; --error: #EF4444; --error-bg: #FEF2F2; --info: #3B82F6; --info-bg: #EFF6FF; ``` *** ## 3. Typography ### Font Stack ```css theme={null} /* Primary (UI) */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Secondary (Headings in PDFs) */ --font-serif: 'Playfair Display', Georgia, serif; /* Monospace (Code, data) */ --font-mono: 'JetBrains Mono', 'Fira Code', monospace; ``` ### Type Scale | Name | Size | Weight | Line Height | Use | | ---------- | ---- | ------ | ----------- | --------------------------- | | `display` | 36px | 600 | 1.2 | Page titles | | `h1` | 28px | 600 | 1.3 | Section headers | | `h2` | 22px | 600 | 1.35 | Sub-section headers | | `h3` | 18px | 600 | 1.4 | Card titles | | `h4` | 16px | 600 | 1.4 | Small headers | | `body` | 14px | 400 | 1.6 | Default text | | `body-sm` | 13px | 400 | 1.5 | Secondary text | | `caption` | 12px | 400 | 1.4 | Labels, hints | | `overline` | 11px | 500 | 1.3 | Category labels (uppercase) | *** ## 4. Spacing & Layout ### Spacing Scale ```css theme={null} --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; ``` ### Layout Widths ```css theme={null} --width-narrow: 480px; /* Forms, modals */ --width-medium: 720px; /* Content areas */ --width-wide: 1024px; /* Dashboard panels */ --width-full: 1280px; /* Maximum content width */ ``` ### Grid System * 12-column grid * Gutter: 24px * Margins: 24px (mobile), 48px (desktop) *** ## 5. Components ### 5.1 Buttons **Primary Button** ``` Background: var(--accent-1) Text: White (or contrasting) Padding: 12px 24px Border-radius: 6px Font: 14px/500 Hover: 10% darker Active: 15% darker Disabled: 50% opacity ``` **Secondary Button** ``` Background: transparent Border: 1px solid var(--border-strong) Text: var(--text-primary) Padding: 12px 24px Border-radius: 6px Hover: var(--bg-secondary) ``` **Ghost Button** ``` Background: transparent Text: var(--text-secondary) Padding: 12px 24px Hover: var(--bg-secondary) ``` ### 5.2 Inputs **Text Input** ``` Background: var(--bg-primary) Border: 1px solid var(--border-default) Border-radius: 6px Padding: 12px 16px Font: 14px Focus: border-color var(--accent-3), ring 2px var(--accent-3) at 20% opacity Error: border-color var(--error) ``` **Select/Dropdown** ``` Same as text input Chevron icon on right Dropdown: var(--bg-primary), shadow, max-height 300px ``` **Textarea** ``` Same as text input Min-height: 120px Resize: vertical only ``` ### 5.3 Cards **Default Card** ``` Background: var(--bg-primary) Border: 1px solid var(--border-default) Border-radius: 8px Padding: 24px ``` **Interactive Card (Clickable)** ``` Same as default Hover: border-color var(--border-strong), subtle lift shadow Cursor: pointer ``` ### 5.4 Tables **Client List Table** ``` Header row: Background: var(--bg-secondary) Text: var(--text-secondary), 12px, uppercase, 500 Padding: 12px 16px Body rows: Background: var(--bg-primary) Border-bottom: 1px solid var(--border-default) Padding: 16px Hover: var(--bg-secondary) Columns: Company: Primary text, 14px/500 Contact: Secondary text, 14px/400 Phone: Secondary text, 14px/400 Action: Ghost button "View Dashboard →" ``` ### 5.5 Status Badges ``` Pending: bg var(--bg-tertiary), text var(--text-secondary) Generating: bg var(--info-bg), text var(--info), animated pulse Ready: bg var(--success-bg), text var(--success) Distributed:bg var(--accent-3) at 10%, text var(--accent-3) Failed: bg var(--error-bg), text var(--error) ``` ### 5.6 Progress Indicator **Generation Steps List** ``` Container: Vertical list, gap 8px Step item (pending): Circle: 24px, border 2px var(--border-default), text var(--text-tertiary) Label: var(--text-tertiary) Step item (active): Circle: 24px, bg var(--accent-3), spinner inside Label: var(--text-primary), font-weight 500 Detail: var(--text-secondary), 13px Step item (complete): Circle: 24px, bg var(--success), checkmark icon white Label: var(--success) ``` **Progress Bar** ``` Track: height 4px, bg var(--bg-tertiary), border-radius 2px Fill: bg var(--accent-3), transition width 300ms ease ``` ### 5.7 Logo Placement **Horizontal Logo** * Max height: 40px * Used in: Navigation header **Square/Vertical Logo** * Max dimension: 48px × 48px * Used in: Mobile nav, favicon **Round Logo** * Diameter: 32px - 48px * Used in: User avatars, compact displays *** ## 6. Screen Specifications ### 6.1 Login Screen ``` Layout: Centered card on full-screen background Background: Light mode: var(--bg-secondary) Dark mode: var(--bg-primary) Card: Width: 400px Padding: 48px Content: 1. Logo (horizontal, centered, mb-32) 2. Heading "Sign In" (h2, mb-24) 3. Email input (mb-16) 4. Password input (mb-24) 5. Primary button "Sign In" (full width) 6. "Forgot password?" link (caption, centered, mt-16) ``` ### 6.2 Agency Dashboard (Client List) ``` Layout: Full width with max-width container Header: Height: 64px Left: Logo (horizontal) Right: Settings icon, User avatar dropdown Border-bottom: 1px solid var(--border-default) Main content: Padding-top: 32px Title section: h1: "Your Clients" Subtitle: "Select a client to view their dashboard" Gap: 8px Margin-bottom: 24px Client table: Full width Columns: Company (40%), Contact (25%), Phone (20%), Action (15%) Rows: Hover state, click anywhere to view dashboard ``` ### 6.3 Client Dashboard ``` Layout: Two-column (sidebar + main) Sidebar (280px fixed): Background: var(--bg-secondary) Padding: 24px Content: 1. Client logo (centered, mb-24) 2. Client name (h3, centered, mb-4) 3. Industry badge (caption, centered, mb-24) 4. Divider 5. Config summary: - Website (linked) - Related services (tags) - Default tone - Keywords (if set) 6. "Edit Settings" button (secondary, full width, bottom) Main content: Padding: 32px Header: Title: "Content Library" Right: "Generate New" primary button Margin-bottom: 24px Content list: Vertical stack, gap 16px Document card: Horizontal layout Left: Cover thumbnail (80px × 104px, aspect 8.5:11) Middle: Title (h4) Topic (body-sm, text-secondary) Timestamps (caption): "Created Jan 2 • Distributed Jan 3" Right: Status badge "..." menu (View, Download, Distribute, Delete) ``` ### 6.4 Generation Input Screen ``` Layout: Centered form, max-width 600px Card: Padding: 32px Content: 1. Heading "Create New Content" (h2, mb-8) 2. Subtitle "Fill in the details below" (body-sm, text-secondary, mb-32) Form fields (gap 24px): Topic (required): Label: "What topic should we cover?" Input: Text, placeholder "e.g., AI implementation strategies for mid-market companies" Industry: Label: "Target Industry" Input: Text (NOT dropdown), placeholder "Enter your industry" Related Services: Label: "Related Services" Input: Tag input, placeholder "Add services this content should promote" Helper: "Press Enter to add" Keywords (optional): Label: "Target Keywords" Input: Tag input, placeholder "Add keywords (optional)" Helper: "AI will research additional keywords automatically" Custom Direction (optional): Label: "What's your idea? Tell me what you want to talk about" Input: Textarea, placeholder "Provide any specific direction, angles, or points to cover..." Helper: "Leave blank to let AI determine the best approach" Tone: Label: "Content Tone" Input: 3-option selector (cards, not dropdown) - Professional (icon: briefcase) - Casual Blog (icon: message-circle) - Authoritative (icon: award) Default: Professional Anything Else (optional): Label: "Anything else we should know?" Input: Textarea, smaller Template (if applicable): Label: "Design Template" Input: Horizontal scrolling cards with template previews Shows: Template name, thumbnail Submit: Primary button "Generate Content" (full width) Helper text: "Generation typically takes 2-3 minutes" ``` ### 6.5 Generation Progress Screen ``` Layout: Centered, max-width 500px Content: 1. Heading "Creating Your Content" (h2, centered, mb-8) 2. Topic display (body, text-secondary, centered, in quotes, mb-32) Progress section: Progress bar (full width, mb-24) Progress text: "45% complete" (caption, right-aligned, mb-24) Steps list: Vertical, each step 48px height 10 steps as defined in PRD Current step: Expanded with detail text Completed steps: Collapsed, checkmark Pending steps: Collapsed, grayed out Footer: "Estimated time remaining: ~90 seconds" (caption, centered, mt-32) ``` ### 6.6 Generation Output/Preview Screen ``` Layout: Two-column (preview + actions) Left column (60%): PDF Preview: Aspect ratio container (8.5:11) Background: White Shadow: Medium Border-radius: 4px Preview controls (below): Page navigation: "< Page 1 of 7 >" Zoom controls: +/- Right column (40%): Card stack (gap 16px): Summary card: Title: "Content Summary" Content: - Document title - Section list (bulleted) - Stats: Pages, Read time Statistics card: Title: "Key Statistics Included" Content: Checklist of stats found Actions: Primary button: "Distribute" (with share icon) Secondary button: "Edit Content" (with edit icon) Ghost button: "Download PDF" (with download icon) Ghost button: "Regenerate" (with refresh icon) Quick Distribute card: Title: "Quick Distribute" Content: Platform toggle buttons - LinkedIn (toggle) - Facebook (toggle) - Twitter (toggle) - Google Business (toggle) All default to ON if OAuth configured ``` ### 6.7 Settings Screen (Agency) ``` Layout: Sidebar navigation + main content Sidebar (200px): Navigation links: - Branding (active) - Team Members - API Keys - Templates - Billing Main content: Max-width: 720px Padding: 32px Branding section: h2: "Branding" Sub-sections: 1. Logos - Horizontal logo upload (drag-drop or click) - Vertical logo upload - Round logo upload Preview of each with delete option 2. Colors - Color mode toggle: Light / Dark - Accent color 1 picker + hex input - Accent color 2 picker + hex input - Accent color 3 picker + hex input Live preview panel showing sample UI elements 3. Company Info - Company name input - Website URL input - Footer text textarea 4. Social Accounts - LinkedIn page URL - Facebook page URL - Twitter handle - Google Business URL Save button (primary, sticky footer) ``` *** ## 7. PDF Template Specifications ### 7.1 Page Dimensions ``` Size: US Letter (8.5" × 11" / 612pt × 792pt) Margins: 0 (full bleed design) Safe area: 0.5" from edges for critical content ``` ### 7.2 PDF Color Mapping ``` Client accent-1 → Primary headers, cover overlay, footer Client accent-2 → Secondary highlights, callout accents Client accent-3 → Subheadings, links, chart colors ``` ### 7.3 PDF Typography ``` Headings: Playfair Display - Document title: 42pt - Section title: 26pt - Subsection: 14pt Body: Source Sans Pro - Body text: 11pt - Captions: 9pt - Footer: 9pt Statistics: Playfair Display - Large numbers: 36pt - Labels: 9pt ``` ### 7.4 Required PDF Elements **Cover Page:** * Full-bleed background (image or color) * Title overlay bar (accent-1 background) * Document title * Subtitle * Client logo (bottom right) **Content Pages:** * Decorative left border (pattern or solid) * Section headers with underline accent * Body content area * Callout boxes (accent background) * Footer with logo and page number **Data Visualizations:** * Bar charts (horizontal) * Stat callout boxes * Comparison tables * Pull quotes *** ## 8. Responsive Behavior ### Breakpoints ```css theme={null} --mobile: 0 - 639px --tablet: 640px - 1023px --desktop: 1024px+ ``` ### Key Adaptations **Mobile:** * Single column layout * Hamburger menu * Full-width cards * Stacked form fields * Bottom sheet modals **Tablet:** * Two-column where appropriate * Sidebar collapses to icons * Tables scroll horizontally **Desktop:** * Full multi-column layouts * Expanded sidebar * Hover states enabled *** ## 9. Accessibility ### Requirements * WCAG 2.1 AA compliance * Minimum contrast ratio: 4.5:1 for text * Focus indicators on all interactive elements * Screen reader labels for icons * Keyboard navigation support * No color-only status indicators ### Focus States ```css theme={null} :focus-visible { outline: 2px solid var(--accent-3); outline-offset: 2px; } ``` *** ## Appendix: Component Checklist | Component | Status | | ------------------ | ------ | | Button (Primary) | ◯ | | Button (Secondary) | ◯ | | Button (Ghost) | ◯ | | Text Input | ◯ | | Textarea | ◯ | | Select | ◯ | | Tag Input | ◯ | | Card | ◯ | | Table | ◯ | | Status Badge | ◯ | | Progress Bar | ◯ | | Step Indicator | ◯ | | Modal | ◯ | | Dropdown Menu | ◯ | | Toggle | ◯ | | Color Picker | ◯ | | File Upload | ◯ | | Navigation Header | ◯ | | Sidebar | ◯ | | PDF Preview | ◯ | | Toast Notification | ◯ |