# Archieapp Design System

> High-contrast utility meets soft-wash surfaces—electric blue logic anchored by deep indigo ink and rounded geometric containers.

**Source:** https://archieapp.co | **Captured:** 2026-06-06 | **Pages analyzed:** 2
**Brand layer:** Parent | **Related brands:** None

## TL;DR
Archieapp utilizes a high-contrast monochrome foundation of pure white (#ffffff) and deep indigo (#181725), punctuated by a vibrant "Signal Blue" (#1652f0) for primary actions. The system balances this technical sharpness with a palette of soft, desaturated surface washes—lavender (#e0ddea), pale mint (#e4f4f0), and buttery yellow (#f0e87f)—used to differentiate product features and resource categories. Typography relies on the geometric clarity of Inter for UI and a custom "websiteTitle" for display, while layout is defined by generous 72px vertical rhythms and a consistent 8px to 17px corner radius that softens the functional density.

## Signature DNA
1. **The Signal Blue Primary** (#1652f0 is the exclusive high-voltage accent for CTAs and critical UI indicators, standing out against a neutral or soft-wash background).
2. **Soft-Wash Categorization** (The use of #e0ddea, #e4f4f0, and #f0e87f as full-bleed section backgrounds or card surfaces to visually bucket different product modules).
3. **Geometric Softening** (A tiered radius system where interactive controls use 8px and large content containers use a distinct 17px radius, creating a "friendly utility" aesthetic).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.ink}` | `#181725` | Primary text, dark button backgrounds, borders | 365 | 0.8 | Computed Style |
| `{color.canvas}` | `#ffffff` | Page background, primary surface | 57 | 0.8 | Computed Style |
| `{color.black}` | `#000000` | High-contrast text and borders | 661 | 0.8 | Computed Style |
| `{color.neutral.soft}` | `#f0f0f0` | Secondary section backgrounds | 8 | 0.6 | Computed Style |
| `{color.border.muted}` | `rgba(0,0,0,0.08)` | Subtle card and section dividers | 12 | 0.8 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.primary}` | `#1652f0` | Primary CTA background, active text | 14 | 0.8 | Computed Style |
| `{color.primary.muted}` | `#dce7ff` | Secondary buttons, highlight backgrounds | 6 | 0.6 | Computed Style |
| `{color.surface.lavender}` | `#e0ddea` | Feature card backgrounds (Archie Rooms) | 16 | 0.8 | Computed Style |
| `{color.surface.mint}` | `#e4f4f0` | Feature card backgrounds (Archie Desks) | 6 | 0.6 | Computed Style |
| `{color.surface.yellow}` | `#f0e87f` | Accent surfaces, testimonial cards | 3 | 0.6 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| `websiteTitle` | 400 | Display and primary headings | Montserrat | Custom/Proprietary |
| `Inter` | 400, 600 | Body, UI labels, buttons | Inter (Google Fonts) | SIL Open Font |
| `Noto Sans JP` | 400 | Body text, secondary labels | Noto Sans JP | SIL Open Font |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display}` | 52px | 57.2px | normal | 400 | Hero H1 | `h1.sc-220437c1-4` |
| `{type.h2}` | 38px | 41.8px | normal | 400 | Section Headings | `h2.sc-220437c1-5` |
| `{type.h3}` | 24px | 31.2px | normal | 400 | Sub-section heads | `h3.sc-220437c1-6` |
| `{type.h4}` | 20px | 26px | normal | 400 | Card titles | `h4.sc-220437c1-7` |
| `{type.body.lg}` | 18px | 25.2px | normal | 400 | Lead paragraphs | `p.sc-220437c1-12` |
| `{type.body}` | 16px | 22.4px | normal | 400 | Default body copy | `button.sc-2a51a83d-0` |
| `{type.body.sm}` | 14px | 19.6px | normal | 400 | Footer, small labels | `p.sc-220437c1-10` |
| `{type.caption}` | 12px | 16.8px | normal | 400 | Overlines, metadata | `p.sc-220437c1-9` |

### Principles
1. **Display Weight Restraint**: Headlines use `websiteTitle` at weight 400 exclusively; authority is derived from scale (52px/38px) rather than thickness.
2. **Functional Boldness**: Weight 600 is reserved for UI emphasis (Inter) in buttons or small body labels to ensure legibility.
3. **Vertical Rhythm**: Line heights are consistently 1.1x for headings and 1.4x for body copy to maintain a compact, professional density.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 4px | 38 |
| `{space.sm}` | 8px | 57 |
| `{space.md}` | 12px | 77 |
| `{space.lg}` | 16px | 31 |
| `{space.xl}` | 24px | 22 |
| `{space.section}` | 72px | 28 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.sharp}` | 0px | Full-bleed sections | 816 occurrences |
| `{radius.sm}` | 4px | Inputs, Primary Buttons | 36 occurrences |
| `{radius.md}` | 8px | UI Controls, Small Cards | 88 occurrences |
| `{radius.lg}` | 15px | Standard Content Cards | 7 occurrences |
| `{radius.xl}` | 17px | Feature/Resource Cards | 29 occurrences |

