> **ARCHIVED:** 2025-12-22 | Design implemented in `app/registration/onboarding/`

# Accordion-Based Registration Flow Design Specification

**Document Version:** 1.0
**Last Updated:** 2025-11-06
**Figma Source:** AMS_Page5 (Node ID: 1:143)

---

## 1. Overall Page Structure

### Page Container

- **Background Color:** `#020618` (very dark navy blue)
- **Layout:** Center-aligned content with maximum width constraint
- **Content Width:** 900px (accordion container width)
- **Page Padding:** Not explicitly specified, inferred as responsive

### Header Section

- **Logo:**
  - Position: Top-left corner
  - Left offset: 76px from page edge
  - Top offset: 21px from page edge
  - Dimensions: 116px × 31px
  - Asset: AMSOIL logo image

- **Header Divider Line:**
  - Position: 69px from top
  - Width: Full page width (1194px)
  - Height: 1px
  - Color: Subtle divider (visible in design)

### Main Heading

- **Text:** "Let's get your site set up."
- **Position:** Centered, 117px from top
- **Typography:**
  - Font Family: Inter
  - Font Weight: Bold (700)
  - Font Size: 44px
  - Line Height: 0.94 (approximately 41px)
  - Letter Spacing: -0.88px (tight tracking)
  - Color: White (`#FFFFFF`)
  - Text Align: Center
  - Max Width: 821px

---

## 2. Accordion Container

### Overall Container

- **Width:** 900px (fixed)
- **Position:** Center-aligned on page
- **Top Spacing:** 189px from page top (to first accordion)
- **Spacing Between Accordions:**
  - Step 1 → Step 2: 22px gap (459px - 437px)
  - Step 2 → Step 3: 23px gap (578px - 555px)
  - Average: ~22-23px spacing

---

## 3. Accordion States & Components

### State 1: Expanded (Active Step)

**Example: Step 1 - Choose Your Subdomain**

#### Container

- **Background Color:** `#132F49` (dark blue-teal)
- **Border:** 1px solid `#38BDF8` (sky-400, cyan-blue)
- **Border Radius:** 5px
- **Height:** 248px (expanded)
- **Width:** 900px
- **Padding:** Internal spacing as specified below

#### Number Badge

- **Shape:** Circle
- **Dimensions:** 50px × 50px
- **Background:** Gradient or solid cyan-blue (matches border color)
- **Position:**
  - Left: 27px from accordion left edge (174px page position)
  - Top: 18px from accordion top
- **Number Typography:**
  - Text: "1."
  - Font Family: Inter
  - Font Weight: Bold (700)
  - Font Size: 28px
  - Line Height: 1 (28px)
  - Color: White (`#FFFFFF`)
  - Position: Centered in badge

#### Step Indicator

- **Text:** "Step 1 of 3:"
- **Position:**
  - Left: 114px from accordion left edge (261px page position)
  - Top: 45px from accordion top
- **Typography:**
  - Font Family: Inter
  - Font Weight: Regular (400)
  - Font Size: 15px
  - Line Height: 1.3 (19.5px)
  - Font Style: Italic
  - Color: `#38BDF8` (sky-400, matches border)

#### Section Title

- **Text:** "Choose Your Subdomain"
- **Position:**
  - Left: 114px from accordion left edge
  - Top: 67px from accordion top
- **Typography:**
  - Font Family: Inter
  - Font Weight: Bold (700)
  - Font Size: 28px
  - Line Height: 1 (28px)
  - Color: White (`#FFFFFF`)

#### Description Text

- **Text:** "This will be your unique web address for your Amsoil dealer site."
- **Position:**
  - Left: 114px from accordion left edge
  - Top: 102px from accordion top
- **Typography:**
  - Font Family: Inter
  - Font Weight: Regular (400)
  - Font Size: 16px
  - Line Height: 1.3 (20.8px)
  - Color: White (`#FFFFFF`)

#### Form Input (Subdomain Field)

- **Container:**
  - Width: 251px
  - Height: 38px
  - Background: White (`#FFFFFF`)
  - Border: 1px solid `#008BFF` (bright blue)
  - Border Radius: 5px
  - Position:
    - Left: 114px from accordion left edge
    - Top: 140px from accordion top

- **Placeholder/Input Text:**
  - Text: "yourname"
  - Font Family: Inter
  - Font Weight: Bold (700)
  - Font Size: 16px
  - Line Height: 1.3 (20.8px)
  - Color: `rgba(2, 6, 24, 0.64)` (dark navy with 64% opacity)
  - Padding: 12px left

