# Clockwork Design System

> High-density technical monochrome punctuated by vibrant cyan-to-purple gradients, anchored in bold Roboto typography.

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

## TL;DR
Clockwork utilizes a "Dark Mode" foundation, where a deep charcoal canvas `#191b1f` supports high-contrast white text and technical diagrams. The system is strictly monochrome in its structural elements, reserving color for high-voltage "Brand Moments" using a signature horizontal gradient from purple to cyan `#07bcc8`. Typography is exclusively Roboto, leaning heavily on weight 700 for technical authority and weight 400 for dense explanatory prose. Components feature generous corner radii (20px to 100px) that soften the otherwise severe industrial aesthetic.

## Signature DNA
1. **The Voltage Gradient** (A horizontal linear gradient transitioning from purple to cyan `#07bcc8`, used exclusively for primary CTAs and key technical emphasis to signal "active" AI fabric).
2. **Technical Density** (High-information layouts using 24px and 28px Roboto for sub-headers, creating a documentation-first feel that prioritizes clarity over whitespace).
3. **Pill-Softened Industrialism** (The juxtaposition of a `#191b1f` dark grid with extreme `100px` border radii on buttons and `20px` on feature cards).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `{color.canvas}` | `#191b1f` | Primary page background | 10 | 0.6 | Computed Style |
| `{color.canvas.alt}` | `#222428` | Secondary section background | 5 | 0.6 | Computed Style |
| `{color.ink.light}` | `#ffffff` | Primary text on dark backgrounds | 186 | 1.0 | `--wp--preset--color--white` |
| `{color.ink.dark}` | `#000000` | Text on light components | 5 | 1.0 | `--wp--preset--color--black` |
| `{color.border.muted}` | `#d0d5d2` | Inactive UI borders | 0 | 0.9 | Brand Page |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `{color.accent.cyan}` | `#07bcc8` | Gradient end-state, active text | 22 | 0.8 | Computed Style |
| `{color.accent.blue}` | `#0000ee` | Legacy link color (decorative_only) | 10 | 0.6 | Computed Style |
| `{color.accent.coral}` | `#ff827f` | Warning/Alert text | 4 | 0.6 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
| :--- | :--- | :--- | :--- | :--- |
| Roboto | 400, 500, 700 | Heading & UI | Roboto (Google Fonts) | Apache 2.0 |
| Arial | 400 | System Fallback | N/A | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
| :--- | :--- | :--- | :--- | :--- | :--- | :--- |
| `{type.display.xl}` | 64px | 76.8px | normal | 700 | Hero Headlines | `h1.color--default` |
| `{type.display.lg}` | 48px | 57.6px | normal | 700 | Stats/Numbers | `div.stat-stat` |
| `{type.display.md}` | 42px | 50.4px | normal | 700 | Section Titles | `h2.block-title` |
| `{type.heading.lg}` | 30px | 42px | normal | 700 | Accordion Titles | `a.accordionMedia-item__title` |
| `{type.heading.md}` | 28px | 33.6px | normal | 700 | Bold Emphasis | `span.u-bold` |
| `{type.heading.sm}` | 26px | 26px | normal | 700 | Primary Buttons | `a.btn.btn--white_outline` |
| `{type.body.lg}` | 24px | 28.8px | normal | 400 | Section Intro | `section.block--bgblack` |
| `{type.body.md}` | 18px | 18px | normal | 700 | Default Buttons | `a.btn.btn--default` |
| `{type.caption}` | 12px | 14.4px | -0.24px | 500 | Technical Labels | `tspan` |

### Principles
1. **Heavyweight Headers:** Use Roboto 700 for all titles to maintain a "built" industrial feel.
2. **Achromatic Hierarchy:** Use white text for 90% of content; color is a signal, not a decoration.
3. **Tight Leading:** Display styles use a 1.2x line-height ratio to keep large type blocks cohesive.

## Spacing
**Base unit:** 10px
| Token | Value | Occurrences |
| :--- | :--- | :--- |
| `{space.xs}` | 10px | 17 |
| `{space.sm}` | 20px | 3 |
| `{space.md}` | 40px | 19 |
| `{space.lg}` | 80px | 6 |
| `{space.xl}` | 120px | 14 |

