# Spectrocloud Design System

> Sharp geometric precision meeting a warm, paper-like foundation, punctuated by high-contrast sunset orange actions.

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

## TL;DR
Spectrocloud utilizes a high-contrast "monochrome plus one" strategy, where a foundation of deep ink (#012121) and warm paper (#f7f1ed) is activated by a singular primary accent: Sunset Orange (#b94b01). The typography is anchored by Plus Jakarta Sans, specifically leveraging a lightweight 300-weight for large display headings to create an architectural, technical feel. Layouts are strictly rectangular with 0px border radii on primary CTAs, though subtle 4px radii appear on content cards. The system relies on geometric isometric illustrations and dense, multi-column grids to communicate complex infrastructure orchestration.

## Signature DNA
1. **The Light-Weight Display** (Plus Jakarta Sans at weight 300 for H1/H2 headings creates a technical, precise authority without the aggression of heavy bold weights.)
2. **Sharp-Edge CTAs** (Primary actions use a 0px radius and 2px borders, rejecting the common SaaS "pill" trend in favor of a rigid, engineering-focused aesthetic.)
3. **Paper & Ink Foundation** (The use of #f7f1ed "Paper" as a primary surface instead of pure white provides a warm, tactile backdrop for the dark #012121 "Ink" text.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `--color--n1-paper` | `#f7f1ed` | Primary page background, button text | 12 | 1.0 | Computed Style |
| `--color--gr1-ink` | `#012121` | Primary text, dark surface backgrounds | 25 | 1.0 | CSS Variable |
| `foundation-black` | `#000000` | High-contrast text, button borders | 28 | 0.8 | Computed Style |
| `foundation-white` | `#ffffff` | Button text, secondary text | 19 | 0.8 | Computed Style |
| `foundation-paper-soft` | `#faf9f8` | Card backgrounds | 4 | 0.6 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `--color--o1-sunset-orange` | `#b94b01` | Primary CTA background, links, borders | 21 | 1.0 | CSS Variable |
| `--color--t2-tranquil-teal` | `#005b5b` | Secondary text, card borders | 3 | 1.0 | CSS Variable |
| `accent-purple` | `#61396b` | Section backgrounds (decorative) | 4 | 0.6 | Computed Style |
| `accent-green` | `#395d18` | Success indicators/text | 3 | 0.6 | Computed Style |
| `--color--g1-tranquil-teal` | `#1f7a78` | Decorative background elements | 2 | 1.0 | Decorative Only |
| `--color--y1-gold-leaf` | `#f0be65` | Decorative background elements | 2 | 1.0 | Decorative Only |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
| :--- | :--- | :--- | :--- | :--- |
| Plus Jakarta Sans | 200, 300, 400, 500 | All headings, body, and UI | Plus Jakarta Sans (Google Fonts) | SIL Open Font |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
| :--- | :--- | :--- | :--- | :--- | :--- | :--- |
| `display-lg` | 40px | 48.42px | -0.40px | 300 | Hero/Section Headings | `h2.where_h2` |
| `heading-md` | 25px | 30.13px | normal | 400 | Sub-section headers | `h2.why-palette-announce-h2` |
| `quote-text` | 25px | 32.64px | normal | 300 | Testimonials | `div.testimonials_quote-text` |
| `body-lg` | 16px | 24.21px | normal | 400 | Hero paragraph text | `p.hp-hero_p` |
| `button-label` | 16px | 20.98px | 0.16px | 500 | CTA text | `a.button_main` |
| `body-md` | 16px | 19.37px | normal | 400 | General body copy | `section.section_hp-hero-rd` |
| `link-text` | 16px | 19.37px | 0.16px | 500 | Inline card links | `div.where-card_link-text` |
| `body-sm` | 14px | 21.52px | normal | 400 | Small descriptions | `p.why-palette-announce-p` |

### Principles
1. **Lightweight Authority:** Use weight 300 for all display text above 32px to maintain a precise, engineered feel.
2. **Tight Display Tracking:** Apply negative letter spacing (approx -1%) to display-large tokens to keep light weights legible.
3. **Interactive Emphasis:** Interactive elements (buttons, links) use weight 500 to distinguish from static body text (weight 400).

## Spacing
**Base unit:** 18px (derived from modal occurrences)
| Token | Value | Occurrences |
| :--- | :--- | :--- |
| `space-xs` | 14px | 4 |
| `space-sm` | 18px | 11 |
| `space-md` | 36px | 7 |
| `space-lg` | 43px | 14 |
| `space-xl` | 54px | 3 |

## Border radius
| Token | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `radius-none` | 0px | Buttons, primary containers | 96 occurrences |
| `radius-sm` | 2px | Form inputs | 4 occurrences |
| `radius-md` | 4px | Content cards | 4 occurrences |

## Elevation
The system is primarily flat, relying on color blocking and 2px borders rather than shadows for depth.
| Level | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `flat` | none | All buttons and cards | `shadow: none` in component specs |

## Components

### Tier 1: Foundational

#### Button Primary
**Role:** Main call to action (e.g., "Book a demo")
**Pages observed:** https://spectrocloud.com
**Spec:** Background: `#b94b01` | Text: `#ffffff` | Border: `0px` | Radius: `0px` | Padding: `18px 43px` | Typography: `16px/500`
**States observed:** Default: Captured | Hover: Not captured

#### Button Outline
**Role:** Secondary actions on light backgrounds
**Pages observed:** https://spectrocloud.com
**Spec:** Background: `transparent` | Text: `#b94b01` | Border: `2px solid #b94b01` | Radius: `0px` | Padding: `18px 43px`
**States observed:** Default: Captured | Hover: Not captured

### Tier 2: Patterns

#### Content Card
**Role:** Feature highlights and solution categories
**Pages observed:** https://spectrocloud.com
**Spec:** Background: `#faf9f8` | Text: `#005b5b` | Border: `0px` | Radius: `4px` | Padding: `45px`
**States observed:** Default: Captured

#### Navigation Link
**Role:** Header and footer navigation
**Pages observed:** https://spectrocloud.com
**Spec:** Background: `transparent` | Text: `#012121` | Typography: `16px/400`
**States observed:** Default: Captured

### Tier 3: Surface-specific

#### Dark Surface Button
**Role:** CTA on dark teal or purple backgrounds
**Pages observed:** https://spectrocloud.com
**Spec:** Background: `transparent` | Text: `#f7f1ed` | Border: `2px solid #f7f1ed` | Radius: `0px`
**States observed:** Default: Captured

#### Testimonial Block
**Role:** Social proof sections
**Pages observed:** https://spectrocloud.com
**Spec:** Background: `transparent` | Text: `#012121` | Typography: `25px/300` | Padding: `space-lg`
**States observed:** Default: Captured

## Layout
| Property | Value |
| :--- | :--- |
| Max Content Width | 1440px |
| Grid Columns | 12-column desktop |
| Section Padding | 54px (vertical) |
| Column Gap | 36px |

## Responsive
| Breakpoint | Width | Key changes |
| :--- | :--- | :--- |
| Mobile | 390px | Buttons become full-width; padding reduces to 14px; 1-column stack. |
| Desktop | 1440px | Multi-column grids (2-up or 4-up cards). |

## Imagery & decoration
- **Isometric Graphics:** Uses complex isometric illustrations with a specific palette of teal, orange, and gold.
- **Geometric Patterns:** Repeating hexagonal or "honeycomb" patterns used as background overlays in hero and footer sections.
- **Avoidance:** No rounded "pill" shapes, no soft drop shadows, and no photographic backgrounds (prefers solid color blocks).

## Do's
- Use `#f7f1ed` (Paper) as the default background for long-form content.
- Set all primary display headings to `Plus Jakarta Sans` weight 300.
- Maintain a strict `0px` border radius on all primary and secondary buttons.
- Use `2px` borders for outline buttons to ensure visibility against the paper background.
- Reserve `#b94b01` (Sunset Orange) for the most critical user actions.

## Don'ts
- **Wrong:** Using `#b94b01` for large background sections. **Right:** Use `#012121` or `#61396b` for backgrounds. **Reason:** Orange is a high-voltage signal color reserved for CTAs.
- **Wrong:** Applying `9999px` (pill) radius to buttons. **Right:** Use `0px`. **Reason:** The brand identity is built on sharp, architectural precision.
- **Wrong:** Labeling a sub-brand's specific accent (like a product-specific blue) as the parent primary. **Right:** Always use `#b94b01` as the primary parent accent.
- Do not use bold weights (700+) for display headings; stick to 300 for the signature look.
- Do not use standard pure white (#ffffff) for page-level backgrounds.

## Similar brands
- HashiCorp
- Vercel (monochrome foundation)
- Stripe (technical precision)
- Grafana

## Quick start

### CSS Custom Properties
```css
:root {
  --color-paper: #f7f1ed;
  --color-ink: #012121;
  --color-orange: #b94b01;
  --font-main: 'Plus Jakarta Sans', sans-serif;
  --radius-button: 0px;
  --radius-card: 4px;
}
```

### Style Dictionary JSON
```json
{
  "color": {
    "brand": {
      "primary": { "value": "#b94b01" },
      "ink": { "value": "#012121" },
      "paper": { "value": "#f7f1ed" }
    }
  },
  "font": {
    "family": { "value": "Plus Jakarta Sans" },
    "weight": { "display": { "value": "300" } }
  }
}
```

## Agent prompt examples
- "Generate a primary CTA button using Spectrocloud's sharp-edge style: #b94b01 background, #ffffff text, 0px border-radius, and 18px 43px padding."
- "Create a section header using Plus Jakarta Sans weight 300 at 40px with -0.4px letter spacing on a #f7f1ed background."
- "Design a feature card with a #faf9f8 background, 4px border-radius, and 45px internal padding."

## Known gaps
- Hover and active states for buttons were not explicitly captured in the provided evidence.
- Mobile-specific typography scale (font-size adjustments) was not fully detailed in the token set.

## Provenance
| Page sampled | URL | Viewport | Capture time |
| :--- | :--- | :--- | :--- |
| Homepage | https://spectrocloud.com | 1440px / 390px | 2026-06-06T05:21:14Z |