- **Suffix Text (Static):**
  - Text: ".myamsoil.com"
  - Font Family: Inter
  - Font Weight: Bold (700)
  - Font Size: 16px
  - Line Height: 1.3 (20.8px)
  - Color: White (`#FFFFFF`)
  - Position: 375px from accordion left edge (appears to the right of input)

#### Helper Text

- **Text:** "3-63 characters, lowercase letters, numbers, and hyphens only"
- **Position:**
  - Left: 114px from accordion left edge
  - Top: 185px from accordion top (7px below input)
- **Typography:**
  - Font Family: Inter
  - Font Weight: Regular (400)
  - Font Size: 14px
  - Line Height: 1.3 (18.2px)
  - Font Style: Italic
  - Color: `rgba(255, 255, 255, 0.78)` (white with 78% opacity)

#### Chevron Icon (Collapse Indicator)

- **Icon:** Upward-pointing chevron
- **Dimensions:** 18px × 9px
- **Color:** Matches border color (sky-400)
- **Position:**
  - Right: 27px from accordion right edge
  - Top: 18px from accordion top
- **Asset:** SVG chevron/arrow

---

### State 2: Collapsed (Inactive/Future Steps)

**Examples: Step 2 - Business Profile, Step 3 - Review & Publish**

#### Container

- **Background Color:** `#111D31` (darker blue-gray)
- **Border:** 1px solid `#565964` (neutral gray)
- **Border Radius:** 5px
- **Height:** 96px (collapsed)
- **Width:** 900px

#### Number Badge

- **Same as expanded state:**
  - Dimensions: 50px × 50px
  - Position: 27px from left, 22px from top (centered vertically in 96px height)
  - Number styling unchanged

#### Section Title

- **Position:**
  - Left: 98px from accordion left edge (245px page position)
  - Top: 22px from accordion top (vertically centered)
- **Typography:**
  - Font Family: Inter
  - Font Weight: Bold (700)
  - Font Size: 28px
  - Line Height: 1 (28px)
  - Color: White (`#FFFFFF`)

#### Description Text (Collapsed)

- **Position:**
  - Left: 98px from accordion left edge
  - Top: 52px from accordion top
- **Typography:**
  - Font Family: Inter
  - Font Weight: Regular (400)
  - Font Size: 16px
  - Line Height: 1.3 (20.8px)
  - Color: `#FCFCFC` (off-white)

#### Chevron Icon (Expand Indicator)

- **Icon:** Downward-pointing chevron (rotated 180° from expanded state)
- **Dimensions:** 18px × 9px
- **Color:** Matches border color (gray)
- **Position:**
  - Right: 27px from accordion right edge
  - Vertically centered in 96px container
- **Asset:** Same SVG as expanded state, rotated

---

## 4. Individual Accordion Content

### Step 1: Choose Your Subdomain

**Expanded Height:** 248px

**Content Elements:**

1. Step indicator: "Step 1 of 3:"
2. Title: "Choose Your Subdomain"
3. Description: "This will be your unique web address for your Amsoil dealer site."
4. Input field with suffix
5. Helper text (validation rules)

### Step 2: Business Profile

**Collapsed Height:** 96px

**Header Content:**

- Title: "Business Profile"
- Description: "Confirm your contact information."

**Expanded Content (Not shown in Figma):**

- Expected: Form fields for business information
- Expected: Contact information inputs
- Expected: Continue/Next button

### Step 3: Review & Publish

**Collapsed Height:** 96px

**Header Content:**

- Title: "Review & Publish"
- Description: "Review your information and publish your site to make it live!"

**Expanded Content (Not shown in Figma):**

- Expected: Summary of all entered information
- Expected: Edit links for each section
- Expected: Final publish button

---

## 5. Bottom Action Button

### Primary CTA Button

- **Text:** "PUBLISH YOUR SITE"
- **Position:**
  - Centered horizontally on page
  - Top: 726px from page top
- **Dimensions:**
  - Height: 50px
  - Width: Auto (content-based with padding)
  - Actual width: ~238px
- **Styling:**
  - Background: `#6CD2FF` (bright cyan)
  - Border Radius: 15px
  - Padding: 0px horizontal (18px), 0px vertical
  - Box Shadow: None visible
- **Typography:**
  - Text: "PUBLISH YOUR SITE"
  - Font Family: Inter
  - Font Weight: Bold (700)
  - Font Size: 16px
  - Line Height: 1.15 (18.4px)
  - Letter Spacing: -0.32px
  - Text Transform: Uppercase
  - Color: `#020618` (dark navy - matches page background)
  - Text Align: Center

---

## 6. Typography System

