# Aglancesolutions Design System

> High-contrast medical precision anchored by deep navy foundations and vibrant teal interactive triggers.

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

## TL;DR
Aglancesolutions utilizes a high-contrast "monochrome-plus" system where a deep navy foundation `{--wst-color-fill-accent-2}` (#071f4e) provides the canvas for medical data visualization. The primary interactive energy is driven by a bright teal `{--wst-button-color-fill-primary}` (#7fccf7) and a secondary cyan-teal (#0bb6b2), used exclusively for CTAs and section highlights. Typography is built on a dual-sans-serif stack: Proxima Nova for structured headings and Raleway for body and display moments, often featuring extreme letter-spacing (9.6px) for uppercase section headers.

## Signature DNA
1. **The Deep Canvas** (Large-scale sections utilize `#00305b` or `#071f4e` as a primary surface, forcing text to white `#ffffff` for high-legibility medical reporting environments).
2. **Teal-Cyan Triggers** (Interactive elements like the "Learn More" buttons use a vibrant teal `#0bb6b2` or `#7fccf7` against dark backgrounds to create immediate visual priority).
3. **Spaced Display Caps** (Uppercase headers at 32px use a 9.6px letter-spacing, creating a technical, "at-a-glance" dashboard aesthetic).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{--wst-color-fill-background-primary}` | `#ffffff` | Primary page background | 50 | 1.0 | CSS Variable |
| `{--wst-color-text-primary}` | `#414141` | Default body text color | 55 | 1.0 | CSS Variable |
| `{--wst-color-fill-accent-2}` | `#071f4e` | Deep navy section background | 26 | 0.8 | Computed Style |
| `{--wst-color-fill-base-2}` | `#414141` | Secondary text and UI fills | 55 | 1.0 | CSS Variable |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{--wst-button-color-fill-primary}` | `#7fccf7` | Primary CTA and action color | 19 | 0.8 | CSS Variable |
| `{--wst-color-custom-1}` | `#0bb6b2` | Secondary teal for buttons/borders | 19 | 0.8 | Computed Style |
| `{--wst-color-custom-8}` | `#155de9` | Decorative blue (low frequency) | 4 | 0.6 | decorative_only |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Proxima Nova | 400, 700 | Headings, UI Labels | Montserrat | Licensed |
| Raleway | 400, 700 | Display, Body, Buttons | Raleway (Google) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{typography.display-lg}` | 60px | 54px | normal | 400 | Hero Display | `span.wixui-rich-text__text` |
| `{typography.display-md}` | 48px | 43.2px | normal | 400 | Section Headers | `h2.font_2` |
| `{typography.heading-spaced}` | 32px | normal | 9.6px | 700 | Category Headers | `span.wixui-rich-text__text` |
| `{typography.heading-sm}` | 24px | normal | normal | 400 | Sub-headers | `p.font_8` |
| `{typography.body-lg}` | 22px | 26.4px | normal | 400 | Lead Paragraphs | `span.wixui-rich-text__text` |
| `{typography.body-md}` | 18px | 25.2px | normal | 400 | Input text | `input` |
| `{typography.body-sm}` | 16px | 22.4px | normal | 400 | Standard Body | `span.OR4Nv8` |
| `{typography.caption}` | 10px | normal | normal | 400 | Footer/Legal | `section#comp-mhlydklw` |

### Principles
1. **Uppercase Tracking:** Section titles (e.g., "ACADEMIC") must use 9.6px letter-spacing when set in 32px Raleway.
2. **High Contrast Inversion:** On navy backgrounds (`#071f4e`), all text must be pure white (`#ffffff`).
3. **Tight Display Leading:** Large display type (48px+) uses a tight 0.9x line-height (43.2px).

## Spacing
**Base unit:** 4px (Inferred)
| Token | Value | Occurrences |
|---|---|---|
| `{spacing.xs}` | 3px | 13 |
| `{spacing.md}` | 24px | 5 |
| `{spacing.section}` | 223px | 4 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Default containers, sharp sections | 165 occurrences |
| `{radius.md}` | 10px | Form inputs | Text Input component |
| `{radius.lg}` | 20px | Primary CTA buttons | Rounded Button component |
| `{radius.full}` | 50% | Decorative avatars/icons | Card component |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| Flat | none | All observed components | Component evidence |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary site actions (Learn More, Submit)
**Pages observed:** https://aglancesolutions.com
**Spec:** Background `#0bb6b2` / Text `#ffffff` / Border `2px transparent` / Radius `20px` / Font `16px Raleway`
**States observed:** Default | Hover (White bg `#ffffff` with Teal text `#7fccf7`): captured

#### Text Input
**Role:** Lead generation forms
**Pages observed:** https://aglancesolutions.com
**Spec:** Background `#ffffff` / Text `#00305b` / Border `5px #071f4e` / Radius `10px` / Padding `3px 24px`
**States observed:** Default: captured | Focus: not captured

### Tier 2: Patterns

#### Category Card
**Role:** Segmenting Academic, Enterprise, and Healthcare
**Pages observed:** https://aglancesolutions.com
**Spec:** Background `Image Overlay` / Text `#ffffff` / Typography `32px Raleway 700 (9.6px spacing)`
**States observed:** Default: captured

### Tier 3: Surface-specific

#### Deep Surface Section
**Role:** High-contrast content blocks
**Pages observed:** https://aglancesolutions.com
**Spec:** Background `#071f4e` / Text `#ffffff` / Border `0px` / Radius `0px`
**States observed:** Default: captured

#### Teal Highlight Surface
**Role:** Goal statement background
**Pages observed:** https://aglancesolutions.com
**Spec:** Background `#0bb6b2` / Text `#ffffff` / Border `6px #0bb6b2`
**States observed:** Default: captured

#### Footer
**Role:** Global navigation and social
**Pages observed:** https://aglancesolutions.com
**Spec:** Background `#002240` / Text `#ffffff` / Font `10px Arial`
**States observed:** Default: captured

## Layout
| Property | Value |
|---|---|
| Page Max-Width | 100% (Fluid sections) |
| Section Padding | 223px (Vertical) |
| Column Gap | 24px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Desktop | 1440px | 3-column category grid |
| Mobile | 390px | Stacked single-column layout |

## Do's
- Use `#071f4e` for large-scale background sections to maintain medical authority.
- Apply `9.6px` letter-spacing to 32px uppercase Raleway for section headers.
- Ensure all primary CTAs use the `20px` border-radius pill shape.
- Maintain white text `#ffffff` on any background darker than `#414141`.
- Use Proxima Nova for technical UI labels and Raleway for display copy.

## Don'ts
- **Wrong:** Using `#0bb6b2` as a primary body text color. **Right:** Use `#414141`. **Reason:** Accessibility and legibility on white backgrounds.
- **Wrong:** Applying shadows to cards or buttons. **Right:** Keep all surfaces flat. **Reason:** The brand relies on color blocking, not depth.
- **Wrong:** Using a border-radius on main section containers. **Right:** Keep section edges at `0px`.
- **Wrong:** Mixing letter-spacing values for display headers. **Right:** Stick to `normal` or `9.6px` as evidenced.

## Quick start

```css
:root {
  --wst-color-fill-background-primary: #ffffff;
  --wst-color-text-primary: #414141;
  --wst-color-fill-accent-2: #071f4e;
  --wst-button-color-fill-primary: #7fccf7;
  --wst-color-teal-accent: #0bb6b2;
  --wst-spacing-section: 223px;
  --wst-radius-button: 20px;
}
```

## Agent prompt examples
- "Create a hero section with a `#ffffff` background, featuring a `60px` Raleway-Semibold headline in `#0bb6b2` and a pill-shaped button with `#0bb6b2` background."
- "Design a content block with a deep navy `#071f4e` background and white text, using 32px Raleway headers with `9.6px` letter-spacing."
- "Generate a contact form using white inputs with a `5px` border of `#071f4e` and `10px` border-radius."

## Known gaps
- Hover states for navigation links were not explicitly captured in the token set.
- Mobile-specific font size scaling (fluid type) was not fully mapped.
- Success/Error semantic colors for form validation were not present in the analyzed source.

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