# Tensorlake Design System

> A terminal-inspired dark canvas with sharp geometry, driven by monospace utility and vivid green accents.

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

## TL;DR
Tensorlake is a dark-themed, developer-focused system built on absolute structural rigidity. The interface relies on a near-black canvas (`#161715`) defined by sharp `0px` border radii and 1px borders (`#393939`). Typography pairs PP Neue Montreal for structural hierarchy with JetBrains Mono for technical data, code, and captions. The primary chromatic voltage comes from a vivid green (`#0aa67d`) used for CTAs and a softer green wash (`#82c38c`) for text accents, creating a high-contrast, unapologetically technical aesthetic.

## Signature DNA
1. **Absolute Sharpness:** Almost all interactive elements and containers use a `0px` border radius (`{radii.sharp}`), creating a rigid, brutalist structural feel that mimics terminal windows.
2. **Monospace Utility:** JetBrains Mono is used extensively for captions, code blocks, and micro-copy (sizes 10px to 16px), reinforcing the developer-tool identity and separating technical data from marketing prose.
3. **High-Contrast Terminal Green:** The UI is strictly achromatic (blacks and grays) punctuated only by specific green tokens (`#0aa67d` for actions, `#82c38c` for highlights), echoing classic phosphor displays.

## Colors

### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--bl-ink` | `#ffffff` | Primary text, button text | 393 | 1.0 | `css_variable` |
| `--tl-fg-4` | `#989d9e` | Secondary text, muted button text | 158 | 1.0 | `css_variable` |
| `--tl-fg-2` | `#dddddd` | Tertiary text, soft surface backgrounds | 137 | 1.0 | `css_variable` |
| `--tl-border` | `#393939` | Structural borders, dividers, outlines | 54 | 1.0 | `css_variable` |
| `--tl-fg-3` | `#c9c9c9` | Muted text | 32 | 1.0 | `css_variable` |
| `--bl-bg` | `#161715` | Primary dark canvas, default background | 22 | 1.0 | `css_variable` |
| `--bl-kbd-bg` | `#232b23` | Elevated surface background | 9 | 1.0 | `css_variable` |
| `--bl-surface` | `#1e1f1c` | Panel and card backgrounds | 6 | 1.0 | `css_variable` |
| `--bl-bg-3` | `#171e17` | Deep surface background | 4 | 1.0 | `css_variable` |
| `--bl-rule-2` | `#3e3e3e` | Secondary borders | 4 | 1.0 | `css_variable` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--tl-green-wash` | `#82c38c` | Resolved primary, text accents, soft backgrounds | 84 | 1.0 | `css_variable` |
| `--tl-green` | `#0aa67d` | Primary CTA background, active states, links | 49 | 1.0 | `css_variable` |
| (No token) | `#e6c07b` | Syntax highlighting / accent text | 29 | 0.8 | `computed_style` |
| (No token) | `#82aaff` | Syntax highlighting / accent text | 18 | 0.8 | `computed_style` |
| (No token) | `#23362a` | Decorative border accent (<5 occurrences) | 3 | 0.6 | `computed_style` |

## Typography

### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| PP Neue Montreal | 400, 500 | Display, headings, primary body | Inter | Commercial |
| JetBrains Mono | 400, 500, 600, 700 | Code, technical data, captions | JetBrains Mono | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `display-mega` | 92px | 90.16px | -3.22px | 500 | Hero H1 | `h1.tl-hero__h1` |
| `display-xl` | 78px | 76.20px | -2.72px | 500 | Secondary Hero H1 | `h1.pr-hero__h` |
| `display-lg` | 52px | 52.87px | -1.45px | 500 | Section H2 | `h2.tl-section__h2` |
| `heading-lg` | 37px | 40.43px | -0.93px | 500 | Product Title | `h3.tl-product__title` |
| `heading-md` | 30px | normal | -0.60px | 500 | Tier Name | `h3.pr-tier__name` |
| `heading-sm` | 22px | 24.20px | -0.44px | 500 | Card Title | `h4.tl-card__title` |
| `body-lg` | 18px | 26.10px | -0.09px | 400 | Quote Body | `p.tl-quote__body` |
| `body-md` | 16px | normal | normal | 500 | Default Body | `section.tl-hero` |
| `body-code` | 16px | normal | normal | 500 | Code Tab (JetBrains) | `button.code-panel__tab` |
| `body-sm` | 14px | 19.60px | normal | 500 | Ingredient Value | `p.tl-ingredient__v` |
| `caption-code` | 13px | 21.45px | normal | 500 | Syntax Keyword | `span.kw` |
| `caption-xs` | 10px | normal | -0.70px | 500 | Auth Link | `a.code-panel__install-authlink` |

### Principles
- **Aggressive negative tracking on display:** PP Neue Montreal is pulled extremely tight at large sizes (-3.22px at 92px, -2.72px at 78px) to create dense, solid headline blocks.
- **Monospace for micro-copy:** JetBrains Mono is not just for code blocks; it is used for captions, tags, and small interactive labels down to 10px.
- **Uniform body weight:** Almost all body and UI text runs at weight 500. Weight 400 is reserved strictly for long-form reading (like quotes).

## Spacing
**Base unit:** custom
| Token | Value | Occurrences |
|---|---|---|
| `space-2` | 2px | 17 |
| `space-4` | 4px | 19 |
| `space-8` | 8px | 17 |
| `space-10` | 10px | 14 |
| `space-14` | 14px | 27 |
| `space-16` | 16px | 15 |
| `space-24` | 24px | 16 |
| `space-40` | 40px | 9 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `radius-sharp` | 0px | Default for all surfaces, primary buttons, cards | 850 occurrences |
| `radius-input` | 2px | Secondary rounded buttons, small inputs | 14 occurrences |
| `radius-panel` | 50px | Large decorative panels | 7 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| Flat | `none` | Default state for all cards and surfaces | `shadow: "none"` on Surface component |
| Inset | `rgb(10, 166, 125) 0px -1px 0px 0px inset` | Bottom border highlight on primary buttons | `shadow` on Button component |

## Components

### Tier 1: Foundational

#### Surface
**Role:** Base container for sections and panels.
**Pages observed:** https://tensorlake.ai, https://tensorlake.ai/pricing
**Spec:** Background `rgba(0, 0, 0, 0)` or `#161715` / Text `#ffffff` / Border `#393939` / Radius `0px` / Padding `0px` / Shadow `none`
**States observed:** Default | Disabled: not captured

#### Button
**Role:** Primary call to action.
**Pages observed:** https://tensorlake.ai, https://tensorlake.ai/pricing
**Spec:** Background `#161715` / Text `#ffffff` / Border `#ffffff` (0px width) / Radius `0px` / Padding `8px 14px` / Typography `16px` / Shadow `rgb(10, 166, 125) 0px -1px 0px 0px inset`
**States observed:** Default | Disabled: not captured

### Tier 2: Patterns

#### Rounded Button (Outline)
**Role:** Secondary actions, tags, or filters.
**Pages observed:** https://tensorlake.ai, https://tensorlake.ai/pricing
**Spec:** Background `rgba(0, 0, 0, 0)` / Text `#ffffff` / Border `#393939` (1px) / Radius `2px` / Padding `10px 14px` / Typography `12px`
**States observed:** Default | Disabled: not captured

#### Rounded Button (Tinted)
**Role:** Active state for secondary actions or highlighted tags.
**Pages observed:** https://tensorlake.ai, https://tensorlake.ai/pricing
**Spec:** Background `rgba(10, 166, 125, 0.2)` / Text `#0aa67d` / Border `#0aa67d` (1px) / Radius `2px` / Padding `10px 14px` / Typography `12px`
**States observed:** Default | Disabled: not captured