## Border radius
| Token | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{radius.none}` | 0px | Section containers | 179 occurrences |
| `{radius.sm}` | 4px | Form inputs | `input` |
| `{radius.md}` | 20px | Feature cards | `Surface` component |
| `{radius.full}` | 100px | CTA Buttons | `Rounded Button` |

## Elevation
| Level | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{shadow.outline}` | `inset 0 0 0 2px #ffffff` | Outlined Button Focus | `Rounded Button` spec |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary and Secondary Actions
**Pages observed:** https://clockwork.io
**Spec:** Background: `transparent` / Text: `#ffffff` / Border: `1px #ffffff` / Radius: `100px` / Padding: `17px 30px` / Typography: `Roboto 700 26px`
**States observed:** Default | Hover: {not captured}

#### Text Input
**Role:** Form entry
**Pages observed:** https://clockwork.io
**Spec:** Background: `transparent` / Text: `#07bcc8` / Border: `1px #07bcc8` / Radius: `26px` / Padding: `0px` / Typography: `Roboto 13px`
**States observed:** Default | Focus: {captured}

### Tier 2: Patterns

#### Feature Card
**Role:** Grouping technical benefits
**Pages observed:** https://clockwork.io
**Spec:** Background: `transparent` / Text: `#ffffff` / Border: `none` / Radius: `20px` / Padding: `20px` / Typography: `Roboto 28px`
**States observed:** Default

### Tier 3: Surface-specific

#### Dark Section
**Role:** Primary content container
**Pages observed:** https://clockwork.io
**Spec:** Background: `#191b1f` / Text: `#ffffff` / Border: `none` / Radius: `0px` / Padding: `120px 0px`
**States observed:** N/A

## Layout
| Property | Value |
| :--- | :--- |
| Max Content Width | 1440px |
| Section Vertical Padding | 120px |
| Column Gap | 40px |

## Imagery & decoration
Clockwork uses high-fidelity 3D isometric diagrams of server racks and network nodes. These diagrams often feature glowing "nodes" in the signature cyan-to-purple gradient. The brand avoids lifestyle photography, opting instead for abstract representations of data flow.

## Do's
- Use `#191b1f` for the primary background to maintain "Dark Mode" authority.
- Apply the `100px` pill radius to all primary interactive elements.
- Use Roboto 700 for any text larger than 24px.
- Reserve the `#07bcc8` gradient for the "active" state of the AI fabric.
- Maintain 120px of vertical breathing room between major content blocks.

## Don'ts
- **Wrong:** Using a generic blue `#0000ee` for primary buttons. **Right:** Use the white outline or gradient fill. **Reason:** The brand is monochrome-first; standard web-blue breaks the technical aesthetic.
- **Wrong:** Applying a border radius to the main section containers. **Right:** Keep sections at `0px` radius. **Reason:** The grid must feel structural and infinite.
- **Wrong:** Using a sub-brand accent color (like a hypothetical orange) as the page background. **Right:** Stick to `#191b1f`.

## Similar brands
- HashiCorp (Technical density, dark mode)
- NVIDIA (Industrial AI aesthetic)
- Cloudflare (Diagram-heavy technical communication)

## Quick start

```css
/* CSS Variables */
:root {
  --cw-canvas: #191b1f;
  --cw-white: #ffffff;
  --cw-accent-cyan: #07bcc8;
  --cw-font-main: 'Roboto', sans-serif;
  --cw-radius-pill: 100px;
  --cw-section-pad: 120px;
}
```

## Agent prompt examples
- "Generate a technical feature card for Clockwork using a #191b1f background, 20px border radius, and Roboto 700 headers."
- "Create a primary CTA button with a 100px border radius, white 2px outline, and 26px Roboto Bold text."
- "Design a section header using 42px Roboto 700 with 120px top padding on a dark canvas."

## Known gaps
- Hover and Active states for buttons were not explicitly captured in the computed style pipeline.
- Mobile-specific typography scaling (fluid type) was not fully mapped.

## Provenance
| Page sampled | URL | Viewport | Capture time |
| :--- | :--- | :--- | :--- |
| Homepage | https://clockwork.io | 1440x900 | 2026-06-06 |