.avif)
Promptus Style Guide
Complete design system based on your brand requirements and migration specifications.
Brand Colors
Primary Brand Colors
#000000
Primary text, buttons, main brand
#FFFFFF
Backgrounds, inverse text
#DCFBF4
Hero section background
Accent Colors (Customer Stories)
#FFEEE5
Card backgrounds
#E5F9FF
Card backgrounds
Neutral Grays (Semantic System)
#1a1a1a
text-content-primary
#4a4a4a
text-content-secondary
#7a7a7a
text-content-tertiary
#e8e8e8
misc-divider, borders
#f8f8f8
background-subdued
Background States
#f8f8f8
Resting state
#f0f0f0
Hover state
#e8e8e8
Active/pressed state
Alpha Colors (Transparency)
rgba(255,255,255,0.9)
Backdrop blur nav
rgba(255,255,255,0.8)
Overlay backgrounds
rgba(0,0,0,0.1)
Subtle overlays
Typography System
Font Family
Primary: TT Photoroom (Regular, Medium, DemiBold, Bold, ExtraBold)
Fallback: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
Heading Scale
Heading 1200 - Hero Headlines
font-size: 72px; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em;
Heading 1100 - Major Sections
font-size: 64px; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em;
Heading 1000 - Page Headers
font-size: 56px; font-weight: 800; line-height: 1.2; letter-spacing: -0.01em;
Heading 800 - Section Headers
font-size: 48px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em;
Heading 600 - Subsection Headers
font-size: 32px; font-weight: 600; line-height: 1.3;
Body Text Scale
Body 700 - Large body text and important subtitles
font-size: 20px; font-weight: 400; line-height: 1.6;
Body 600 - Standard body text for content and descriptions
font-size: 18px; font-weight: 400; line-height: 1.6;
Component Text Scale
Component 600 - Button text, form labels
font-size: 16px; font-weight: 500; line-height: 1.5;
Component 500 - UI elements, navigation
font-size: 14px; font-weight: 500; line-height: 1.4;
Component Semi-Strong 600 - Emphasized UI text
font-size: 16px; font-weight: 600; line-height: 1.5;
Component Semi-Strong 500 - Cards, badges
font-size: 14px; font-weight: 600; line-height: 1.4;
Component Strong 500 - Important labels
font-size: 14px; font-weight: 700; line-height: 1.4;
Component 400 - Small UI text, captions
font-size: 12px; font-weight: 400; line-height: 1.4;
Spacing System
Base Spacing Units
Based on 4px grid system with semantic naming
Semantic Spacing (E-system)
Custom spacing scale used in your design system
Border Radius Scale
rounded-area-200: 8px
rounded-area-400: 16px
rounded-area-500: 24px
rounded-full: 500px
Button System
Button Variants
Button States & Transitions
All buttons use: transition: all 0.2s ease
Focus States
Focus indicators use accent color with ring effect
Layout & Grid System
Container Widths
max-w-[1200px]: Maximum content width
Responsive container with center alignment
Responsive Breakpoints
- sm: ≥ 640px (tablet)
- md: ≥ 768px (small desktop)
- lg: ≥ 1024px (desktop)
- xl: ≥ 1280px (large desktop)
Grid Patterns
Two-column layout: lg:grid-cols-2
Feature sections with image/text alternating order (lg:-order-1)
Drawer states: data-state="closed" with height transitions
Scroll Behaviors
Horizontal scroll: overflow-x-scroll snap-x snap-mandatory
Used for tool carousels and template galleries
Smooth scroll: scroll-smooth scrollbar-none
Key Components
Hero Section
Create viral social posts with AI
Capture attention and boost engagement with AI-powered social media content
Feature Block (Two-Column)
Feature Title
Descriptive text explaining the feature benefits and how it helps users achieve their goals with the platform.
Learn more →Customer Story Card
"This platform has transformed how we create content. The AI suggestions are incredibly helpful."
Navigation Header
FAQ Accordion Item
Tool/Template Card
AI Tool Name
Brief description of what this tool does and how it helps users.
Another AI Tool
Brief description of what this tool does and how it helps users.
Accessibility Guidelines
Focus Management
Focus visible: outline-2 outline-offset-2 outline-accent
Focus ring: ring-2 ring-misc-focus-indicator
All interactive elements must have clear focus indicators
ARIA Attributes
Navigation: aria-label="Open navigation"
Expanded state: aria-expanded="false"
Button role: role="button"
Screen reader only: sr-only class
Semantic HTML
Use proper semantic elements: <nav>, <header>, <main>, <section>, <footer>
Maintain proper heading hierarchy (h1 → h2 → h3)
Use <button> for interactive elements, <a> for navigation
Webflow Implementation Guide
CSS Variables Setup
Custom Code (Site Settings): Add CSS variables to your site's custom code section
:root {
--space-xs: 8px;
--space-sm: 16px;
--space-md: 24px;
--space-lg: 32px;
--space-xl: 48px;
--space-xxl: 64px;
--text-xs: 12px;
--text-sm: 14px;
--text-md: 16px;
--text-lg: 18px;
--text-xl: 24px;
--text-2xl: 32px;
--text-3xl: 48px;
--color-primary-black: #000000;
--color-light-green: #DCFBF4;
--color-accent: #1190cd;
}Section Structure Standards
✅ Correct Webflow Structure:
<section class="hero-section">
<div class="hero-container">
<div class="hero-content">
<h1 class="hero-title">Headline</h1>
<p class="hero-description">Description</p>
<a class="hero-button">CTA</a>
</div>
</div>
</section>Use min-height: auto, never fixed heights
Responsive Breakpoints (Webflow Standard)
Component Class Naming Convention
Prefix-based naming for no conflicts:
Performance Standards
- ✅ Use transform/opacity for animations only
- ✅ Touch targets minimum 44px
- ✅ Semantic HTML5 structure
- ✅ No inline styles - use classes
- ✅ Mobile-first responsive design
- ✅ Self-contained embeds (no external dependencies)
Max width: 1200px for main containers
Border radius: 24px for cards (rounded-area-500)
Button radius: 12px for more square buttons
Transitions: All 0.2s ease for standard interactions
Backdrop blur: 12px for navigation overlay
Aspect ratios: 4:3 for feature images
