# Zencontrol Design System

> Deep slate foundations anchored by teal precision and a high-contrast sans-serif hierarchy.

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

## TL;DR
Zencontrol utilizes a professional, industrial-tech aesthetic defined by a deep slate primary color `#263645` and a vibrant teal accent `#3cb5a3`. The system relies on a clean white canvas `#ffffff` with subtle light gray sectioning `#f6f6f6`. Typography is strictly functional, pairing the geometric clarity of **Ubuntu** for headings with the high-legibility **Roboto** for body and data-heavy content. Layouts are structured with a 25px/15px spacing rhythm and sharp-edged containers, using shadows sparingly to denote interactive surfaces.

## Signature DNA
1. **The Slate-Teal Pivot** (The interaction between the deep primary `#263645` and the teal accent `#3cb5a3` creates a high-contrast, "smart infrastructure" feel across all primary CTAs and hero sections.)
2. **Geometric Sans Pairing** (The use of Ubuntu for display headers at weights 300 and 700 provides a technical, modern authority that distinguishes the brand from standard corporate sans-serifs.)
3. **Flat Industrial Surfaces** (A preference for `{rounded.sharp}` (0px) corners and 2px borders on light surfaces creates a rigid, engineering-focused UI.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{colors.white}` | `#ffffff` | Page background, button text, card surface | 51 | 1.0 | `--preset-color9` |
| `{colors.slate-dark}` | `#2d333c` | Primary body text | 51 | 0.8 | Computed Style |
| `{colors.gray-light}` | `#f6f6f6` | Section backgrounds, borders | 26 | 1.0 | `--preset-color7` |
| `{colors.gray-medium}` | `#eeeeee` | Secondary surface backgrounds | 52 | 0.8 | Computed Style |
| `{colors.gray-dark}` | `#444444` | Secondary text, borders | 67 | 0.8 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{colors.primary}` | `#263645` | Primary buttons, hero backgrounds | 39 | 0.8 | Computed Style |
| `{colors.accent}` | `#3cb5a3` | Accent text, button backgrounds, borders | 32 | 0.8 | Computed Style |
| `{colors.cyan}` | `#10b8c7` | Decorative text, links | 19 | 0.8 | Computed Style |
| `{colors.slate-alt}` | `#293c4c` | Decorative surface backgrounds | 3 | 0.6 | decorative_only |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Ubuntu | 200, 300, 400, 600, 700 | Headings, display | Ubuntu (Google Fonts) | Canonical |
| Roboto | 300, 400, 600, 700 | Body, UI, captions | Roboto (Google Fonts) | Apache 2.0 |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{typography.display}` | 48px | 48px | -1px | 400 | Odometer/Metrics | `span.odometer-digit` |
| `{typography.h2-bold}` | 45px | 30px | normal | 700 | Section headers | `h2` |
| `{typography.h2-light}` | 30px | 34px | normal | 300 | Sub-section headers | `h2` |
| `{typography.h3-card}` | 20px | 26px | normal | 700 | Card titles | `h3.card-title` |
| `{typography.h3-light}` | 18px | 26px | normal | 300 | Subheadings | `h3` |
| `{typography.body}` | 15px | 22px | normal | 400 | Default body text | `div.masonry-card` |
| `{typography.label-bold}` | 15px | 22px | 1px | 600 | Widget/Label titles | `h5.widget-title` |
| `{typography.caption}` | 11px | 22px | normal | 400 | Footer/Copyright | `div#copyright` |

### Principles
1. **Ubuntu for Authority:** All major headers must use Ubuntu to maintain the technical brand voice.
2. **Roboto for Density:** Use Roboto for all lists, cards, and long-form body copy to ensure legibility at small sizes.
3. **Lightweight Headers:** Use Ubuntu 300 for secondary headers to provide contrast against bold primary headers.

## Spacing
**Base unit:** 5px
| Token | Value | Occurrences |
|---|---|---|
| `{spacing.xs}` | 5px | 7 |
| `{spacing.sm}` | 10px | 18 |
| `{spacing.md}` | 15px | 85 |
| `{spacing.lg}` | 25px | 22 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{rounded.sharp}` | 0px | Default for cards, sections, and buttons | 317 occurrences |
| `{rounded.input}` | 1px | Form fields | 4 occurrences |
| `{rounded.pill}` | 50px | Large panels/special containers | 3 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.card}` | `rgba(0, 0, 0, 0.1) 2px 2px 3px 0px` | Interactive cards on white canvas | 9 occurrences |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action
**Pages observed:** https://zencontrol.com, https://zencontrol.com/about
**Spec:** Background `{colors.primary}` (#263645) | Text `{colors.white}` (#ffffff) | Radius `{rounded.sharp}` (0px) | Padding 10px 20px
**States observed:** Default | Hover: Not captured

#### Accent Button
**Role:** Secondary or "Learn More" actions
**Pages observed:** https://zencontrol.com
**Spec:** Background `{colors.accent}` (#3cb5a3) | Text `{colors.white}` (#ffffff) | Radius `{rounded.sharp}` (0px) | Typography `{typography.body}`
**States observed:** Default | Hover: Not captured

### Tier 2: Patterns

#### Feature Card
**Role:** Displaying product or solution benefits
**Pages observed:** https://zencontrol.com, https://zencontrol.com/about
**Spec:** Background `{colors.white}` (#ffffff) | Border 0px | Shadow `{shadow.card}` | Padding 15px | Radius `{rounded.sharp}`
**States observed:** Default | Hover: Not captured

#### Section Divider
**Role:** Separating major content blocks
**Pages observed:** https://zencontrol.com/about
**Spec:** Background `{colors.gray-light}` (#f6f6f6) | Border-top 2px `{colors.gray-light}` | Padding 70px 0px
**States observed:** Default

### Tier 3: Surface-specific

#### Dark Hero Block
**Role:** High-impact landing sections
**Pages observed:** https://zencontrol.com/about
**Spec:** Background `{colors.primary}` (#263645) | Text `{colors.gray-medium}` (#eeeeee) | Padding 25px 15px
**States observed:** Default

#### Info Badge
**Role:** Displaying metrics or status
**Pages observed:** https://zencontrol.com
**Spec:** Background `{colors.accent}` (#3cb5a3) | Text `{colors.white}` (#ffffff) | Typography `{typography.display}` (48px)
**States observed:** Default

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1200px (estimated) |
| Section Padding | 70px (vertical) |
| Card Grid Gap | 15px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Navigation collapses to hamburger; padding reduces to 15px; grid items stack 1-up. |

## Do's
- Use `#263645` for primary structural backgrounds.
- Pair Ubuntu 700 with Ubuntu 300 for hierarchical headers.
- Maintain `{rounded.sharp}` (0px) for all primary UI containers.
- Use `#3cb5a3` for interactive accents and success-state indicators.
- Apply `{shadow.card}` only to white surfaces to denote interactivity.

## Don'ts
- Do not use rounded corners on buttons or cards; keep all edges sharp (0px).
- Do not use Roboto for primary section headings.
- Do not use `#10b8c7` for primary buttons; it is reserved for text accents.
- Do not mix Ubuntu and Roboto within the same text block or paragraph.
- Do not use shadows on dark `#263645` backgrounds.

## Similar brands
- Schneider Electric
- Siemens (Industrial UI)
- Honeywell
- ABB

## Quick start

```css
/* CSS Custom Properties */
:root {
  --zc-primary: #263645;
  --zc-accent: #3cb5a3;
  --zc-white: #ffffff;
  --zc-gray-light: #f6f6f6;
  --zc-text-main: #2d333c;
  --zc-font-heading: 'Ubuntu', sans-serif;
  --zc-font-body: 'Roboto', sans-serif;
  --zc-radius-sharp: 0px;
  --zc-shadow-card: rgba(0, 0, 0, 0.1) 2px 2px 3px 0px;
}
```

## Known gaps
- Hover and active states for buttons were not explicitly captured in the static evidence.
- Mobile-specific typography scale for display sizes was not fully sampled.
- Form validation states (error/warning) were not present in the analyzed pages.

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