# Turing Design System

> High-contrast enterprise utility meets deep-space density, anchored by a high-voltage electric blue primary action.

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

## TL;DR
Turing utilizes a high-contrast "Dark Mode" foundation for its primary platform identity, transitioning to a clean, white-canvas system for informational pages like Pricing and About. The system is defined by its primary accent, Electric Blue `#3c5bff`, which serves as the exclusive signal for interactivity and primary CTAs. Typography relies on the humanist sans-serif **Mukta** for its primary voice, often paired with **ui-sans-serif** for high-impact display moments. Geometry is strictly controlled, favoring `8px` and `12px` radii for UI controls and `16px` for content containers, while primary actions often utilize a full pill `9999px` radius.

## Signature DNA
1. **The Electric Blue Anchor** (`#3c5bff`): Used as the singular high-voltage accent for buttons and links against both `#0a0e1a` (Deep Space) and `#ffffff` (Canvas) backgrounds.
2. **Mukta Humanist Hierarchy**: The use of Mukta across five weights (300-700) provides a technical yet approachable readability, specifically the `300` weight for light-touch subheadings.
3. **Deep-Space Density**: Hero sections use a specific `#0a0e1a` background, creating a high-density environment where white text and electric blue actions pop with maximum luminance.

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.canvas}` | `#ffffff` | Primary page background and button text | 45 | 1.0 | Computed |
| `{color.ink}` | `#0a0a0a` | Primary text and high-contrast button text | 50 | 0.8 | Computed |
| `{color.space}` | `#0a0e1a` | Hero and dark section backgrounds | 3 | 0.6 | Computed |
| `{color.slate.900}` | `#0f172a` | Decorative brand primary / secondary text | 2 | 1.0 | `--primary` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.accent}` | `#3c5bff` | Primary CTA background, links, active states | 11 | 1.0 | `--accent` |
| `{color.accent.hover}` | `#304be5` | Button hover states | 1 | 1.0 | `--accent-hover` |
| `{color.gray.500}` | `#6b7280` | Muted secondary text | 3 | 0.6 | Computed |
| `{color.amber.500}` | `#f59e0b` | Decorative status/accent (decorative_only) | 3 | 0.6 | Computed |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|-----------------------|---------|
| Mukta | 300, 400, 500, 600, 700 | Primary Brand & Body | Mukta (Google Fonts) | OFL |
| ui-sans-serif | 400, 500, 700 | Display & System UI | Inter | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.2xl}` | 60px | 60px | normal | 700 | Hero Display | `div.text-6xl.font-bold` |
| `{type.heading.xl}` | 36px | 40px | normal | 600 | Section Headers | `h2.text-2xl.md:text-4xl` |
| `{type.heading.lg}` | 30px | 36px | normal | 700 | Page Titles | `h1.text-3xl.font-bold` |
| `{type.heading.md}` | 30px | 36px | normal | 300 | Editorial Headers | `span` |
| `{type.body.lg}` | 16px | 24px | normal | 500 | Subheadings | `h3.font-medium.text-sm` |
| `{type.body.md}` | 16px | 24px | normal | 400 | Default Body | `div.min-h-screen` |
| `{type.body.sm}` | 14px | 20px | normal | 500 | Button Labels | `button.px-4.py-2` |
| `{type.caption}` | 14px | 20px | normal | 400 | Muted Metadata | `p.text-sm.text-gray-500` |

### Principles
1. **Weight Contrast**: Pair `700` weight display type with `300` weight sub-labels to create technical sophistication.
2. **Standardized Leading**: Body and subheading types strictly follow a 1.5x line-height ratio (16px/24px).
3. **Mukta for Readability**: Use Mukta for all long-form prose and UI labels to maintain the brand's humanist-tech feel.

## Spacing
**Base unit:** 8px
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.0.5}` | 4px | 4 |
| `{space.1}` | 8px | 10 |
| `{space.1.5}` | 12px | 10 |
| `{space.2}` | 16px | 24 |
| `{space.3}` | 24px | 14 |
| `{space.10}` | 80px | 6 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.none}` | 0px | Section containers | 68 occurrences |
| `{radius.md}` | 8px | Small cards / controls | Card component |
| `{radius.lg}` | 12px | Standard UI buttons | Rounded Button |
| `{radius.xl}` | 16px | Feature cards | Card (observed_once) |
| `{radius.pill}` | 9999px | Primary CTAs | Pill Button |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{shadow.sm}` | `0 1px 2px 0 rgba(0, 0, 0, 0.05)` | Card resting state | 6 occurrences |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action (e.g., "Request Demo")
**Pages observed:** https://turing.ai, https://turing.ai/pricing
**Spec:** Background `#3c5bff` | Text `#ffffff` | Radius `9999px` | Padding `12px 24px` | Typography `{type.body.sm}`
**States observed:** Default, Hover (`#304be5`)

