# Itsaspen Design System

> High-contrast monochrome utility punctuated by a single high-voltage lime green for conversion.

**Source:** https://itsaspen.com | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Itsaspen utilizes a stark, high-contrast foundation of pure black (#000000) and white (#ffffff) to establish a professional, enterprise-grade atmosphere. The system is anchored by **Raleway**, a geometric sans-serif used across all typographic hierarchies with a preference for medium (500) and bold (700) weights in headings. The brand's primary "voltage" is delivered through a single chromatic accent: a vibrant lime green (#7ecb26) reserved strictly for primary calls to action and contact triggers. Layouts are characterized by generous vertical spacing and sharp-edged containers, occasionally softened by subtle 6px to 10px radii on interactive controls.

## Signature DNA
1. **Lime-on-White Contrast** (The use of #7ecb26 for primary buttons against a white #ffffff canvas creates a high-visibility, though low-contrast, focal point for conversion. Seen on `itsaspen.com` and `itsaspen.com/about`).
2. **Raleway Geometric Stack** (Consistent use of Raleway across all roles, specifically utilizing 32px-39px scales for section headers to maintain a modern, tech-consulting aesthetic. Seen across all analyzed pages).
3. **Monochrome Surface Alternation** (Sections alternate between pure white #ffffff, soft gray #fafafa, and deep black #000000 to define content boundaries without decorative borders. Seen on `itsaspen.com`).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.canvas}` | `#ffffff` | Primary page background and button text | 55 | 0.8 | computed_style |
| `{color.ink}` | `#000000` | Primary text and dark section backgrounds | 103 | 0.8 | computed_style |
| `{color.surface-soft}` | `#fafafa` | Alternating section background | 6 | 0.7 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.primary}` | `#7ecb26` | Primary CTA background | 3 | 0.6 | computed_style |
| `{color.accent-deep}` | `#008134` | Decorative text / secondary accent | 3 | 0.6 | computed_style |

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|-----------------------|---------|
| Raleway | 400, 500, 700 | All roles | Raleway (Google Fonts) | SIL Open Font |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display}` | 39px | 38.6px | normal | 500 | Hero/Main Headings | `h2` |
| `{type.heading-lg}` | 32px | 43.0px | normal | 500 | Section Headings | `h2` |
| `{type.heading-lg-bold}` | 32px | 43.0px | normal | 700 | Emphasized Headings | `strong` |
| `{type.heading-md}` | 29px | 39.0px | normal | 500 | Sub-section titles | `h3` |
| `{type.heading-sm}` | 26px | 35.0px | normal | 500 | Component titles | `h4` |
| `{type.body-lg}` | 22px | 29.1px | normal | 400 | Lead paragraph | `p.sqsrte-large` |
| `{type.body}` | 16px | 30.0px | normal | 400 | Standard running text | `p` |
| `{type.button}` | 16px | normal | normal | 500 | CTA labels | `a.sqs-block-button` |
| `{type.body-sm}` | 14px | 18.7px | normal | 400 | Small descriptors | `p.sqsrte-small` |

### Principles
1. **Heading Weight Dominance:** Headings primarily use weight 500 (Medium) or 700 (Bold) to create clear hierarchy against 400 weight body text.
2. **Tight Display Leading:** Large display type (39px) uses a line-height nearly equal to its font size (38.6px) for a compact, modern look.
3. **Generous Body Leading:** Standard body text (16px) uses a 30px line-height to maximize readability in content-heavy sections.

## Spacing
**Base unit:** 4px (inferred)
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 14px | 5 |
| `{space.sm}` | 16px | 15 |
| `{space.md}` | 18px | 6 |
| `{space.lg}` | 32px | 5 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.none}` | 0px | Section containers, sharp cards | `Surface` component |
| `{radius.sm}` | 6px | Form inputs | `input` selector |
| `{radius.md}` | 6.4px | Primary and secondary buttons | `Rounded Button` component |
| `{radius.lg}` | 10px | Specialized controls | `control` role |

## Elevation
Not captured in source (System uses flat design with no observed box-shadows on standard components).

## Components
### Tier 1: Foundational

