---
version: alpha
name: "Onlook"
description: "Onlook presents design-in-code collaboration as a dark workspace: near-black hero, white conversion buttons, gray navigation, red-black shadows, Inter UI type, JetBrains Mono product chrome, and a handwritten script accent for the designer wordmark moment."
colors:
  bg: "#040000"
  bg-deep: "#000000"
  surface: "rgba(0, 0, 0, 0.8)"
  surface-panel: "#100102"
  surface-soft: "#230206"
  text: "#ffffff"
  text-muted: "#999999"
  text-soft: "#ababab"
  text-hidden-red: "#620000"
  brand: "#ffffff"
  on-brand: "#000000"
  accent-red: "#620000"
  accent-red-soft: "#300206"
  accent-red-mid: "#4e1a23"
  border: "rgba(100, 0, 0, 0.1)"
  border-red: "#550102"
  chrome-line: "#1b1b1b"
  success: "#24d0bd"
  warning: "#d9a441"
  danger: "#d84a4a"
typography:
  display:
    fontFamily: "Inter"
    fontSize: "60px"
    lineHeight: 1.5
    letterSpacing: "-0.02em"
  body:
    fontFamily: "Inter"
    fontSize: "16px"
    lineHeight: 1.5
  mono:
    fontFamily: "JetBrains Mono"
rounded:
  button: "8px"
  card: "12px"
  pill: "9999px"
spacing:
  xs: "0px"
  sm: "4px"
  md: "12px"
  lg: "32px"
  xl: "64px"
---

## Overview

## Overview

Onlook is a dark workspace before it is a landing page. The hero is nearly black, with white headline strokes, muted gray navigation, and a large product interface emerging from the lower half of the viewport.

The distinctive moment is typographic: the engineering-like "Cursor for" phrase is interrupted by a handwritten script word. That contrast says the product sits between code and design.

**Key Characteristics**
- Near-black background: `#040000`.
- White primary text and CTA fills.
- Gray nav and support copy.
- Red-black computed shadows and borders.
- Inter for UI and body text.
- Vujahday Script for the designer accent.
- JetBrains Mono inside product chrome.
- Large dark workspace preview anchored below the hero.

## Colors

Base: `bg #040000` and `bg-deep #000000` define the page.

Text: use `text #ffffff` for visible headlines and active controls, `text-muted #999999` for nav, and `text-soft #ababab` for secondary product labels.

Accent: `accent-red #620000`, `accent-red-soft #300206`, and `accent-red-mid #4e1a23` appear in the dark computed palette and create subtle warmth.

Borders: `border rgba(100, 0, 0, 0.1)` and `border-red #550102` keep panels barely separated.

Action: `brand #ffffff` on `on-brand #000000` is the clearest conversion treatment.

## Typography

| Role | Font | Size | Weight | Notes |
| --- | --- | ---: | ---: | --- |
| Hero | Inter | 60 | 300 | light engineering phrase |
| Script hero | Vujahday Script | 74 | 400 | designer accent only |
| Display | Inter | 48 | 300 | section headings |
| H1 | Inter | 48 | 300 | major page titles |
| H2 | Inter | 36 | 300 | narrative sections |
| H3 chrome | JetBrains Mono | 18 | 400 | product panel labels |
| Body large | Inter | 20 | 400 | hero support |
| Body | Inter | 16 | 400 | default copy |
| Chrome | JetBrains Mono | 12 | 400 | layers, tabs, mockup labels |
| Button | Inter | 14 | 500 | compact CTAs |

Use the script face once per composition. Repeating it makes the system feel decorative instead of intentional.

## Layout

The hero is vertically centered but leaves room for the product workspace preview to enter from the bottom. This gives the page a product-in-motion feel without a literal video.

Keep the nav narrow and quiet. The page should feel like an editor, not a marketing dashboard.

On mobile, keep the headline centered and reduce the script word so it does not overflow. Stack primary and secondary CTAs, or keep them side by side only when both remain at least 44px tall.

The workspace preview should crop horizontally like an editor screenshot. Do not shrink every panel until the labels become unreadable.

## Elevation & Depth

Depth is created by black-on-black separation, not bright shadows.

| Level | Treatment | Use |
| --- | --- | --- |
| 0 | `#040000` | page base |
| 1 | subtle radial dark texture | hero background |
| 2 | `rgba(0,0,0,0.8)` | workspace surfaces |
| 3 | red-black border and muted glow | active panels |

## Shapes

| Tier | Value | Use |
| --- | ---: | --- |
| Micro | 2 | small focus marks |
| Small | 6 | utility controls |
| Medium | 8 | CTAs |
| Large | 12 | inner controls |
| Panel | 24 | workspace frame |
| Pill | 9999 | rare status badges |

Most interactive elements use 8px. Large preview shells use 24px.

## Components

Primary CTA: white fill, black text, 8px radius. This is used for Sign Up and Log In.

Secondary CTA: transparent or near-black fill, dim red border, white or muted text, 8px radius.

Nav: low-contrast gray links on black. Keep height compact and do not add heavy separators.

Workspace panel: dark translucent panel, 24px radius, subtle red-black border, mono labels, and small tabs.

Badges: use muted gray text or small outlined pills. Avoid bright fills in the navigation.

Use editor-like motion: fast hover feedback, restrained tab transitions, and smooth workspace reveals.

White CTAs can brighten with a small lift. Workspace panels should fade or slide, not bounce. Background drift should be subtle enough to disappear under reduced motion.

White CTAs on black are strong. Muted nav text `#999999` remains readable at 14px on the near-black header, but smaller product labels should use at least `#ababab`.

Do not render important visible text in the low-red computed colors. Red-black values work for texture and borders, not primary copy.

Voice is focused on collaboration between design and code. Use words like design, codebase, preview, layers, chat, build, inspect, and ship.

Keep copy concise and product-specific. The dark visual system already carries the drama, so the words can stay practical.

Dark is the default. A light theme would lose most of the brand feeling unless it appears only inside product mockups.

For alternate sections, use black surfaces with slightly different red-black tints rather than switching to white cards.

Onlook borrows from code editors, canvas design tools, and AI builder interfaces. The page says that product design can happen directly inside a real codebase, so the visual system keeps both editor chrome and designer flair visible.

The script display word is the key differentiator. It prevents the dark editor aesthetic from becoming too austere.

## Do's and Don'ts

Do use near-black backgrounds. Do keep white CTAs crisp. Do use mono labels in product chrome. Do let red-black borders stay subtle. Do use the script type only for the designer accent.

Do not make the accent red bright. Do not use white cards in the main hero. Do not overuse the script face. Do not make the nav louder than the product preview.

### Quick Color Reference

Background: `#040000`; deep black: `#000000`; white text: `#ffffff`; muted nav: `#999999`; soft text: `#ababab`; red accent: `#620000`; panel: `rgba(0,0,0,0.8)`; border: `rgba(100,0,0,0.1)`.

### Example Component Prompts

- Create an Onlook-style dark hero with Inter light headline text and one Vujahday Script designer word.
- Design a white Sign Up button and transparent Book a Demo button on near-black.
- Build a dark workspace preview with mono labels, tabs, layers, and subtle red-black borders.
- Create a compact black header with muted nav links and a white login CTA.

### Iteration Guide

1. Make the background darker before adding more contrast.
2. Use white for conversion, not brand-color fills.
3. Keep red as a shadow and border language.
4. Add mono labels to make product surfaces feel real.
5. Use script type once to humanize the code-tool frame.