# Mcube Design System

> Brutalist utility anchored by high-contrast blue links on a stark, neutral gray foundation.

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

## TL;DR
Mcube utilizes a monochrome foundation of #313131 (Dark Charcoal) and #d9d9d9 (Light Gray) to create a high-utility, low-friction interface. The system relies on a single chromatic accent, #0000ee (Pure Blue), reserved exclusively for interactive text and links. Typography is strictly functional, pairing `system-ui` for all primary hierarchy with `monospace` for technical captions. Layouts are defined by sharp 0px corners and 1px borders, avoiding depth or soft shadows in favor of a flat, architectural grid.

## Signature DNA
1. **The Blue Anchor** (#0000ee used as the sole interactive signal across all pages, providing a 6.7:1 contrast ratio against the gray canvas).
2. **Sharp-Edge Brutalism** (Universal 0px border radius for all surfaces and components, creating a rigid, structured aesthetic).
3. **Neutral Foundation** (A strictly achromatic palette of #313131 and #d9d9d9 that recedes to prioritize content and links).

## Family Map
*No sub-brands captured in source.*

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|-------|------|------|------|
| `{color.text.primary}` | `#313131` | Primary body text and headings | 24 | 0.8 | Computed Style |
| `{color.border.default}` | `#d9d9d9` | Component borders and dividers | 6 | 0.6 | Computed Style |
| `{color.canvas}` | `#d9d9d9` | Page background (resolved) | 6 | 0.6 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|-------|------|------|------|
| `{color.text.link}` | `#0000ee` | Interactive links and primary actions | 6 | 0.6 | Computed Style |

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|-------|-------|------|------|
| `system-ui` | 400, 600 | Display, Heading, Body | Inter | System Default |
| `monospace` | 400 | Technical captions, code | JetBrains Mono | System Default |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display}` | 40px | 50px | normal | 600 | Page Hero | `h1` |
| `{type.heading.sm}` | 24px | 30px | normal | 600 | Section Headers | `h2#FbRG5` |
| `{type.body}` | 16px | 24px | normal | 400 | Running Text | `p#jpqrL2` |
| `{type.caption}` | 12px | 18px | normal | 400 | Footer, metadata | `div.footer-inner` |
| `{type.mono}` | 12px | 18px | normal | 400 | Code snippets | `code` |
| `{type.nav}` | 16px | 24px | normal | 400 | Navigation links | `nav a` |
| `{type.label}` | 12px | 18px | normal | 600 | Small UI labels | `label` |
| `{type.button}` | 16px | 24px | normal | 600 | Primary actions | `button` |

### Principles
1. **Interactive Blue:** All text in #0000ee is interactive; all text in #313131 is static.
2. **Weight for Hierarchy:** Use 600 weight exclusively for structural orientation (headings, labels).
3. **Monospace for Metadata:** Technical or system-generated content must use the `monospace` stack.

## Spacing
**Base unit:** 8px
| Token | Value | Occurrences |
|------|-------|------|
| `{space.xs}` | 8px | 3 |
| `{space.md}` | 16px | 3 |
| `{space.xl}` | 32px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.none}` | 0px | Universal for all components | `radius: 0px` (30 occurrences) |

## Elevation
| Level | Value | Use | Evidence |
|------|-------|-----|----------|
| `{elevation.flat}` | none | All surfaces | `shadow: none` |

## Components
### Tier 1: Foundational
#### Surface
**Role:** Base container for content sections.
**Pages observed:** mcube.com, /pricing, /about
**Spec:** Background: transparent / Text: #313131 / Border: 1px #d9d9d9 / Radius: 0px / Padding: 16px 0px
**States observed:** Default: captured | Hover: not captured

### Tier 2: Patterns
#### Text Link
**Role:** Primary navigation and inline redirection.
**Pages observed:** mcube.com, /pricing
**Spec:** Text: #0000ee / Typography: `{type.body}` / Decoration: underline (observed on hover)
**States observed:** Default: captured | Hover: captured

#### Footer
**Role:** Global site metadata and legal links.
**Pages observed:** mcube.com, /about
**Spec:** Background: transparent / Border-top: 1px #d9d9d9 / Typography: `{type.caption}`
**States observed:** Default: captured

### Tier 3: Surface-specific
Not captured in source.

## Layout
| Property | Value |
|------|-------|
| Max-width | 1440px |
| Section Padding | 32px |
| Column Gap | 16px |

## Responsive
| Breakpoint | Width | Key changes |
|------|-------|-------------|
| Mobile | 390px | Stacked vertical layout, 16px horizontal gutters |
| Desktop | 1440px | Multi-column grid, 32px horizontal gutters |

## Imagery & decoration
Mcube avoids photography and illustrative gradients. Decoration is limited to 1px #d9d9d9 dividers and the Cloudflare verification widget (external asset).

## Do's
- Use #0000ee for all clickable text elements.
- Maintain 0px border radius on every container.
- Use #d9d9d9 for subtle structural dividers.
- Ensure `system-ui` is the primary font stack for legibility.
- Apply 16px padding to standard content surfaces.

## Don'ts
- **Wrong:** Using a rounded radius for buttons. **Right:** 0px radius. **Reason:** Brand identity is strictly brutalist.
- **Wrong:** Using #0000ee for non-interactive headings. **Right:** #313131. **Reason:** Blue is reserved for interaction.
- **Wrong:** Introducing a sub-brand color (e.g., Orange) as a primary action. **Right:** Stick to #0000ee. **Reason:** Parent brand is monochrome + blue.
- Do not use drop shadows or blurs.
- Do not use serif fonts for body copy.

## Similar brands
- Craigslist
- Berkshire Hathaway
- Standard Notes
- Wikipedia (Legacy)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --mc-color-primary: #0000ee;
  --mc-color-ink: #313131;
  --mc-color-canvas: #d9d9d9;
  --mc-radius-none: 0px;
  --mc-font-main: system-ui, sans-serif;
  --mc-font-mono: monospace;
}
```

```json
/* Style Dictionary */
{
  "color": {
    "accent": { "value": "#0000ee" },
    "foundation": {
      "ink": { "value": "#313131" },
      "canvas": { "value": "#d9d9d9" }
    }
  }
}
```

## Agent prompt examples
- "Generate a pricing table using #d9d9d9 borders, 0px border-radius, and #0000ee for the 'Select Plan' text links."
- "Create a footer component with a 1px top border in #d9d9d9 and 12px monospace text."
- "Design a hero section with a 40px system-ui heading in #313131 and a primary link in #0000ee."

## Known gaps
- Hover and Active states for buttons were not fully captured due to security verification overlays.
- Form input styles (text fields, checkboxes) were not present in the analyzed pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|------|-------|-------|-------|
| Homepage | https://mcube.com | 1440px | 2026-06-06 |
| Pricing | https://mcube.com/pricing | 1440px | 2026-06-06 |
| About | https://mcube.com/about | 1440px | 2026-06-06 |