#### Surface
**Role:** Sectional container and background definition.
**Pages observed:** `itsaspen.com`, `itsaspen.com/about`
**Spec:** Background `{color.canvas}` (#ffffff) or `{color.ink}` (#000000) / Text `{color.ink}` (#000000) or `{color.canvas}` (#ffffff) / Radius 0px.
**States observed:** Default: captured | Hover: not captured.

#### Primary Button
**Role:** Main site conversion (Contact, Talk to an expert).
**Pages observed:** `itsaspen.com`, `itsaspen.com/about`
**Spec:** Background `{color.primary}` (#7ecb26) / Text `{color.canvas}` (#ffffff) / Radius 6.4px / Padding 14.4px 17.6px / Typography `{type.button}` (16px/500).
**States observed:** Default: captured | Hover: not captured.

### Tier 2: Patterns

#### Secondary Button
**Role:** Alternative actions on dark or photographic backgrounds.
**Pages observed:** `itsaspen.com`, `itsaspen.com/about`
**Spec:** Background `rgba(255, 255, 255, 0.95)` / Text `{color.ink}` (#000000) / Radius 6.4px / Padding 14.4px 17.6px.
**States observed:** Default: captured | Hover: not captured.

#### Ghost Button
**Role:** De-emphasized or utility actions.
**Pages observed:** `itsaspen.com`
**Spec:** Background `{color.canvas}` (#ffffff) / Text `rgba(0, 0, 0, 0.31)` / Radius 10px / Border 0px.
**States observed:** Default: captured.

### Tier 3: Surface-specific

#### Content Card
**Role:** Feature highlights (e.g., Enterprise Cloud Migration).
**Pages observed:** `itsaspen.com`
**Spec:** Background `{color.canvas}` (#ffffff) / Border 1px solid `{color.surface-soft}` (#fafafa) / Radius 0px / Padding 32px.
**States observed:** Default: captured.

#### Hero Section
**Role:** Page entry point with photographic background.
**Pages observed:** `itsaspen.com`
**Spec:** Background (Image) / Text `{color.canvas}` (#ffffff) / Heading `{type.display}` (39px).
**States observed:** Default: captured.

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1200px (inferred from desktop screenshots) |
| Section Padding (Vertical) | 80px - 100px |
| Column Gap | 32px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger; buttons expand to full width; font sizes scale down (e.g., 39px headings become ~32px). |
| Desktop | 1440px | Multi-column grid (3-up for feature cards); horizontal top navigation. |

## Imagery & decoration
The brand uses high-quality environmental photography (landscapes, infrastructure) as hero backgrounds, often overlaid with white text. Icons are thin-stroke, lime-green (#7ecb26) line art. The brand avoids heavy drop shadows and complex gradients.

## Do's
- Use `#7ecb26` exclusively for primary action buttons.
- Maintain a sharp `0px` radius for all section containers.
- Pair **Raleway 500** headings with **Raleway 400** body text.
- Use `#fafafa` for subtle background differentiation between white sections.
- Ensure all text on dark backgrounds is pure `#ffffff`.

## Don'ts
- **Wrong:** Using `#7ecb26` for body text. **Right:** Use `#000000`. **Reason:** Accessibility and brand hierarchy.
- **Wrong:** Applying rounded corners to section backgrounds. **Right:** Keep them `0px`. **Reason:** Maintains the architectural, "sharp" brand feel.
- **Wrong:** Introducing a secondary accent color like blue or orange. **Right:** Stick to the monochrome + lime palette. **Reason:** Preserves the high-voltage utility identity.

## Similar brands
- **Greenhouse** (Use of lime accent on clean white)
- **Shopify** (Utility-first typography and clean surfaces)
- **Hewlett Packard Enterprise** (Enterprise monochrome with green accents)

## Quick start

```css
/* CSS Variables */
:root {
  --color-primary: #7ecb26;
  --color-ink: #000000;
  --color-canvas: #ffffff;
  --color-surface-soft: #fafafa;
  --font-main: 'Raleway', sans-serif;
  --radius-button: 6.4px;
}
```

```javascript
// Tailwind v4 @theme
@theme {
  --color-primary: #7ecb26;
  --color-ink: #000000;
  --color-canvas: #ffffff;
  --font-raleway: 'Raleway';
  --radius-md: 6.4px;
}
```

## Agent prompt examples
- "Generate a primary CTA button using Itsaspen's lime green #7ecb26, white text, and a 6.4px border radius."
- "Create a feature section with a #fafafa background, a Raleway 500 heading at 32px, and 16px body text with 30px line-height."
- "Design a hero component with a dark image overlay, white Raleway 500 text at 39px, and a secondary white button with 95% opacity."

## Known gaps
- Hover and focus states for buttons were not captured in the static evidence.
- Specific mobile breakpoint transitions for typography were inferred from 390px vs 1440px samples.
- Form validation (success/error) colors were not present in the analyzed pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://itsaspen.com | 1440px | 2026-06-06 |
| About | https://itsaspen.com/about | 1440px | 2026-06-06 |
| Mobile Home | https://itsaspen.com | 390px | 2026-06-06 |