#### Ghost Pill Button
**Role:** Secondary navigation or filter actions
**Pages observed:** https://turing.ai
**Spec:** Background `transparent` | Text `#4b5563` | Border `1px #d1d5db` | Radius `9999px` | Padding `6px 16px`
**States observed:** Default

### Tier 2: Patterns

#### Feature Card
**Role:** Grouping benefit or product information
**Pages observed:** https://turing.ai
**Spec:** Background `#f9fafa` | Border `1px #f3f4f6` | Radius `12px` | Padding `24px` | Shadow `{shadow.sm}`
**States observed:** Default

#### Rounded Action Button
**Role:** Inline utility actions
**Pages observed:** https://turing.ai
**Spec:** Background `rgba(255, 255, 255, 0.05)` | Text `#4b5563` | Radius `12px` | Padding `8px 16px`
**States observed:** Default

### Tier 3: Surface-specific

#### Pricing Card
**Role:** Highlighting specific service tiers
**Pages observed:** https://turing.ai/pricing
**Spec:** Background `#2563eb` | Text `#ffffff` | Radius `8px` | Padding `12px 24px`
**States observed:** Default

#### Dark Section Surface
**Role:** Hero background or high-impact messaging
**Pages observed:** https://turing.ai
**Spec:** Background `#0a0e1a` | Text `#ffffff` | Radius `0px` | Padding `80px 0px`
**States observed:** Default

## Layout
| Property | Value |
|----------|-------|
| Max Width | 1280px (estimated) |
| Section Gap | 80px |
| Grid | 12-column desktop |

## Do's
- Use `#3c5bff` exclusively for primary interactive elements.
- Maintain a `16px` (2 units) padding for standard card content.
- Use Mukta weight `300` for secondary headings to provide typographic air.
- Apply `9999px` radius to buttons that initiate a global site action.
- Ensure all text on `#0a0e1a` surfaces uses `#ffffff` for AA compliance.

## Don'ts
- **Wrong:** Using `#0f172a` as a button background. **Right:** Use `#3c5bff`. **Reason:** `#0f172a` is a decorative brand color, not a functional action color.
- Do not mix `8px` and `12px` radii within the same component group.
- Avoid using weights above `500` for body copy; reserve `600` and `700` for headings.
- Never place `#4b5563` text on a `#0a0e1a` background (insufficient contrast).

## Quick start

### CSS Variables
```css
:root {
  --accent: #3c5bff;
  --accent-hover: #304be5;
  --primary: #0f172a;
  --canvas: #ffffff;
  --space: #0a0e1a;
  --ink: #0a0a0a;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 9999px;
}
```

### Tailwind v4
```javascript
@theme {
  --color-accent: #3c5bff;
  --color-accent-hover: #304be5;
  --color-space: #0a0e1a;
  --font-mukta: "Mukta", sans-serif;
  --radius-control: 12px;
  --shadow-subtle: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
```

## Known gaps
- Hover states for secondary ghost buttons were not explicitly captured in the CSS variable set.
- Mobile-specific spacing tokens (e.g., section padding reduction) were not fully validated across all pages.
- Success and Error semantic tokens were not present in the analyzed page samples.

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