## Components
### Tier 1: Foundational
#### Rounded Button (Primary)
**Role:** Main call-to-action (Get a demo)
**Pages observed:** Homepage, Pricing
**Spec:** Background: `#1652f0` / Text: `#ffffff` / Radius: `4px` / Padding: `0px 15px` / Font: `Inter 16px`
**States observed:** Default | Hover: captured

#### Rounded Button (Secondary)
**Role:** Alternative actions (See pricing)
**Pages observed:** Homepage, Pricing
**Spec:** Background: `#ffffff` / Text: `#181725` / Border: `1px #181725` / Radius: `4px` / Padding: `0px 15px`

### Tier 2: Patterns
#### Feature Card
**Role:** Highlighting specific product modules
**Pages observed:** Homepage, Pricing
**Spec:** Background: `#ffffff` / Border: `1px rgba(0,0,0,0.08)` / Radius: `15px` / Padding: `0px 12px 0px 4px`

#### Pricing Tier Card
**Role:** Plan selection
**Pages observed:** Pricing
**Spec:** Background: `#ffffff` / Border: `1px rgba(0,0,0,0.08)` / Radius: `4px` / Padding: `2px 8px 2px 4px`

### Tier 3: Surface-specific
#### Resource Card (Lavender)
**Role:** "Archie Rooms" or "Future of Work" content
**Pages observed:** Homepage
**Spec:** Background: `#e0ddea` / Radius: `8px` / Typography: `Inter 16px`

#### Resource Card (Yellow)
**Role:** Testimonials or "Operations" content
**Pages observed:** Homepage
**Spec:** Background: `#f0e87f` / Radius: `17px` / Padding: `2px 8px`

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1200px |
| Section Vertical Gap | 72px |
| Card Grid Gap | 24px |
| Horizontal Page Padding | 16px (Mobile), 32px (Desktop) |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Single column stack, Navigation becomes hamburger menu |
| Desktop | 1440px | 4-column feature grids, Horizontal top-nav visible |

## Imagery & decoration
Archieapp uses high-fidelity product screenshots with realistic UI shadows to demonstrate value. Decorative elements are limited to soft-wash background blocks (#e0ddea, #e4f4f0) and small, rounded iconography. The brand avoids heavy gradients, photographic backgrounds, and sharp-edged containers.

## Do's
- Use `#1652f0` for the primary "Get a demo" button.
- Apply a `17px` radius to large feature cards to maintain the brand's "soft utility" feel.
- Use `websiteTitle` for any text larger than 24px.
- Separate major sections with `72px` of vertical whitespace.
- Use the soft-wash palette (`#e0ddea`, `#e4f4f0`) to distinguish between different product modules.

## Don'ts
- Do not use `#1652f0` for body text; use `#181725` or `#000000` for legibility.
- Do not use sharp `0px` corners for interactive buttons.
- Do not mix the soft-wash colors (e.g., Lavender and Mint) within the same card.
- Do not use bold weights for display headings; keep `websiteTitle` at weight 400.
- Do not use standard blue (#0000FF) instead of the brand's Signal Blue (#1652f0).

## Quick start

```css
/* CSS Variables */
:root {
  --color-primary: #1652f0;
  --color-primary-muted: #dce7ff;
  --color-ink: #181725;
  --color-canvas: #ffffff;
  --color-surface-lavender: #e0ddea;
  --color-surface-mint: #e4f4f0;
  --color-surface-yellow: #f0e87f;
  --radius-control: 8px;
  --radius-card: 17px;
  --space-section: 72px;
}
```

## Known gaps
- Hover and Active states for secondary buttons were not explicitly captured in the computed style evidence.
- The specific font-face file for `websiteTitle` was identified but its origin (e.g., Typekit vs. Self-hosted) is not confirmed.
- Shadow tokens were not present in the provided evidence, suggesting a flat or hairline-border-only elevation system.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Main Homepage | https://archieapp.co | 1440px | 2026-06-06 |
| Pricing Page | https://archieapp.co/pricing | 1440px | 2026-06-06 |
| Mobile Homepage | https://archieapp.co | 390px | 2026-06-06 |