> **ARCHIVED:** 2025-12-22 | Design system implemented. See [STYLING_GUIDE.md](../../STYLING_GUIDE.md) for current styling reference. # AMSOIL Dealer Landing Page - Design System Documentation > **Version:** 1.0 > **Last Updated:** 2025-11-05 > **Figma Source:** Analyzed from Figma designs via MCP ## Overview This document provides comprehensive design specifications for the AMSOIL Dealer Landing Page registration and onboarding flow. The design follows a dark theme with bright cyan accents, creating a modern, professional appearance. --- ## Table of Contents 1. [Color Palette](#color-palette) 2. [Typography](#typography) 3. [Spacing & Layout](#spacing--layout) 4. [Interactive Components](#interactive-components) 5. [Page Templates](#page-templates) 6. [Accessibility Notes](#accessibility-notes) --- ## Color Palette ### Primary Colors | Name | Hex | Usage | | ---------------------- | --------- | ---------------------------------------------- | | **Background Primary** | `#020618` | Main page background, dark navy | | **Accent Primary** | `#6cd2ff` | Primary CTA buttons, active states, highlights | | **Accent Blue** | `#008bff` | Borders, links, secondary accents | | **Text Primary** | `#ffffff` | Primary text color (white) | | **Text Dark** | `#020618` | Text on light backgrounds (button text) | ### Gradient Backgrounds ```css background: linear-gradient(180deg, #1e2c42 0%, #090e1f 75.779%); ``` - Used for right-side panel backgrounds - Creates depth and visual interest ### Secondary Colors | Name | Hex | Usage | | ---------------------------- | --------------- | ---------------------------------- | | **Card Background Active** | `#132f49` | Active/selected step cards | | **Card Background Inactive** | `#111d31` | Inactive step cards | | **Border Active** | `#6cd2ff` | Active card borders | | **Border Inactive** | `#565964` | Inactive card borders | | **Success Green** | Light cyan/mint | Success checkmark icon backgrounds | ### Opacity Variations | Element | Opacity | Usage | | --------------- | --------------------------- | -------------------------- | | Muted text | `rgba(255, 255, 255, 0.78)` | Helper text, descriptions | | Very muted text | `rgba(2, 6, 24, 0.64)` | Placeholder text in inputs | --- ## Typography ### Font Families **Primary Font:** Inter (Google Fonts) - Weights: Regular (400), Bold (700), Italic - Used for: All UI elements, body text, headings, buttons **Secondary Font:** Open Sans (Google Fonts) - Weights: Bold (700) - Used for: Specific headings, emphasis - Font variation settings: `'wdth' 100` ### Font Scales #### Headings | Level | Size | Weight | Line Height | Letter Spacing | Usage | | ------ | ---- | ------------ | ----------- | -------------- | ------------------------------------------- | | **H1** | 65px | Bold | 0.94 | -1.3px | Major page headings ("Payment Successful!") | | **H2** | 44px | Regular | 1.05 | -0.88px | Section headings ("What's Happens Next?") | | **H3** | 28px | Bold/Regular | 1.25 | -0.56px | Subheadings, step titles | #### Body Text | Level | Size | Weight | Line Height | Letter Spacing | Usage | | --------------- | ---- | ------------ | ----------- | -------------- | --------------------------------------- | | **Large Body** | 22px | Regular | 1.3 | 0 | Checklist items, important descriptions | | **Medium Body** | 18px | Bold | 1.3 | 0 | Emphasized descriptions | | **Body** | 16px | Regular/Bold | 1.3 | 0 | General body text, form labels | | **Small** | 15px | Italic | 1.3 | -0.45px | Legal text, disclaimers | | **Helper** | 14px | Italic | 1.3 | 0 | Input helper text, validation messages | #### UI Elements | Element | Size | Weight | Transform | Letter Spacing | Usage | | --------------- | ---- | ------ | --------- | -------------- | ------------------------- | | **Button Text** | 16px | Bold | Uppercase | -0.32px | Primary CTA buttons | | **Step Label** | 15px | Italic | None | 0 | "Step 1 of 3:" labels | | **Step Number** | 28px | Bold | None | 0 | Numbered badges (1, 2, 3) | --- ## Spacing & Layout ### Page Structure #### Two-Column Layout (Pages 1-2, 4) ``` ┌─────────────────────────────────────────────┐ │ [Logo] │ ├─────────────────┬───────────────────────────┤ │ │ │ │ Left Column │ Right Panel │ │ (~40% width) │ (~60% width) │ │ │ [Gradient BG] │ │ - Heading │ - "What's Next" │ │ - Buttons │ - Checklist │ │ - Legal text │ │ │ │ │ └─────────────────┴───────────────────────────┘ ``` **Dimensions:** - Left column: ~478px width (40% of 1194px canvas) - Right panel: ~716px width (60% of 1194px canvas) - Diagonal separator creates visual interest #### Single-Column Layout (Pages 3, 5) ``` ┌─────────────────────────────────────────────┐ │ [Logo] │ ├─────────────────────────────────────────────┤ │ │ │ Centered Content │ │ Max width: 900px │ │ │ │ [Step Cards] │ │ [Button] │ │ │ └─────────────────────────────────────────────┘ ``` ### Component Spacing | Element | Value | Usage | | ------------------- | ------------------- | ---------------------------- | | **Logo Position** | 76px left, 21px top | AMSOIL logo positioning | | **Header Divider** | 69px from top | Horizontal line below header | | **Section Margins** | 147px left/right | Content inset on setup page | | **Button Height** | 50px | Standard CTA button height | | **Button Padding** | 18px horizontal | Internal button padding | | **Icon Size** | 23x23px | Checkmark icons | | **Step Badge Size** | 50x50px | Numbered step indicators | | **Card Gap** | Varies by context | Space between cards | ### Border Radius | Element | Radius | Usage | | ------------------ | ------ | ---------------------------- | | **Page Container** | 42px | Overall page rounded corners | | **Cards** | 5px | Step cards, form sections | | **Buttons** | 15px | Primary CTA buttons | | **Input Fields** | 5px | Text inputs | --- ## Interactive Components ### 1. OAuth Sign-In Buttons **Google OAuth Button:** ``` ┌─────────────────────────────┐ │ [G] Sign in with Google │ └─────────────────────────────┘ ``` **Apple OAuth Button:** ``` ┌─────────────────────────────┐ │ [] Sign in with Apple │ └─────────────────────────────┘ ``` **Specifications:** - Background: White (`#ffffff`) - Height: ~50px - Width: ~214-215px - Display: Inline-flex, side-by-side - Logo: Left-aligned icon - Text: Black, standard weight - Border radius: Subtle rounding - Layout: Horizontal arrangement with spacing between buttons **States:** - Default: White background - Hover: Subtle shadow or background change (not specified in static design) - Focus: Outline for accessibility --- ### 2. Primary CTA Button **Visual Example:** ``` ┌──────────────────────────────────┐ │ CONTINUE TO SETUP → │ └──────────────────────────────────┘ ``` **Specifications:** - Background: `#6cd2ff` (bright cyan) - Text Color: `#020618` (dark navy) - Font: Inter Bold, 16px, uppercase - Letter spacing: -0.32px - Height: 50px - Padding: 18px horizontal - Border radius: 15px - Right arrow icon: 9x15px, rotated 90° - Display: Flex with gap between text and icon **Variants:** - "CONTINUE TO SETUP" - "GET STARTED" (with arrow) - "PUBLISH YOUR SITE" **States:** - Default: Cyan background - Hover: Slightly brighter or darker (not specified) - Active: Pressed state (not specified) - Disabled: Reduced opacity (not specified) --- ### 3. Checklist Items **Visual Example:** ``` ✓ Authenticate with Google OAuth ✓ Complete payment via Stripe ✓ Set up your dealer page ✓ Publish your site and go live! ``` **Specifications:** - Checkmark icon: Cyan/blue, 23x23px - Text: White, 22px, Inter Regular - Line height: 1.3 - Vertical spacing: ~37px between items - Layout: Icon on left, text aligned to right **Icon Asset:** - SVG checkmark in circle - Color: Matches accent blue (`#6cd2ff` or similar) --- ### 4. Step Cards (Accordion Style) **Active Step (Expanded):** ``` ┌────────────────────────────────────────────┐ │ [1] Step 1 of 3: ︿ │ │ Choose Your Subdomain │ │ This will be your unique web... │ │ │ │ [yourname] .myamsoil.com │ │ 3-63 characters, lowercase... │ └────────────────────────────────────────────┘ ``` **Inactive Step (Collapsed):** ``` ┌────────────────────────────────────────────┐ │ [2] Business Profile ﹀ │ │ Confirm your contact information. │ └────────────────────────────────────────────┘ ``` **Specifications - Active State:** - Background: `#132f49` (darker blue) - Border: 1px solid `#6cd2ff` (cyan) - Border radius: 5px - Padding: Generous internal padding - Number badge: Cyan circle, 50px diameter, white number - Title: Bold, 28px - Chevron: Up arrow, positioned top-right **Specifications - Inactive State:** - Background: `#111d31` (dark blue-gray) - Border: 1px solid `#565964` (gray) - Border radius: 5px - Padding: Compact, no expanded content - Number badge: Cyan circle, 50px diameter, white number - Title: Bold, 28px - Description: Regular, 16px, lighter color - Chevron: Down arrow, positioned top-right **States:** - Expanded: Active styling, content visible - Collapsed: Inactive styling, content hidden - Hover: Subtle background change (not specified) --- ### 5. Text Input Fields **Subdomain Input:** ``` ┌────────────────────┐ │ yourname │ .myamsoil.com └────────────────────┘ ``` **Specifications:** - Background: White (`#ffffff`) - Border: 1px solid `#008bff` (blue) - Border radius: 5px - Height: 38px - Width: 251px - Text: Inter Bold, 16px - Placeholder: `rgba(2, 6, 24, 0.64)` - Suffix text: ".myamsoil.com" displayed outside input **Helper Text:** - Font: Inter Italic, 14px - Color: `rgba(255, 255, 255, 0.78)` - Text: "3-63 characters, lowercase letters, numbers, and hyphens only" - Position: Below input field --- ### 6. Success Icon **Visual:** ``` ┌─────┐ │ ✓ │ └─────┘ ``` **Specifications:** - Size: 96x96px (outer circle) - Background: Light cyan/mint gradient circle - Checkmark: White or dark, 69x69px icon centered - Used on: Payment success pages - Style: Circular badge with checkmark --- ### 7. Loading Indicator **Progress Bar:** ``` ┌──────────────────┐ │████████░░░░░░░░░░│ └──────────────────┘ ``` **Specifications:** - Width: 281px - Height: 29px - Style: Rounded progress bar - Fill color: Cyan/green gradient - Background: Dark gray - Animation: Fills from left to right **Context:** - Shown during account setup - Accompanied by text: "Setting up your account..." - Helper text: "THIS USUALLY TAKES A FEW SECONDS" --- ## Page Templates ### Page 1: Sign-In Page **Purpose:** Initial landing page with subscription plan and OAuth sign-in **Layout:** Two-column **Left Column:** - Heading: "Subscribe to the [Starter Plan]" - "Starter Plan" in cyan accent color - 65px, bold - Subheading: "Sign in to Continue" (28px) - Google OAuth button - Apple OAuth button - Legal disclaimer text (italic, 15px, bottom) **Right Panel:** - Gradient background - Heading: "What's Happens Next?" (44px) - Checklist with 4 items: 1. Authenticate with Google OAuth 2. Complete payment via Stripe 3. Set up your dealer page 4. Publish your site and go live! **Visual Notes:** - Diagonal separator between columns - Polygon/arrow graphic pointing from left to right --- ### Page 2: Payment Success (Option 1) **Purpose:** Confirmation after successful payment, prepares user for setup **Layout:** Two-column **Left Column:** - Success icon (checkmark in circle) - Heading: "Payment Successful!" (65px, bold) - Subheading: "Welcome to AMSOIL Dealer Pages!" (28px) **Right Panel:** - Gradient background - Heading: "What's Happens Next?" (44px) - Checklist with 4 items: 1. Choose your subdomain 2. Set up your business profile 3. Customize your page content (optional) 4. Publish your site and go live! - CTA button: "CONTINUE TO SETUP" with right arrow --- ### Page 3: Setup Wizard **Purpose:** Multi-step setup process with accordion cards **Layout:** Single-column, centered **Header:** - Heading: "Let's get your site set up." (44px, bold, centered) **Content Area (900px max width):** **Step 1 Card (Active/Expanded):** - Number badge: [1] - Label: "Step 1 of 3:" (italic, cyan) - Title: "Choose Your Subdomain" (28px, bold) - Description: "This will be your unique web address..." - Input field: "yourname" + ".myamsoil.com" - Helper text: Character requirements - Chevron: Up (expanded state) **Step 2 Card (Inactive/Collapsed):** - Number badge: [2] - Title: "Business Profile" (28px, bold) - Description: "Confirm your contact information." - Chevron: Down (collapsed state) **Step 3 Card (Inactive/Collapsed):** - Number badge: [3] - Title: "Review & Publish" (28px, bold) - Description: "Review your information and publish..." - Chevron: Down (collapsed state) **Footer:** - CTA button: "PUBLISH YOUR SITE" (centered) --- ### Page 4: Payment Success (Option 2 - Centered) **Purpose:** Alternative success page with centered layout **Layout:** Single-column, centered **Content:** - Success icon (checkmark in circle, centered) - Heading: "Payment Successful!" (65px, bold, centered) - Subheading: "Welcome to AMSOIL Dealer Pages!" (28px, centered) - Confirmation text: "Your subscription plan has been confirmed." (18px, bold) - CTA button: "GET STARTED" with right arrow (centered) --- ### Page 5: Loading/Processing **Purpose:** Interim page shown while account is being set up **Layout:** Single-column, centered **Content:** - Loading progress bar (animated) - Heading: "Setting up your account..." (65px, bold, centered) - Helper text: "THIS USUALLY TAKES A FEW SECONDS" (18px, bold) - Description: "We're processing your payment and creating your dealer account." (28px, centered) **Visual Notes:** - No buttons (passive state) - Progress bar animates automatically - Auto-redirects when complete --- ## Accessibility Notes ### Color Contrast **WCAG 2.1 Compliance:** - ✅ White text on `#020618` background: **16.97:1** (Passes AAA) - ✅ White text on `#1e2c42` background: **6.89:1** (Passes AA) - ✅ Dark text (`#020618`) on cyan (`#6cd2ff`): **9.12:1** (Passes AAA) - ⚠️ Cyan text on dark blue gradients: Verify contrast ratios - ⚠️ Gray borders (`#565964`) on dark backgrounds: May need adjustment for visibility ### Keyboard Navigation **Required Behaviors:** - OAuth buttons: Focusable, activatable with Enter/Space - Primary CTA buttons: Focusable, activatable with Enter/Space - Text inputs: Focusable, standard keyboard input - Step cards: Focusable, expandable with Enter/Space - Focus indicators: Visible outline on all interactive elements ### Screen Reader Support **Semantic HTML Requirements:** - Use `