### Font Family

- **Primary:** Inter (Google Font)
- **Weights Used:**
  - Regular (400)
  - Bold (700)
- **Styles Used:**
  - Normal
  - Italic

### Font Sizes & Usage

| Element        | Size | Weight  | Line Height | Color           |
| -------------- | ---- | ------- | ----------- | --------------- |
| Main Heading   | 44px | Bold    | 0.94        | White           |
| Section Titles | 28px | Bold    | 1.0         | White           |
| Number Badges  | 28px | Bold    | 1.0         | White           |
| Body Text      | 16px | Regular | 1.3         | White/Off-white |
| Step Indicator | 15px | Italic  | 1.3         | Sky-400         |
| Helper Text    | 14px | Italic  | 1.3         | White 78%       |
| Button Text    | 16px | Bold    | 1.15        | Dark Navy       |

---

## 7. Color Palette

### Primary Colors

- **Page Background:** `#020618` (Very Dark Navy)
- **Expanded Accordion:** `#132F49` (Dark Blue-Teal)
- **Collapsed Accordion:** `#111D31` (Darker Blue-Gray)
- **Primary Action:** `#6CD2FF` (Bright Cyan)
- **Active Border:** `#38BDF8` (Sky-400, Cyan-Blue)
- **Inactive Border:** `#565964` (Neutral Gray)

### Text Colors

- **Primary Text:** `#FFFFFF` (White)
- **Secondary Text:** `#FCFCFC` (Off-White)
- **Accent Text:** `#38BDF8` (Sky-400)
- **Muted Text:** `rgba(255, 255, 255, 0.78)` (White 78%)
- **Input Placeholder:** `rgba(2, 6, 24, 0.64)` (Dark Navy 64%)

### Input Colors

- **Input Background:** `#FFFFFF` (White)
- **Input Border:** `#008BFF` (Bright Blue)

---

## 8. Spacing & Layout

### Accordion Spacing

- **Gap Between Accordions:** 22-23px
- **Internal Padding:**
  - Left: 27px (number badge)
  - Content Left: 114px (from accordion edge)
  - Right: 27px (chevron icon)
  - Top (expanded): 18px (to number badge)
  - Top (collapsed): 22px (to number badge, vertically centered)

### Content Vertical Spacing

- Step Indicator to Title: ~22px
- Title to Description: ~35px
- Description to Input: ~38px
- Input to Helper Text: ~7px

### Button Spacing

- **Top Margin:** Variable (depends on last accordion position)
- **Bottom Margin:** Not specified (appears ~84px from bottom in 834px frame)

---

## 9. Interactive States

### Accordion States

1. **Expanded (Active):**
   - Background: `#132F49`
   - Border: `#38BDF8` (1px solid)
   - Height: Variable (248px for Step 1)
   - Chevron: Upward-pointing
   - Content: Visible

2. **Collapsed (Inactive):**
   - Background: `#111D31`
   - Border: `#565964` (1px solid)
   - Height: 96px
   - Chevron: Downward-pointing
   - Content: Hidden (only title and description visible)

3. **Completed (Not shown in Figma):**
   - Expected: Similar to collapsed but with visual indicator
   - Expected: Checkmark or different badge color
   - Expected: Ability to re-expand for editing

### Button States (Expected)

- **Default:** As specified above
- **Hover:** Expected lighter cyan or scale effect
- **Active/Pressed:** Expected darker cyan or scale down
- **Disabled:** Expected gray background, reduced opacity

### Input States (Expected)

- **Default:** White background, blue border
- **Focus:** Expected increased border width or glow
- **Error:** Expected red border and error message
- **Success:** Expected green border or checkmark
- **Disabled:** Expected gray background

---

## 10. Responsive Behavior

**Note:** The Figma design shows a fixed desktop layout (1194px frame width). No mobile or tablet variants are visible in the provided frame.

### Expected Responsive Breakpoints (Following Tailwind defaults)

- **Mobile (< 640px):**
  - Accordion width: 100% with side padding
  - Reduce font sizes proportionally
  - Stack elements more compactly
  - Button: Full width

- **Tablet (640px - 1024px):**
  - Accordion width: 90% max-width
  - Maintain most desktop spacing
  - Adjust padding

- **Desktop (> 1024px):**
  - Accordion width: 900px (as designed)
  - Centered layout
  - Full spacing as specified

### Recommended Responsive Adjustments

- Main heading: 44px → 32px (mobile)
- Section titles: 28px → 24px (mobile)
- Body text: 16px → 14px (mobile)
- Accordion padding: 27px → 16px (mobile)
- Accordion width: 900px → calc(100% - 32px) (mobile)

