---
name: AOPN Form Systems
colors:
  surface: '#faf8ff'
  surface-dim: '#d9d9e5'
  surface-bright: '#faf8ff'
  surface-container-lowest: '#ffffff'
  surface-container-low: '#f3f2fe'
  surface-container: '#ededf9'
  surface-container-high: '#e8e7f3'
  surface-container-highest: '#e2e1ed'
  on-surface: '#1a1b23'
  on-surface-variant: '#434655'
  inverse-surface: '#2e3039'
  inverse-on-surface: '#f0f0fb'
  outline: '#747686'
  outline-variant: '#c4c5d7'
  surface-tint: '#2151da'
  primary: '#0037b0'
  on-primary: '#ffffff'
  primary-container: '#1d4ed8'
  on-primary-container: '#cad3ff'
  inverse-primary: '#b7c4ff'
  secondary: '#5e5e5e'
  on-secondary: '#ffffff'
  secondary-container: '#e2e2e2'
  on-secondary-container: '#646464'
  tertiary: '#7f2500'
  on-tertiary: '#ffffff'
  tertiary-container: '#a73400'
  on-tertiary-container: '#ffc9b7'
  error: '#ba1a1a'
  on-error: '#ffffff'
  error-container: '#ffdad6'
  on-error-container: '#93000a'
  primary-fixed: '#dce1ff'
  primary-fixed-dim: '#b7c4ff'
  on-primary-fixed: '#001551'
  on-primary-fixed-variant: '#0039b5'
  secondary-fixed: '#e2e2e2'
  secondary-fixed-dim: '#c6c6c6'
  on-secondary-fixed: '#1b1b1b'
  on-secondary-fixed-variant: '#474747'
  tertiary-fixed: '#ffdbcf'
  tertiary-fixed-dim: '#ffb59c'
  on-tertiary-fixed: '#390c00'
  on-tertiary-fixed-variant: '#832700'
  background: '#faf8ff'
  on-background: '#1a1b23'
  surface-variant: '#e2e1ed'
typography:
  h1:
    fontFamily: Inter
    fontSize: 32px
    fontWeight: '700'
    lineHeight: '1.2'
    letterSpacing: -0.02em
  h2:
    fontFamily: Inter
    fontSize: 24px
    fontWeight: '600'
    lineHeight: '1.3'
    letterSpacing: -0.01em
  h3:
    fontFamily: Inter
    fontSize: 20px
    fontWeight: '600'
    lineHeight: '1.4'
    letterSpacing: -0.01em
  body-regular:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: '400'
    lineHeight: '1.5'
    letterSpacing: '0'
  body-medium:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: '500'
    lineHeight: '1.5'
    letterSpacing: '0'
  button:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: '500'
    lineHeight: '1'
    letterSpacing: 0.01em
  caption:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: '400'
    lineHeight: '1.4'
    letterSpacing: '0'
rounded:
  sm: 0.25rem
  DEFAULT: 0.5rem
  md: 0.75rem
  lg: 1rem
  xl: 1.5rem
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  xxl: 48px
---

## Brand & Style

The design system is rooted in a **Corporate Modern** aesthetic, specifically tailored for the Association of Outsourcing Professionals of Nigeria. It prioritizes clarity, efficiency, and a sense of institutional reliability. The visual language balances the high-utility feel of modern SaaS platforms like Airtable with the formal authority required by a professional association. 

The emotional response should be one of "effortless productivity." By utilizing generous whitespace and a restricted color palette, the interface minimizes cognitive load during complex form-building tasks. The style employs subtle depth and precise alignment to guide users through the workflow of creating, managing, and analyzing data.

## Colors

This design system utilizes a high-contrast palette to establish clear hierarchy. **Deep Blue (#1D4ED8)** serves as the primary action color, used for primary buttons, active states, and key navigational elements. **Black (#000000)** is reserved for high-level headings and critical UI text to ensure maximum legibility.

**Gold/Amber (#F59E0B)** is the strategic accent color, used sparingly to highlight premium features, notification badges, or "pro" status indicators. The foundation of the UI rests on a **Light Grey (#F5F5F5)** background, which allows the **White (#FFFFFF)** cards and workspace areas to pop, creating a clear distinction between the application shell and the content creation zone.

## Typography

The design system exclusively uses **Inter** to leverage its exceptional readability and systematic feel. The type hierarchy is strictly enforced to ensure complex form configurations remain scannable. 

Headings (H1-H3) use tighter letter-spacing and heavier weights to anchor sections. Body text is set with a generous line height for comfortable reading of instructions and labels. Button labels utilize a "Medium" weight and slightly smaller font size for a compact, professional appearance. Labels for form fields should always use the `body-medium` or `caption` styles to differentiate them from user-entered data.

## Layout & Spacing

The design system operates on an **8px linear scale**, ensuring consistent vertical and horizontal rhythm. The layout uses a **12-column fluid grid** for the main dashboard views, allowing for flexible arrangements of form analytics and management cards.

For the Form Builder interface, a split-pane model is preferred: a fixed-width left sidebar for form elements (approx. 280px), a flexible center canvas for the form preview, and a fixed-width right sidebar for property configurations (approx. 320px). This "bounded" fluidity ensures that the builder tool feels stable while maximizing screen real estate on various monitor sizes.

## Elevation & Depth

This design system uses **Ambient Shadows** and **Tonal Layers** to create a structured hierarchy without visual clutter. 

- **Level 0 (Background):** The Light Grey (#F5F5F5) canvas.
- **Level 1 (Cards/Sidebar):** White surfaces with a very soft, diffused shadow (`0px 4px 12px rgba(0, 0, 0, 0.05)`) and a 1px Soft Grey (#E5E7EB) border.
- **Level 2 (Modals/Dropdowns):** Elevated White surfaces with a more pronounced shadow (`0px 10px 25px rgba(0, 0, 0, 0.1)`) to pull them forward in the visual stack.

Interactive elements like form fields should appear "flat" in their default state and use a Primary Blue border on focus to indicate depth and activity.

## Shapes

The design system adopts a **Rounded** shape language to soften the corporate aesthetic and make the tool feel modern and accessible. 

Containers and primary cards utilize the `rounded-xl` (1.5rem / 24px) setting for a distinct SaaS look. Smaller interactive components like buttons and input fields use the `base` (0.5rem / 8px) radius to maintain a professional, structured feel. This contrast between large container curves and precise internal element corners creates a sophisticated, layered visual style.

## Components

### Buttons
- **Primary:** Solid Deep Blue background, white text, 8px border radius.
- **Secondary:** White background, 1px Soft Grey border, Deep Blue text.
- **Ghost:** No background or border, Deep Blue text, used for less frequent actions like "Cancel."

### Form Elements
- **Input Fields:** White background, 1px Soft Grey border, Inter Body Regular text. On focus, the border transitions to Deep Blue with a 2px outer glow of the same color at 10% opacity.
- **Checkboxes/Radios:** Deep Blue for the active state. Circular for radios, 4px rounded squares for checkboxes.

### Cards & Containers
- **Main Cards:** White background, 24px corner radius, soft 5% opacity shadow. Used for form summaries, individual question blocks in the builder, and data widgets.

### Specialized Form Builder Components
- **Drag Handle:** A small 6-dot icon (⋮⋮) in Soft Grey, appearing on hover to indicate question reordering.
- **Question Type Chips:** Small, light grey badges with icons (e.g., "Short Text," "Multiple Choice") used in the sidebar for quick selection.
- **Drop Zone:** A dashed Soft Grey border with a light blue tint on hover, indicating where a new form element can be placed.