# Virsys12 Design System

> Professional healthcare technology interface anchored by deep teal accents and high-contrast typography on a clean white canvas.

**Source:** [https://virsys12.com](https://virsys12.com) | **Captured:** 2026-06-06 | **Pages analyzed:** 1
**Brand layer:** parent | **Related brands:** None

## TL;DR
Virsys12 utilizes a "monochrome-plus-one" strategy, where a foundational grayscale palette (#ffffff, #333333, #222222) is punctuated by a primary deep teal (#155666) and a secondary bright blue (#0194c4). The system relies heavily on the **Roboto** font family for all hierarchy levels, using weight 700 for 32px headlines and weight 400 for 16px body text. Interactive elements are defined by pill-shaped or slightly rounded (24px) ghost buttons with 2px borders. Layouts are spacious, utilizing 50px and 100px vertical rhythms to separate content blocks.

## Signature DNA
1. **The Teal Ghost Pill** (Ghost buttons using a 2px border of #155666 with 24px corner radii, seen across all primary CTAs on virsys12.com).
2. **Roboto Hierarchy** (Strict adherence to Roboto across all roles, transitioning from 700 weight display titles to 400 weight body text with no serif intervention).
3. **High-Contrast Sectioning** (Alternating between pure white #ffffff backgrounds and deep teal #155666 flood-fills for high-impact conversion zones).

## Family Map
| Sub-brand | Primary color | Graphics motif | Inherits | Overrides |
|---|---|---|---|---|
| None | N/A | N/A | N/A | N/A |

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.canvas}` | `#ffffff` | Page background, button text | 27 | 1.0 | `--wp--preset--color--white` |
| `{color.ink.primary}` | `#333333` | Primary body text | 48 | 1.0 | `--uael-as-text-color` |
| `{color.ink.heading}` | `#222222` | High-level display text | 10 | 0.6 | Computed Style |
| `{color.ink.muted}` | `#666666` | Secondary text, borders | 62 | 1.0 | `--uael-as-text-light` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.primary}` | `#155666` | Primary brand teal, CTA borders | 74 | 0.8 | Computed Style |
| `{color.secondary}` | `#0194c4` | Bright blue accent, button fills | 26 | 0.8 | Computed Style |
| `{color.hover}` | `#005a87` | Primary hover state | 1 | 0.7 | `--uael-as-primary-hover` |

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Roboto | 400, 500, 600, 700 | Heading, Body, UI | Roboto (Google Fonts) | Apache 2.0 |
| -apple-system | 400 | Fallback/System UI | San Francisco | Proprietary |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.h2}` | 32px | 43.84px | normal | 700 | Section Headlines | `h2.elementor-heading-title` |
| `{type.testimonial}` | 21px | 31.2px | normal | 400 | Testimonial Quote | `div.elementor-testimonial__text` |
| `{type.h5}` | 20px | 20px | normal | 600 | Small Headlines | `h5.elementor-heading-title` |
| `{type.button}` | 18px | 23.94px | normal | 500 | Primary CTA Text | `a.elementor-button-link` |
| `{type.body.lg}` | 18px | 27px | normal | 600 | Testimonial Name | `span.elementor-testimonial__name` |
| `{type.body}` | 16px | 24px | normal | 400 | Default Body Copy | `header.elementor-4188` |
| `{type.subheading}` | 16px | 16px | normal | 600 | Section Labels | `h6.elementor-heading-title` |
| `{type.body.sm}` | 14px | 21px | normal | 500 | Footer/Secondary | `p:nth-of-type(1)` |

### Principles
1. **Weight-Based Hierarchy:** Roboto 700 is reserved for H2 section headers; 600 is used for sub-headers and emphasized names.
2. **Tight Line Heights for UI:** Buttons and small headings use 1:1 line-height (e.g., 20px size / 20px height) for vertical centering.
3. **System Fallbacks:** Non-brand UI elements (nav menus) default to `-apple-system` at 13px-16px.

## Spacing
**Base unit:** 4px (inferred)
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 8px | 13 |
| `{space.sm}` | 16px | 7 |
| `{space.md}` | 20px | 9 |
| `{space.lg}` | 50px | 5 |
| `{space.xl}` | 100px | 6 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Default containers | 241 occurrences |
| `{radius.sm}` | 3px | Form inputs, small buttons | `radius: 3px` |
| `{radius.lg}` | 24px | Primary Ghost Buttons | `radius: 24px` |
| `{radius.full}` | 999px | Social icons, pill badges | `radius: 999px` |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| Flat | none | Standard sections | Default |
| Inset | `rgba(255, 255, 255, 0.1) 1px 0px 0px 0px inset` | Navigation/Header depth | CSS Variable |

## Components

### Tier 1: Foundational

#### Rounded Button (Ghost)
**Role:** Primary page CTA (Learn More, Contact Us)
**Pages observed:** Home
**Spec:** Background: transparent / Text: #155666 / Border: 2px solid #155666 / Radius: 24px / Padding: 8px 18px / Typography: Roboto 500 18px
**States observed:** Default | Hover: Not captured | Focus: Not captured

#### Surface (Standard)
**Role:** Content grouping
**Pages observed:** Home
**Spec:** Background: #ffffff / Text: #333333 / Border: 0px / Radius: 0px / Padding: 20px
**States observed:** Default

### Tier 2: Patterns

#### Testimonial Card
**Role:** Social proof
**Pages observed:** Home
**Spec:** Background: #ffffff / Text: #155666 (Headings) / Radius: 0px / Shadow: none
**Typography:** Quote: Roboto 400 21px / Name: Roboto 600 18px

#### Section Header
**Role:** Major content transition
**Pages observed:** Home
**Spec:** Typography: Roboto 700 32px / Color: #155666 or #222222 / Bottom Margin: 25px-50px

### Tier 3: Surface-specific

#### Footer
**Role:** Site navigation and contact
**Pages observed:** Home
**Spec:** Background: #ffffff / Text: #333333 / Border-top: 1px solid #dddddd
**Typography:** Links: Roboto 500 14px / Phone: Roboto 400 32px (#0194c4)

#### Hero Flood
**Role:** Bottom-of-page conversion
**Pages observed:** Home
**Spec:** Background: #155666 / Text: #ffffff / Button: #0194c4 fill
**Typography:** Heading: Roboto 700 32px

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1140px (inferred from standard Elementor) |
| Section Padding (Vertical) | 100px |
| Column Gap | 20px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Navigation collapses to hamburger; padding reduces to 15px; text aligns center in hero. |

## Imagery & decoration
- **Photography:** High-key, bright office environments featuring technology (tablets, laptops).
- **Logos:** Grayscale partner logo bar (Carefirst, Qualifacts, RevSpring) with 50% opacity.
- **Icons:** Thin-stroke SVG icons in teal (#155666) or blue (#0194c4).

## Do's
- Use **Roboto** for all text hierarchies.
- Apply **2px borders** to ghost buttons.
- Maintain **100px vertical spacing** between major content sections.
- Use **#155666** for primary brand identifiers and headlines.
- Ensure buttons have a **24px radius** for a professional yet soft appearance.

## Don'ts
- **Wrong:** Using #00d084 (Vivid Green) for primary buttons.
  **Right:** Use #155666 or #0194c4.
  **Reason:** Saturated greens are present in the token set but not used for brand-level CTAs.
- **Wrong:** Mixing serif fonts with Roboto.
  **Right:** Stay 100% Roboto.
  **Reason:** The brand identity is strictly sans-serif.
- Do not use drop shadows on cards; use 1px borders or background color shifts for separation.

## Similar brands
- Salesforce (Health Cloud)
- Optum
- Athenahealth
- Cerner

## Quick start

```css
/* CSS Custom Properties */
:root {
  --v12-teal: #155666;
  --v12-blue: #0194c4;
  --v12-white: #ffffff;
  --v12-text: #333333;
  --v12-heading: #222222;
  --v12-font-main: 'Roboto', sans-serif;
  --v12-radius-button: 24px;
}
```

## Agent prompt examples
- "Create a hero section for Virsys12 using a #155666 background, white Roboto 700 text at 32px, and a pill-shaped button with a #0194c4 background."
- "Design a testimonial card with a white background, no shadow, and Roboto 21px text for the quote."
- "Generate a ghost button using a 2px border of #155666 and a border-radius of 24px."

## Known gaps
- Hover and Active states for the primary teal ghost button were not captured in the static evidence.
- Specific mobile breakpoint triggers (px values) are inferred from standard framework behavior as they were not explicitly declared in tokens.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://virsys12.com | Desktop 1440px | 2026-06-06 |
| Homepage (Mobile) | https://virsys12.com | Mobile 390px | 2026-06-06 |