#### Rounded Button (Solid)
**Role:** Emphasized secondary action.
**Pages observed:** https://tensorlake.ai, https://tensorlake.ai/pricing
**Spec:** Background `#0aa67d` / Text `#161715` / Border `#0aa67d` (1px) / Radius `2px` / Padding `10px 14px` / Typography `12px`
**States observed:** Default | Disabled: not captured

## Layout
| Property | Value |
|---|---|
| Max-width | Not captured in source |
| Grid | Not captured in source |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | Not captured in source | Not captured in source |

## Imagery & decoration
Tensorlake avoids traditional photography entirely. Visual interest is generated through functional UI elements: syntax-highlighted code snippets, terminal window mockups, and abstract data visualizations (like the vertical green barcode pattern in the footer). The aesthetic is strictly "machine-readable."

## Do's
- Use `0px` border radius for all primary structural elements to maintain the brutalist terminal aesthetic.
- Apply JetBrains Mono for any text that represents code, technical specifications, or system output.
- Use `--tl-border` (`#393939`) for 1px structural lines to separate content zones.
- Track display headlines tightly (up to -3.22px) to create dense typographic blocks.
- Use the inset green shadow (`rgb(10, 166, 125) 0px -1px 0px 0px inset`) to ground primary buttons.

## Don't
- **Wrong:** Using a soft drop shadow (`box-shadow: 0 4px 12px rgba(0,0,0,0.1)`) on a card.
  **Right:** Using a 1px solid border (`#393939`) with no shadow.
  **Reason:** Tensorlake relies on flat, bordered geometry; soft shadows break the terminal aesthetic.
- **Wrong:** Using `#82aaff` (blue) as a primary button background.
  **Right:** Using `#0aa67d` (green) for primary buttons.
  **Reason:** Blue is reserved strictly for syntax highlighting; mislabeling it as a primary brand color dilutes the core green identity.
- **Wrong:** Applying `8px` border radius to a primary CTA.
  **Right:** Applying `0px` border radius to a primary CTA.
  **Reason:** The system defaults to sharp corners; rounded corners (`2px`) are reserved only for specific secondary micro-buttons.

## Similar brands
- Linear
- Vercel
- Stripe (Developer Docs)
- Raycast

## Quick start

```css
:root {
  --bl-ink: #ffffff;
  --tl-fg-4: #989d9e;
  --tl-fg-2: #dddddd;
  --tl-border: #393939;
  --bl-bg: #161715;
  --bl-surface: #1e1f1c;
  
  --tl-green-wash: #82c38c;
  --tl-green: #0aa67d;
  
  --font-display: 'PP Neue Montreal', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  
  --radius-sharp: 0px;
  --radius-input: 2px;
}
```

## Agent prompt examples
- "Create a pricing tier card using a `#161715` background and a 1px `#393939` border. The title should be 30px PP Neue Montreal with -0.6px letter spacing. Include a primary CTA button with a `0px` border radius and a `#0aa67d` inset bottom shadow."
- "Build a code snippet panel. The container should have a `#1e1f1c` background and `0px` radius. The code text must use JetBrains Mono at 13px weight 500, with syntax highlighting using `#e6c07b` and `#82aaff`."
- "Generate a secondary action tag. Use a transparent background, 1px `#393939` border, and `2px` border radius. The text should be 12px JetBrains Mono."

## Known gaps
Layout grids, maximum container widths, and specific responsive breakpoint values were not captured in the source data. Semantic state colors (error, warning, success) beyond the primary green are not explicitly defined in the token evidence.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://tensorlake.ai | Desktop | 2026-06-06T05:01:13.505Z |
| Pricing | https://tensorlake.ai/pricing | Desktop | 2026-06-06T05:01:13.505Z |
| About | https://tensorlake.ai/about | Desktop | 2026-06-06T05:01:13.505Z |