# Fixnix Design System

> High-contrast compliance architecture anchored by forest green accents and geometric Montserrat typography.

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

## TL;DR
Fixnix utilizes a high-contrast monochrome foundation (#000000, #ffffff) punctuated by a singular, vibrant primary green (#007527). The system is characterized by a "sharp" aesthetic, utilizing 0px border radii for most structural containers while reserving a soft 50px pill shape for primary call-to-action buttons. Typography is exclusively Montserrat, leaning heavily on weight 600 for display and 500 for body, creating a dense, professional atmosphere. Layouts alternate between pure white and a very subtle mint-tinted gray (#f5f8f6) to define section boundaries.

## Signature DNA
1. **The Green Pivot** (#007527): Used exclusively for high-intent actions (Start Here, Read More, Submit) and key name highlights, providing the only chromatic relief in a grayscale environment.
2. **Sharp-Edge Containers** (0px radius): All content sections and surface containers reject rounding, creating a rigid, "architectural" grid feel (seen on homepage and about pages).
3. **Montserrat Density**: The use of weight 600 for headers at 40px and weight 500 for body text at 15px creates a heavy, authoritative typographic presence.

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `--ast-global-color-6` | `#000000` | Primary text, footer background, borders | 17 | 1 | Evidence |
| `--ast-global-color-5` | `#ffffff` | Page background, button text | 16 | 1 | Evidence |
| `--ast-global-color-3` | `#3a3a3a` | Secondary text, alternate borders | 42 | 1 | Evidence |
| `--ast-global-color-4` | `#f5f8f6` | Subtle section backgrounds | 2 | 1 | Evidence |
| `--ast-border-color` | `#dddddd` | Input borders, decorative dividers | 4 | 1 | Evidence |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `--ast-global-color-0` | `#007527` | Primary CTA background, success text | 7 | 1 | Evidence |
| `--wp--preset--color--vivid-cyan-blue` | `#0693e3` | LinkedIn button (decorative_only) | 1 | 0.8 | Evidence |

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

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{text.display}` | 40px | 52px | normal | 600 | Section Titles | `h2.uagb-ifb-title` |
| `{text.heading}` | 30px | 39px | normal | 600 | Sub-section heads | `h3.uagb-ifb-title` |
| `{text.heading-sm}` | 20px | 24px | normal | 600 | Feature labels | `h4.uagb-ifb-title-prefix` |
| `{text.body-bold}` | 15px | 27px | normal | 700 | Emphasis | `strong` |
| `{text.body}` | 15px | 27px | normal | 500 | Default running text | `article#post-1376` |
| `{text.button}` | 15px | 15px | normal | 500 | CTA labels | `a.uagb-infobox-cta-link` |
| `{text.label}` | 13px | 27px | normal | 500 | Form sublabels | `label.wpforms-field-sublabel` |

### Principles
1. **No Serif Usage**: The system is strictly sans-serif to maintain a modern SaaS aesthetic.
2. **Tight Leading for Headers**: Display sizes use a 1.3x line-height ratio, while body text is more generous at 1.8x.
3. **Weight as Hierarchy**: Boldness (600/700) is the primary driver of importance rather than color.

## Spacing
**Base unit:** 20px (derived from common padding/gap patterns)
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 10px | 6 |
| `{space.sm}` | 15px | 7 |
| `{space.md}` | 20px | 13 |
| `{space.lg}` | 40px | 3 |
| `{space.xl}` | 100px | 4 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Sections, Cards, Images | 64 occurrences |
| `{radius.sm}` | 2px | Form inputs | `input` styles |
| `{radius.pill}` | 50px | Primary Buttons | `Rounded Button` component |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{shadow.flat}` | none | Default state for all cards | Observed on all pages |
| `{shadow.base}` | rgba(0, 0, 0, 0.44) 0px 0px 0px 0px | Declared but visually flat | CSS variable `--wp--preset--shadow--natural` |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main site actions (Start Here, Submit)
**Pages observed:** https://fixnix.co
**Spec:** Background `#007527` | Text `#ffffff` | Radius `50px` | Padding `15px 38px` | Typography `15px/500`
**States observed:** Default | Hover: Not captured | Active: Not captured

#### Text Input
**Role:** Lead capture forms
**Pages observed:** https://fixnix.co
**Spec:** Background `#fafafa` | Text `#666666` | Border `1px solid #dddddd` | Radius `2px` | Padding `11px`
**States observed:** Default | Focus: Not captured

### Tier 2: Patterns

#### Feature Block
**Role:** Explaining Audit, Risk, Compliance services
**Pages observed:** https://fixnix.co
**Spec:** Background `transparent` | Text `#3a3a3a` | Radius `0px` | Padding `0px` | Typography `Montserrat 600`
**States observed:** Default

#### Section Header
**Role:** Introducing new page segments
**Pages observed:** All
**Spec:** Background `transparent` | Text `#000000` | Typography `40px/600` | Margin-bottom `20px`

### Tier 3: Surface-specific

#### Alternate Section
**Role:** Visual break between white bands
**Pages observed:** https://fixnix.co
**Spec:** Background `#f5f8f6` | Radius `0px` | Padding `100px 10px`

#### Footer
**Role:** Global site closure
**Pages observed:** All
**Spec:** Background `#3a3a3a` | Text `#ffffff` | Padding `60px 0px`

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1200px |
| Section Vertical Padding | 100px |
| Column Gap | 40px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Stacked feature blocks, center-aligned headers |
| Desktop | 1440px | 3-column feature grids, 100px section padding |

## Imagery & decoration
- **Photography**: Professional portraits with clean backgrounds (Shan Sankaran, Kay Shan).
- **Hero Background**: Atmospheric forest/nature imagery used as a backdrop for the main value proposition.
- **Dividers**: Simple 1px horizontal lines in `#3a3a3a` or `#dddddd`.

## Do's
- Use `#007527` for all primary conversion points.
- Maintain `0px` border radius on all image containers.
- Use `Montserrat 600` for any text larger than 20px.
- Alternate between `#ffffff` and `#f5f8f6` for long-scroll page sections.
- Ensure 100px vertical spacing between major content blocks.

## Don'ts
- **Wrong:** Using `#007527` for body text. **Right:** Use `#3a3a3a`. **Reason:** Maintain high legibility and reserve green for actions.
- **Wrong:** Applying rounded corners to feature cards. **Right:** Keep them `0px`. **Reason:** Brand identity is architectural and sharp.
- **Wrong:** Using the LinkedIn blue (`#0693e3`) as a primary brand color. **Right:** Keep it isolated to the social link. **Reason:** This is a third-party brand color, not a Fixnix primary.

## Similar brands
- Freshworks (SaaS structure)
- Diligent (GRC space, professional type)
- LogicGate (High-contrast SaaS)

## Quick start

### CSS Custom Properties
```css
:root {
  --fixnix-primary: #007527;
  --fixnix-black: #000000;
  --fixnix-gray: #3a3a3a;
  --fixnix-surface-alt: #f5f8f6;
  --fixnix-font-main: 'Montserrat', sans-serif;
  --fixnix-radius-pill: 50px;
  --fixnix-radius-sharp: 0px;
}
```

### Tailwind v4
```javascript
@theme {
  --color-primary: #007527;
  --color-surface-alt: #f5f8f6;
  --font-montserrat: "Montserrat";
  --radius-pill: 50px;
  --spacing-section: 100px;
}
```

## Agent prompt examples
- "Create a primary button using Fixnix green #007527, white text, and a 50px pill radius."
- "Design a feature section with a #f5f8f6 background and three columns of text using Montserrat weight 500."
- "Generate a header component with a 40px Montserrat weight 600 title in #000000."

## Known gaps
- Hover states for primary buttons were not captured in the source.
- Mobile navigation menu transition was not analyzed.
- Secondary button variant (outline) was not present in analyzed pages.

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