# Smxi Design System

> High-contrast enterprise utility anchored by deep charcoal typography and a signature forest green functional accent.

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

## TL;DR
Smxi employs a "Utility Monochrome" system where the primary interface is defined by high-contrast charcoal text (`#323235`) on a pure white canvas (`#ffffff`). The brand's functional energy is concentrated in a specific forest green (`#319c73`) used exclusively for primary actions and success states. Typography is strictly **Barlow**, utilizing a heavy 700 weight for headlines to create a structured, authoritative information hierarchy. Layouts are characterized by sharp edges (0px radius) for most UI elements, punctuated by large-radius "pill" containers (25px) for high-level interactive panels and buttons.

## Signature DNA
1. **Functional Forest Green** (The use of `#319c73` as the sole chromatic driver for interaction, appearing on every primary button across `smxi.com/pricing` and the homepage).
2. **Barlow Heavy Headers** (The consistent use of Barlow 700 at 32px for section entry titles, providing a dense, industrial typographic anchor).
3. **Hybrid Geometry** (The juxtaposition of 0px "sharp" corners for standard containers with 25px "panel" radii for primary CTAs and feature cards).

## Family Map
Not captured in source (No sub-brands identified in topology).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `{color.canvas}` | `#ffffff` | Page background, button text | 20 | 1 | Computed Style |
| `{color.ink}` | `#323235` | Primary body text, headings | 140 | 0.8 | Computed Style |
| `{color.void}` | `#000000` | Deep shadows, preset black | 0 | 1 | CSS Variable |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `{color.primary}` | `#319c73` | Primary button background | 20 | 1 | Brand Page |
| `{color.accent-blue}` | `#325d7f` | Secondary text emphasis | 20 | 0.8 | Computed Style |
| `{color.accent-green}` | `#268a59` | Tertiary text emphasis | 20 | 0.8 | Computed Style |
| `{color.decorative}` | `#28268a` | Decorative only | 0 | 0.9 | Brand Page |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
| :--- | :--- | :--- | :--- | :--- |
| Barlow | 400, 700 | Heading, Body, UI | Barlow (Google Fonts) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
| :--- | :--- | :--- | :--- | :--- | :--- | :--- |
| `{type.h2}` | 32px | 40px | normal | 700 | Section titles | `h2.entry-title` |
| `{type.body-lg}` | 19px | 28.5px | normal | 400 | Article prose | `article#post-25003` |
| `{type.button}` | 16px | 24px | normal | 400 | CTA labels | `a.btn.btn-secondary` |
| `{type.body-md}` | 16px | 24px | normal | 400 | Default body | Computed Style |

### Principles
1. **Headlines are always 700 weight.** Barlow's condensed nature requires the heavy weight to maintain authority.
2. **Prose uses generous leading.** Body text at 19px uses a 1.5x line-height (28.5px) for readability.
3. **Buttons use standard body size.** CTA text does not scale up; it relies on container color and padding for prominence.

## Spacing
**Base unit:** Custom
| Token | Value | Occurrences |
| :--- | :--- | :--- |
| `{space.xs}` | 6px | 20 |
| `{space.sm}` | 10px | 20 |
| `{space.md}` | 16px | 40 |
| `{space.lg}` | 20px | 20 |
| `{space.xl}` | 30px | 20 |
| `{space.section}` | 60px | 20 |

