# Cubictree Design System

> A corporate legal-tech interface defined by high-contrast achromatic surfaces, structured data grids, and deep navy functional accents.

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

## TL;DR
Cubictree utilizes a professional, data-heavy aesthetic that leans on a neutral foundation of white (#ffffff) and cool grays (#c1c1c1, #d5d5d5). The system is "monochrome-first," using absolute black (#0e0e0e) and dark charcoal (#333333) for high-legibility typography. Functional accents are strictly reserved for corporate blue tones (#3b4052, #221f6a) and a single high-visibility yellow (#ffdb49) used for specific border highlights. Geometry is predominantly sharp (0px radius), with large-scale circular containers (136px) used exclusively for process diagrams and iconography.

## Signature DNA
1. **Achromatic Data Scaffolding** (The interface relies on #c1c1c1 and #cecece hairlines to compartmentalize dense legal information without introducing chromatic noise.)
2. **Open Sans Hierarchy** (A disciplined application of Open Sans, ranging from 11px captions to 30px headings, maintaining a 500-weight signature for all primary section titles.)
3. **Circular Process Nodes** (Large 136px radius backgrounds in soft blue #e8f0f9 are used to anchor abstract legal workflows, providing the only organic shapes in an otherwise rigid grid.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.text.primary}` | `#333333` | Primary body text and UI labels | 142 | 0.8 | computed_style |
| `{color.canvas.main}` | `#ffffff` | Primary page background and card surfaces | 21 | 0.8 | computed_style |
| `{color.border.default}` | `#c1c1c1` | Standard section and component borders | 32 | 0.8 | computed_style |
| `{color.text.muted}` | `#d5d5d5` | De-emphasized labels and secondary text | 15 | 0.8 | computed_style |
| `{color.ink.bold}` | `#0e0e0e` | High-contrast headings and primary brand text | 4 | 0.6 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.accent.navy}` | `#3b4052` | Primary brand accent for icons and links | 37 | 0.8 | computed_style |
| `{color.accent.deep-blue}` | `#221f6a` | Secondary emphasis and navigation hover | 12 | 0.8 | computed_style |
| `{color.surface.tint}` | `#e8f0f9` | Background for process icons and light cards | 4 | 0.6 | computed_style |
| `{color.border.warning}` | `#ffdb49` | Decorative border highlight (yellow) | 4 | 0.6 | computed_style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|------------------------|---------|
| Open Sans | 400, 500, 600, 700 | All UI, headings, and body | N/A (Google Font) | Apache 2.0 |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.h2}` | 30px | 33px | normal | 500 | Main section headings | `h2` |
| `{type.h2.sm}` | 26px | 28.6px | normal | 500 | Secondary headings | `h2` |
| `{type.h3}` | 22px | 24.2px | normal | 500 | Process/Feature titles | `h3.ct-process-title` |
| `{type.body.bold}` | 19px | 27.1px | normal | 700 | Strong emphasis body | `b` |
| `{type.body.md}` | 16px | 22.8px | normal | 700 | Standard bold body | `b` |
| `{type.body.sm}` | 14px | 20px | normal | 400 | Default running text | `section.featureboxwrapper` |
| `{type.label}` | 14px | 24px | normal | 600 | Process numbers/UI labels | `div.ct-process-number` |
| `{type.caption}` | 12px | 17.1px | normal | 400 | Footer and small notes | `p` |

### Principles
1. **Medium Weight Signatures**: All major headings (H2, H3) must use weight 500 to maintain a professional, non-aggressive tone.
2. **Tight Heading Leading**: Line heights for display text are kept at 1.1x the font size (e.g., 30px/33px).
3. **Body Legibility**: Standard body text (14px) uses a generous 1.42x line height (20px) for long-form legal descriptions.

## Spacing
**Base unit:** 5px (derived from common padding/margin increments)
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 5px | 74 |
| `{space.sm}` | 10px | 38 |
| `{space.md}` | 15px | 70 |
| `{space.lg}` | 20px | 13 |
| `{space.xl}` | 35px | 9 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.none}` | 0px | Standard cards, inputs, and sections | 225 occurrences |
| `{radius.sm}` | 9px | Specific UI controls and small surfaces | Surface component |
| `{radius.md}` | 24px | Feature cards and testimonial panels | Card component |
| `{radius.full}` | 136px | Process icon backgrounds | Card component |

## Elevation
| Level | Value | Use | Evidence |
|------|-------|-----|----------|
| `{shadow.card}` | `rgba(0, 0, 0, 0.075) 0px 1.25px 2.5px 0px` | Subtle lift for white cards on gray | Card component |
| `{shadow.float}` | `rgba(0, 0, 0, 0.1) -1px 5px 11px 0px` | Floating icon or modal elements | Card component |

## Components

### Tier 1: Foundational

#### Standard Surface
**Role:** Default container for content blocks.
**Pages observed:** cubictree.com
**Spec:** Background: transparent / Text: #333333 / Border: 1px #c1c1c1 / Radius: 0px / Padding: 5px
**States observed:** Default: captured | Hover: not captured

#### Process Node
**Role:** Background for workflow iconography.
**Pages observed:** cubictree.com
**Spec:** Background: #e8f0f9 / Text: #0e0e0e / Radius: 136px / Typography: {type.body.sm}
**States observed:** Default: captured

### Tier 2: Patterns

#### Feature Card
**Role:** Highlighting specific service offerings.
**Pages observed:** cubictree.com
**Spec:** Background: #ffffff / Text: #333333 / Shadow: {shadow.card} / Radius: 2.5px / Padding: 15px
**States observed:** Default: captured | Hover: captured (subtle shadow increase)

#### Testimonial Panel
**Role:** Customer quotes and feedback.
**Pages observed:** cubictree.com
**Spec:** Background: #515251 / Text: #ffffff / Radius: 24px / Padding: 20px
**States observed:** Default: captured

### Tier 3: Surface-specific

#### Highlighted Border Surface
**Role:** Drawing attention to specific UI groupings.
**Pages observed:** cubictree.com
**Spec:** Background: transparent / Border: 2px #ffdb49 / Radius: 0px or 30px
**States observed:** Default: captured

#### Client Logo Grid
**Role:** Trust signals and partner display.
**Pages observed:** cubictree.com
**Spec:** Border: 1px #c1c1c1 / Radius: 0px / Background: #ffffff
**States observed:** Default: captured

## Layout
| Property | Value |
|------|-------|
| Max-width | 1140px |
| Section Gap | 50px - 70px |
| Column Gutter | 30px |

## Do's
- Use `#333333` for all standard body text to ensure WCAG compliance on white backgrounds.
- Apply `{radius.none}` (0px) to all primary structural containers.
- Use `Open Sans` weight 500 for all H2 and H3 headings.
- Reserve `#ffdb49` (yellow) exclusively for 2px border highlights.
- Maintain 15px (`{space.md}`) padding for standard content cards.

## Don'ts
- **Wrong:** Using a saturated blue as the primary page background. **Right:** Use `#ffffff` or `#c1c1c1`. **Reason:** The brand is monochrome-parent; saturated colors are reserved for accents.
- **Wrong:** Applying heavy rounded corners (e.g., 8px) to data tables. **Right:** Use 0px. **Reason:** Cubictree's DNA is sharp and architectural.
- **Wrong:** Using weight 700 for display headings. **Right:** Use weight 500. **Reason:** The system favors a professional, lighter-weight heading signature.

## Quick start

```css
:root {
  --ct-color-primary: #0e0e0e;
  --ct-color-text: #333333;
  --ct-color-border: #c1c1c1;
  --ct-color-accent-navy: #3b4052;
  --ct-color-accent-yellow: #ffdb49;
  --ct-font-main: 'Open Sans', sans-serif;
  --ct-radius-sharp: 0px;
  --ct-shadow-subtle: 0px 1.25px 2.5px 0px rgba(0, 0, 0, 0.075);
}
```

## Known gaps
- Mobile-specific navigation transitions were not captured in the static trace.
- Active states for text inputs were not present in the analyzed pages.
- Hover states for the primary "Process Node" components were not captured.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://cubictree.com | 1440x900 | 2026-06-06 |
| Homepage (Mobile) | https://cubictree.com | 390x844 | 2026-06-06 |