---

## 11. Animation Specifications (Recommended)

### Accordion Expand/Collapse

- **Property:** Height
- **Duration:** 300ms
- **Easing:** ease-in-out
- **Additional:** Fade in/out content (opacity 0 → 1)

### Chevron Rotation

- **Property:** Transform rotate
- **Duration:** 300ms
- **Easing:** ease-in-out
- **Rotation:** 0deg ↔ 180deg

### Button Hover

- **Property:** Transform scale
- **Duration:** 150ms
- **Easing:** ease-out
- **Scale:** 1 → 1.02

---

## 12. Implementation Notes

### Accordion Behavior

1. Only one accordion expanded at a time
2. Clicking collapsed accordion expands it and collapses others
3. Cannot collapse the active accordion (always one open)
4. Progress through steps sequentially
5. Completed steps can be re-opened for editing

### Form Validation

- Subdomain: 3-63 characters, lowercase, numbers, hyphens only
- Real-time validation as user types
- Show error states immediately
- Prevent progression with invalid data

### State Management

- Track current step (1, 2, or 3)
- Track completed steps
- Track form data for each step
- Enable "Review & Publish" only when all steps completed

### Accessibility

- ARIA labels for accordions
- Keyboard navigation (Tab, Enter, Space)
- Focus management when expanding/collapsing
- Screen reader announcements for state changes
- Sufficient color contrast (already met in design)

---

## 13. Assets Required

### Images

1. **AMSOIL Logo:** 116px × 31px (SVG or PNG)
   - Source: `/public/media/logos/amsoil-logo.svg` (expected)

2. **Chevron Icon:** 18px × 9px (SVG)
   - Single chevron icon, rotated via CSS
   - Color: Matches border color (dynamic)
   - Source: Create SVG or use icon library

3. **Number Badges:** 50px × 50px (SVG circles)
   - Cyan gradient or solid fill
   - Numbers rendered as text overlay
   - Alternative: CSS-only solution (border-radius: 50%)

### Icons (Optional)

- Checkmark for completed steps
- Error/warning icons for validation
- Info icons for tooltips

---

## 14. Development Checklist

### Component Structure

- [ ] AccordionContainer component
- [ ] AccordionItem component
- [ ] AccordionHeader component
- [ ] AccordionContent component
- [ ] FormInput component (subdomain)
- [ ] PrimaryButton component
- [ ] NumberBadge component

### Functionality

- [ ] Expand/collapse animation
- [ ] Single-open accordion logic
- [ ] Form validation (subdomain)
- [ ] Step progression logic
- [ ] State persistence
- [ ] Navigation to next step

### Styling

- [ ] Convert Tailwind to project's CSS system
- [ ] Implement responsive breakpoints
- [ ] Add hover/focus states
- [ ] Implement smooth transitions
- [ ] Match all color values exactly
- [ ] Match all typography exactly
- [ ] Match all spacing exactly

### Testing

- [ ] Keyboard navigation
- [ ] Screen reader compatibility
- [ ] Mobile responsiveness
- [ ] Form validation edge cases
- [ ] State management across steps
- [ ] Browser compatibility

---

## 15. Figma Node Reference

| Element            | Node ID | Notes                         |
| ------------------ | ------- | ----------------------------- |
| Page Frame         | 1:143   | AMS_Page5                     |
| Step 1 (Expanded)  | 1:145   | 248px height                  |
| Step 2 (Collapsed) | 1:157   | 96px height                   |
| Step 3 (Collapsed) | 1:165   | 96px height                   |
| Main Heading       | 1:173   | "Let's get your site set up." |
| Logo               | 1:174   | AMSOIL logo                   |
| Publish Button     | 1:176   | Primary CTA                   |

---

## 16. Questions for Stakeholders

1. **Expanded State for Steps 2 & 3:** What form fields are required in Business Profile and Review & Publish sections?
2. **Completed State Visual:** Should completed steps have a checkmark or different styling?
3. **Button Behavior:** Should the "PUBLISH YOUR SITE" button be disabled until all steps are complete?
4. **Navigation:** Can users click on future steps before completing current step?
5. **Error Handling:** What happens if API calls fail during form submission?
6. **Mobile Layout:** Should accordions stack differently on mobile, or maintain the same structure?
7. **Animation Preferences:** Are the recommended animation timings acceptable, or should they be adjusted?

---

**End of Design Specification**

This document provides pixel-perfect specifications for implementing the accordion-based registration flow. All measurements, colors, and typography have been extracted directly from Figma using the Figma MCP tools.