## Border radius
| Token | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{radius.sharp}` | 0px | Default containers, inputs | 180 occurrences |
| `{radius.panel}` | 25px | Primary buttons, feature cards | 20 occurrences |

## Elevation
| Level | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| Flat | none | Standard UI | Default state |
| Deep | `--wp--preset--shadow--deep` | Not observed in active use | CSS Variable |

## Components
### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action
**Pages observed:** `smxi.com/pricing`, `smxi.com`
**Spec:** Background `{color.primary}` (#319c73) / Text `{color.canvas}` (#ffffff) / Radius `{radius.panel}` (25px) / Padding 6px 19px 7px 20px / Typography `{type.button}`
**States observed:** Default | Hover: Not captured

#### Form Input
**Role:** Lead generation
**Pages observed:** `smxi.com`
**Spec:** Background `{color.canvas}` (#ffffff) / Border 1px solid `{color.ink}` (#323235) / Radius `{radius.sharp}` (0px)
**States observed:** Default | Focus: Not captured

### Tier 2: Patterns

#### Feature Card
**Role:** Service highlighting
**Pages observed:** `smxi.com`
**Spec:** Background `{color.canvas}` (#ffffff) / Radius `{radius.sharp}` (0px) / Padding `{space.md}` (16px)
**States observed:** Default

#### Pricing Tier
**Role:** Product selection
**Pages observed:** `smxi.com/pricing`
**Spec:** Background `{color.canvas}` (#ffffff) / Border 1px solid `{color.ink}` (#323235) / Radius `{radius.sharp}` (0px)
**States observed:** Default

### Tier 3: Surface-specific

#### Contact Panel
**Role:** Conversion section
**Pages observed:** `smxi.com`
**Spec:** Background `{color.canvas}` (#ffffff) / Radius `{radius.panel}` (25px) / Typography Barlow 400
**States observed:** Default

#### Footer
**Role:** Navigation and legal
**Pages observed:** `smxi.com`, `smxi.com/pricing`
**Spec:** Background `{color.ink}` (#323235) / Text `{color.canvas}` (#ffffff) / Typography Barlow 400
**States observed:** Default

## Layout
| Property | Value |
| :--- | :--- |
| Max content width | 1200px (approx) |
| Section padding | 60px |
| Column gap | 20px |

## Responsive
| Breakpoint | Width | Key changes |
| :--- | :--- | :--- |
| Mobile | < 768px | Stacked 1-column grids, centered typography |
| Desktop | 1440px | Multi-column grids (3-up or 4-up) |

## Imagery & decoration
Smxi uses high-resolution photography of software interfaces and office environments, often overlaid with dark gradients to ensure text legibility. The brand avoids rounded illustrations, preferring sharp-edged icons and photography.

## Do's
- Use `#319c73` for all primary interactive elements.
- Set all major section headings to Barlow 700 at 32px.
- Maintain a 1.5x line-height ratio for all body copy.
- Use 0px border radius for all form inputs and standard containers.
- Reserve the 25px radius exclusively for buttons and high-level feature panels.

## Don'ts
- **Wrong:** Using `#5533ff` (Primary token) as the button background. **Right:** Use `#319c73`. **Reason:** While defined in tokens, the rendered brand uses forest green for all validated CTAs.
- Do not use serif fonts; the brand is strictly Barlow (sans-serif).
- Do not apply shadows to standard feature cards; the brand relies on borders and flat surfaces.
- Do not use the decorative blue `#28268a` for text legibility.

## Similar brands
- IBM (Carbon Design System)
- Siemens (Industrial UI)
- Cisco (Enterprise Utility)

## Quick start
```css
/* CSS Custom Properties */
:root {
  --color-primary: #319c73;
  --color-ink: #323235;
  --color-canvas: #ffffff;
  --font-main: 'Barlow', sans-serif;
  --radius-panel: 25px;
  --radius-sharp: 0px;
}
```

## Agent prompt examples
- "Generate a primary CTA button using Smxi's forest green #319c73 with a 25px border radius and Barlow 16px white text."
- "Create a contact form section with 0px radius inputs and Barlow 700 charcoal headings at 32px."
- "Design a feature grid where cards have no border-radius and use #323235 for all primary labels."

## Known gaps
- Hover and Active states for buttons were not captured in the static evidence.
- Mobile-specific menu transitions were not observed.
- Error and Success message styling (Semantic tier) was not present in the analyzed flows.

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