# Dtcp.capital Design System

> Technical precision meets digital transformation through ultra-light Ridley Grotesk headlines and a high-contrast teal-on-dark aesthetic.

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

## TL;DR
Dtcp.capital utilizes a "monochrome-plus-accent" system where a deep, near-black foundation (`#1a2b2d`) is punctured by a vibrant, high-voltage teal (`#60cfbe`). The typography is the primary identity driver, featuring **Ridley Grotesk** at an exceptionally light signature weight of 250 for display numbers and headlines. Layouts are structured with aggressive 100px section spacing and sharp 0px corners, reinforcing a technical, architectural feel. Interactive elements are minimized to thin-stroke arrows and text links, avoiding heavy button components in favor of a streamlined, data-driven interface.

## Signature DNA
1. **The 250-Weight Display:** Ridley Grotesk is deployed at weight 250 for large-scale metrics and headlines, creating an airy, sophisticated technical atmosphere (observed on Homepage and About).
2. **Teal-on-Dark Contrast:** The use of `--mainColor` (#60cfbe) against dark backgrounds for primary headlines and data points creates a high-voltage digital signal (observed across all analyzed pages).
3. **Sharp Geometry:** A strict adherence to 0px border radii across all containers and interactive elements signals institutional rigor and precision.

## Family Map
| Sub-brand | Primary color | Graphics motif | Inherits | Overrides |
|-----------|---------------|----------------|----------|-----------|
| None | N/A | N/A | N/A | N/A |

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `--contrastColorInverted` | `#ffffff` | Primary text on dark, background | 121 | 1 | Computed |
| `--fontColorDark` | `#1a2b2d` | Deep background foundation | 1 | 0.9 | Token |
| `--contrastColor` | `#000000` | Absolute black for deep depth | 1 | 1 | Token |
| `--backgroundColor` | `#f1f1f1` | Light section backgrounds | 1 | 1 | Token |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `--mainColor` | `#60cfbe` | Primary brand accent, headlines | 71 | 1 | Computed |
| `--secondColor` | `#2a6262` | Decorative dark teal (decorative_only) | 2 | 1 | Computed |
| `--mainColorLight` | `#87dbce` | Hover states / soft accents | 1 | 1 | Token |

### Semantic
| Token | Hex | Role |
|-------|-----|------|
| `--warningColor` | `#b10000` | Error states and validation |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Ridley Grotesk | 250, 300, 400, 500, 600 | Heading, Display, UI | Inter | Proprietary |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.mega}` | 116px | 92.8px | normal | 250 | Hero Metrics | `p.number` |
| `{type.display.xl}` | 115px | 110.72px | normal | 500 | Image Overlay | `p.text-on-image-text` |
| `{type.display.lg}` | 48px | 49.36px | normal | 300 | Section Headlines | `h2.headline` |
| `{type.heading.md}` | 32px | 39.5px | normal | 400 | Sub-headlines | `h3` |
| `{type.heading.sm}` | 22px | 31.9px | normal | 300 | Intro Paragraphs | `p:nth-of-type(1)` |
| `{type.ui.button}` | 22px | 26.4px | normal | 400 | CTA Links | `a.button` |
| `{type.ui.label}` | 22px | 31.51px | normal | 600 | Slider Pagination | `span.current_slide` |
| `{type.title.sm}` | 20px | 31.78px | normal | 600 | Component Titles | `p.title` |

### Principles
1. **Weight Contrast:** Pair ultra-light 250 weights for numbers with 400-500 weights for supporting labels.
2. **Teal Headlines:** Primary section headers use `--headlineColor` (#60cfbe) to maintain brand voltage.
3. **Uppercase Utility:** Navigation and small labels often utilize uppercase Ridley Grotesk for a structured, architectural feel.

## Spacing
**Base unit:** 4px (Inferred)
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 8px | 10 |
| `{space.sm}` | 11px | 25 |
| `{space.md}` | 22px | 34 |
| `{space.lg}` | 30px | 10 |
| `{space.section}` | 100px | 14 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | All buttons, cards, and containers | 198 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| Flat | None | The system is entirely flat; no shadows observed | Page analysis |

## Components

### Tier 1: Foundational

#### Text Link CTA
**Role:** Primary navigation and section transitions.
**Pages observed:** Homepage, About, Pricing.
**Spec:** Text: `#60cfbe` | Typography: `Ridley Grotesk 22px/400` | Border-bottom: 1px solid `#60cfbe` (on hover).
**States observed:** Default | Hover: Captured.

