# Outsourcify Design System

> High-contrast technical precision anchored by vivid orange accents and geometric Montserrat typography.

**Source:** https://outsourcify.net | **Captured:** 2026-06-06 | **Pages analyzed:** 2
**Brand layer:** parent | **Related brands:** None

## TL;DR
Outsourcify utilizes a high-contrast foundation of pure white (#ffffff) and deep black (#000000) to establish a professional, agency-grade canvas. The primary brand voltage is carried by a specific "Luminous Vivid Orange" (#eb7424), used for critical CTAs, borders, and active text states. Typography is strictly Montserrat, leaning on semi-bold (600) weights for structured headings and generous line-heights (30-33px) for body text to maintain readability across dense service descriptions. The system favors sharp or slightly softened (7px) geometry over organic curves, creating a "tech-first" atmosphere.

## Signature DNA
1. **The Orange Pivot** (#eb7424 is the sole chromatic driver, appearing as button backgrounds, thin borders on tags, and emphasized text across all service grids).
2. **Montserrat Structuralism** (The reliance on Montserrat weight 600 for both 44px display headers and 16px subheadings creates a consistent, geometric rhythm).
3. **Deep Navy Contrast** (The use of #030347 for secondary surface backgrounds provides a sophisticated alternative to black, often paired with white text for high-impact sections).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.black}` | `#000000` | Primary text, button labels | 864 | 1.0 | `--wp--preset--color--black` |
| `{color.white}` | `#ffffff` | Page background, primary surface | 219 | 1.0 | `--wp--preset--color--white` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.primary}` | `#eb7424` | Primary CTA, borders, accent text | 117 | 0.8 | Computed Style |
| `{color.navy}` | `#030347` | Secondary section background | 4 | 0.6 | Computed Style |
| `{color.orange-vivid}` | `#ff6900` | Decorative / Token only | — | 1.0 | `--wp--preset--color--luminous-vivid-orange` |

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Montserrat | 400, 500, 600, 700 | All display, heading, and body | Montserrat (Google Fonts) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{text.display}` | 44px | 54px | -0.75px | 600 | Page Hero H2 | `h2` |
| `{text.heading}` | 32px | 44.3px | -0.75px | 600 | Section Headers | `h4` |
| `{text.heading-alt}` | 32px | 42px | normal | 400 | Secondary Headers | `h3` |
| `{text.heading-sm}` | 22px | 30px | normal | 500 | Sub-section titles | `h5` |
| `{text.subheading}` | 16px | 24px | normal | 600 | Centered labels | `h5.text-center` |
| `{text.button}` | 15px | 33px | 0.2px | 400 | Primary CTA text | `a.o-btn.o-btn--primary` |
| `{text.body}` | 14px | 30px | normal | 400 | Default running text | `section.services` |
| `{text.caption}` | 13px | 24px | normal | 400 | Portfolio tags | `h5.o-portfolio__tags` |

### Principles
1. **Geometric Weighting:** Use weight 600 for all levels of hierarchy to maintain a "bold" brand voice, even at smaller sizes.
2. **Vertical Breathing:** Body text maintains a line-height of 2.1x (30px on 14px base) to ensure legibility in technical copy.
3. **Tight Display:** Large headers use negative letter-spacing (-0.75px) to prevent the geometric characters from feeling disconnected.

## Spacing
**Base unit:** 5px (derived from common multiples)
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 5px | 8 |
| `{space.sm}` | 10px | 54 |
| `{space.md}` | 15px | 108 |
| `{space.lg}` | 25px | 127 |
| `{space.xl}` | 30px | 230 |
| `{space.xxl}` | 75px | 8 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.sharp}` | 0px | Section containers, primary buttons | 674 occurrences |
| `{radius.input}` | 5px | Form fields | 29 occurrences |
| `{radius.control}` | 7px | Cards, secondary buttons | 135 occurrences |
| `{radius.pill}` | 50px | Decorative elements | 119 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.soft}` | `rgba(0, 0, 0, 0.16) 0px 3px 20px 0px` | Hovered buttons | `Rounded Button` component |
| `{shadow.card}` | `rgba(0, 0, 0, 0.2) 0px 3px 20px 0px` | Feature cards | `Card` component |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main site actions (Inquire, Explore)
**Pages observed:** https://outsourcify.net, https://outsourcify.net/about
**Spec:** Background `{color.primary}` (#eb7424) / Text `{color.white}` (#ffffff) / Radius `{radius.sharp}` (0px) / Padding 8px 30px / Typography `{text.button}`
**States observed:** Default | Hover: captured (shadow added) | Active: not captured

#### Rounded Button
**Role:** Secondary actions and portfolio links
**Pages observed:** https://outsourcify.net, https://outsourcify.net/about
**Spec:** Background transparent / Text `{color.white}` (#ffffff) / Border 1px `{color.white}` / Radius `{radius.control}` (7px) / Shadow `{shadow.soft}`
**States observed:** Default | Hover: not captured

### Tier 2: Patterns

#### Service Card
**Role:** Displaying core expertise
**Pages observed:** https://outsourcify.net
**Spec:** Background `{color.white}` (#ffffff) / Text `{color.black}` (#000000) / Radius `{radius.sharp}` (0px) / Padding 35px / Shadow none
**States observed:** Default | Hover: not captured

#### Portfolio Card
**Role:** Project showcases
**Pages observed:** https://outsourcify.net
**Spec:** Background `{color.white}` (#ffffff) / Radius `{radius.control}` (7px) / Shadow `{shadow.card}` / Padding 24px
**States observed:** Default | Hover: not captured

### Tier 3: Surface-specific

#### Tag Badge
**Role:** Categorization in blog or portfolio
**Pages observed:** https://outsourcify.net/about
**Spec:** Background transparent / Text `{color.primary}` (#eb7424) / Border 1px `{color.primary}` / Radius `{radius.input}` (5px) / Padding 2px 12px
**States observed:** Default | Hover: not captured

#### Dark Section Card
**Role:** High-impact "About" or "Contact" blocks
**Pages observed:** https://outsourcify.net/about
**Spec:** Background `{color.navy}` (#030347) / Text `{color.white}` (#ffffff) / Border 1px `{color.white}` / Radius `{radius.control}` (7px) / Padding 5px 7px
**States observed:** Default | Hover: not captured

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1200px (approx) |
| Section Padding | 75px (vertical) |
| Grid Gutter | 30px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Navigation collapses to hamburger; 32px headers scale to 21px; padding reduced to 15px. |
| Desktop | 1440px | Multi-column service grids (4-up); full horizontal navigation. |

## Imagery & decoration
Outsourcify uses flat, technical line-art icons with orange accents to represent services. Photography is professional and office-centric, often treated with semi-transparent orange overlays (`rgba(235, 116, 36, 0.75)`). Avoids gradients or organic, non-geometric shapes.

## Do's
- Use Montserrat 600 for all structural headings.
- Apply `#eb7424` for all primary interactive elements.
- Maintain 30px line-height for 14px body text.
- Use 7px radius for cards and 0px for primary buttons.
- Ensure high contrast (White/Black) for readability.

## Don'ts
- **Wrong:** Using `#ff6900` (Vivid Orange) for primary CTAs. **Right:** Use `#eb7424`. **Reason:** `#eb7424` is the validated brand primary; `#ff6900` is a dormant preset token.
- Do not use Montserrat weights below 400 for body text.
- Do not apply shadows to standard service cards; keep them flat.
- Avoid using the Navy background (#030347) for more than 20% of the page.

## Similar brands
- DigitalOcean (Technical clarity)
- Toptal (Professional agency aesthetic)
- Strapi (Geometric typography and high contrast)

## Quick start

### CSS Custom Properties
```css
:root {
  --color-primary: #eb7424;
  --color-navy: #030347;
  --color-black: #000000;
  --color-white: #ffffff;
  --font-main: 'Montserrat', sans-serif;
  --radius-control: 7px;
  --shadow-card: 0 3px 20px 0 rgba(0, 0, 0, 0.2);
}
```

### Tailwind v4
```javascript
@theme {
  --color-primary: #eb7424;
  --color-navy: #030347;
  --font-montserrat: "Montserrat";
  --radius-control: 7px;
  --shadow-card: 0 3px 20px 0 rgba(0, 0, 0, 0.2);
}
```

## Agent prompt examples
- "Generate a service card using Montserrat 600 for the title, a 1px orange #eb7424 border, and 35px internal padding."
- "Create a primary CTA button with a sharp 0px radius, #eb7424 background, and white Montserrat 15px text."
- "Design a hero section with a white background, 44px Montserrat 600 header, and 75px vertical padding."

## Known gaps
- Hover states for primary buttons were not fully captured in the static evidence.
- The specific mobile breakpoint for the transition from 4-column to 1-column grids was not explicitly defined in tokens.

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