# Cenotechsolutions Design System

> Sharp, achromatic precision anchored by wide-tracked Open Sans typography and zero-radius geometry.

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

## TL;DR
Cenotechsolutions utilizes a strict monochrome palette dominated by `#333333` (Ink) and `#666666` (Slate) on a pure white canvas. The system is defined by a "sharp-edge" philosophy where every container and component uses a `0px` border radius. Typography is exclusively **Open Sans**, characterized by a generous `3px` letter-spacing on headings and navigation, creating a technical, airy layout. Layout rhythm is driven by large vertical paddings (up to `84px`) and a total absence of shadows or elevation depth.

## Signature DNA
1. **Achromatic Rigor** (The system avoids all saturated color in the UI, relying on `#333333` for primary text and `#666666` for secondary content to create hierarchy through value rather than hue.)
2. **Wide-Tracked Headings** (Display and heading styles utilize a consistent `3px` letter-spacing, a move that provides a technical, architectural feel to the Open Sans typeface.)
3. **Zero-Radius Geometry** (All observed components, from surface sections to image wraps, use a `0px` radius, enforcing a rigid, professional grid.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.ink}` | `#333333` | Primary text, high-contrast headings | 13 | 0.8 | Computed Style |
| `{color.slate}` | `#666666` | Secondary body text, default text color | 34 | 0.8 | Computed Style |
| `{color.canvas}` | `#ffffff` | Primary page background, surface fills | 21 | 0.8 | Computed Style |
| `{color.smoke}` | `#808080` | Borders, disabled text, deemphasized labels | 4 | 0.6 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.accent.wp-blue}` | `#007cba` | WordPress admin theme token (decorative_only) | 1 | 0.4 | Declared Token |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------|------|------|------|
| Open Sans | 400, 500, 600 | Universal (Display, Heading, Body) | N/A (Google Font) | Apache 2.0 |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display}` | 45px | 63px | 3px | 500 | Hero section heads | `h2` |
| `{type.h5}` | 28px | 39.2px | 3px | 500 | Section sub-heads | `h5` |
| `{type.body.lg}` | 18px | 30.6px | normal | 500 | Primary article text | `article#post-491` |
| `{type.nav}` | 18px | 23px | normal | 500 | Header menu links | `header#main-header` |
| `{type.link.bold}` | 17px | 30.6px | 3px | 600 | Emphasized inline links | `a` |
| `{type.subheading}` | 16px | 22.4px | 3px | 500 | Small section labels | `h5:nth-of-type(1)` |
| `{type.body.sm}` | 14px | 14px | normal | 600 | Footer/Utility links | `li#menu-item-671` |
| `{type.label.sm}` | 14px | 30.6px | 3px | 600 | Tracked utility labels | `li.menu-item` |

### Principles
1. **Headings never use "normal" tracking.** All headings (H2-H5) must apply `3px` letter-spacing.
2. **Body text prioritizes readability.** Paragraphs at 18px use `1.7x` line-height (`30.6px`) for generous vertical breathing room.
3. **Weight consistency.** The system heavily favors weight `500` for both headings and body, using `600` only for small labels or links.

## Spacing
**Base unit:** 4px (inferred)
Table: | Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 10px | 13 |
| `{space.md}` | 22px | 11 |
| `{space.xl}` | 54px | 4 |
| `{space.section}` | 84px | 6 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.sharp}` | 0px | Universal (Cards, Sections, Images) | 65 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{elev.flat}` | none | All surfaces | Component "Surface" |

## Components
### Tier 1: Foundational
#### Global Header
**Role:** Primary site navigation and branding.
**Pages observed:** https://cenotechsolutions.com
**Spec:** Background `#ffffff` / Text `#333333` / Height driven by 23px line-height / Typography `{type.nav}`.
**States observed:** Default | Hover: captured (color change to `#666666`).

### Tier 2: Patterns
#### Practice Area Card
**Role:** Feature grid items with icon and description.
**Pages observed:** https://cenotechsolutions.com
**Spec:** Background transparent / Text `#666666` / Icon alignment center / Typography `{type.body.lg}`.
**States observed:** Default: captured.

### Tier 3: Surface-specific
#### Content Section
**Role:** Large vertical bands for content grouping.
**Pages observed:** https://cenotechsolutions.com
**Spec:** Background `#ffffff` or `#f2f2f2` (inferred from screenshots) / Padding `54px 0px` / Radius `0px`.
**States observed:** Default: captured.

#### Footer Navigation
**Role:** Site-wide utility links.
**Pages observed:** https://cenotechsolutions.com
**Spec:** Background `#333333` / Text `#ffffff` / Typography `{type.body.sm}` / Padding `22px`.
**States observed:** Default: captured.

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1080px (approx) |
| Section Padding | 54px (vertical) |
| Grid Gutter | 22px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger; display type scales down; 1-column layout. |

## Imagery & decoration
- **Monochrome Icons:** Line-art icons (Strategic Consulting, Integration) use `#000000` strokes.
- **Hero Photography:** High-contrast urban nightscapes (Boston skyline) providing the only significant color injection.
- **Horizontal Dividers:** 1px solid lines using `#808080` to separate hero text from body.

## Do's
- Use `#333333` for all primary headings.
- Apply `3px` letter-spacing to any text element acting as a label or title.
- Maintain `0px` border radius on all containers.
- Use `18px` as the base font size for body paragraphs.
- Ensure vertical section padding is at least `54px`.

## Don'ts
- **Wrong:** Using `#007cba` (WP Blue) for UI buttons. **Right:** Use `#333333`. **Reason:** Saturated colors are reserved for sub-brands or external tokens, not parent UI.
- **Wrong:** Applying a border-radius to cards. **Right:** Keep corners at `0px`. **Reason:** Sharp geometry is a core brand signature.
- **Wrong:** Using a weight of 700 for headings. **Right:** Use weight 500. **Reason:** The brand relies on tracking, not weight, for display authority.

## Quick start
```css
:root {
  --color-ink: #333333;
  --color-slate: #666666;
  --color-canvas: #ffffff;
  --font-main: 'Open Sans', sans-serif;
  --tracking-wide: 3px;
  --radius-none: 0px;
}
```

## Known gaps
- Button hover states were not explicitly captured in the evidence JSON.
- Form input styling (text fields, checkboxes) was not present on the analyzed homepage.
- Success/Error semantic colors were not observed in the live UI.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://cenotechsolutions.com | Desktop 1440px | 2026-06-06 |