#### Arrow Button
**Role:** Directional navigation and "Read More" actions.
**Pages observed:** Homepage, News.
**Spec:** Stroke: `#ffffff` or `#60cfbe` | Icon: Long-stemmed horizontal arrow | Radius: 0px.
**States observed:** Default | Hover: Captured.

### Tier 2: Patterns

#### Metric Block
**Role:** Displaying AUM and investment counts.
**Pages observed:** Homepage, About.
**Spec:** Number: `116px/250` in `#60cfbe` | Label: `20px/600` in `#ffffff` (uppercase).
**States observed:** Default: Captured.

#### Portfolio Card
**Role:** Showcasing investment companies.
**Pages observed:** Homepage.
**Spec:** Background: `#1a2b2d` | Border: 0px | Padding: 22px | Radius: 0px.
**States observed:** Default: Captured.

### Tier 3: Surface-specific

#### Navigation Bar
**Role:** Global site navigation.
**Pages observed:** All.
**Spec:** Background: Transparent/Dark | Text: `#ffffff` | Typography: Ridley Grotesk 500.
**States observed:** Default | Hover: Captured.

#### Slider Pagination
**Role:** Carousel controls for news or portfolio.
**Pages observed:** Homepage.
**Spec:** Text: `#60cfbe` | Typography: `22px/600` | Format: `01/10`.
**States observed:** Default: Captured.

## Layout
| Property | Value |
|----------|-------|
| Section Gap | 100px |
| Max Width | 1440px |
| Content Padding | 22px - 30px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Stacked metrics, hamburger menu, reduced display type sizes |
| Desktop | 1440px | Multi-column grids, 100px vertical spacing |

## Imagery & decoration
- **Architectural Photography:** High-angle, upward-looking shots of glass and steel skyscrapers.
- **Linear Patterns:** Abstract, multi-line geometric wireframes in teal (`#60cfbe`) used as background watermarks.
- **Avoidance:** No rounded corners, no soft drop shadows, no illustrative icons.

## Do's
- Use **Ridley Grotesk 250** for all large-scale numerical data.
- Maintain **100px vertical spacing** between major content sections.
- Set all container and button **border-radii to 0px**.
- Use **#60cfbe** for primary headlines on dark backgrounds.
- Keep interactive arrows thin and elongated.

## Don'ts
- **Wrong:** Using a 5px border radius on a portfolio card. **Right:** 0px. **Reason:** The brand identity is strictly architectural and sharp.
- **Wrong:** Using #60cfbe for long-form body copy. **Right:** #ffffff. **Reason:** Contrast ratio (1.9:1) is insufficient for extended reading.
- **Wrong:** Introducing a sub-brand color (e.g., a bright orange) into the parent layout. **Right:** Stick to the teal/dark palette. **Reason:** Parent brand is strictly monochrome-plus-teal.

## Similar brands
- Goldman Sachs (Institutional precision)
- Blackstone (Investment authority)
- Stripe (Technical typography focus)

## Quick start

```css
/* CSS Variables */
:root {
  --main-color: #60cfbe;
  --bg-dark: #1a2b2d;
  --font-white: #ffffff;
  --spacing-section: 100px;
  --radius-sharp: 0px;
}
```

```json
/* Style Dictionary */
{
  "color": {
    "brand": { "primary": { "value": "#60cfbe" } },
    "surface": { "dark": { "value": "#1a2b2d" } }
  },
  "font": {
    "family": { "heading": { "value": "Ridley Grotesk" } },
    "weight": { "signature": { "value": 250 } }
  }
}
```

## Agent prompt examples
- "Generate a metric display component using Ridley Grotesk weight 250 for the number #60cfbe and weight 600 for the uppercase label in #ffffff, with 0px border radius."
- "Create a section layout with 100px top/bottom padding and a headline in #60cfbe Ridley Grotesk 48px/300."
- "Design a 'Read More' link with a thin horizontal arrow icon and no background fill, using #60cfbe."

## Known gaps
- **Shadows:** No shadows were captured in the evidence; the system appears entirely flat.
- **Form Elements:** Detailed input states (focus, error) were not captured in the primary page flow.
- **Sub-brand logic:** No sub-brands were present in the analyzed topology.

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