---
name: "Home - TypeSafe AI"
description: "Retro-futuristic, high-density machine-native AI research visual system defined by stark typography, functional desktop window controls, raw terminal typography, and vivid pink backdrop accents."
version: "1.0"
colors:
  canvas: "#fefefe"
  ink: "#000000"
  ink-strong: "#1e1e1e"
  body: "#1e1e1edb"
  primary: "#f386a1"
  primary-strong: "#d45bb6"
  on-primary: "#1e1e1e"
  surface-soft: "#dedede"
  surface-muted: "#c4c4c4"
  surface-dark: "#1e1e1e"
  hairline: "#1e1e1edb"
  hairline-soft: "#88888833"
  overlay: "rgba(0, 0, 0, 0.5)"
  accent-teal: "#09aea1"
  accent-green: "#03aa5c"
  accent-green-muted: "#03aa5cbd"
  accent-gray: "#abbab9"
  accent-muted-gray: "#858585e6"
typography:
  heading-xl:
    fontFamily: "\"Die Grotesk C Medium\", sans-serif"
    fontSize: "150px"
    fontWeight: "500"
    lineHeight: "0.8"
    letterSpacing: "normal"
  heading-lg:
    fontFamily: "\"Die Grotesk C Medium\", sans-serif"
    fontSize: "64px"
    fontWeight: "500"
    lineHeight: "0.9"
    letterSpacing: "normal"
  heading-md:
    fontFamily: "\"Die Grotesk C Medium\", sans-serif"
    fontSize: "30px"
    fontWeight: "500"
    lineHeight: "0.9"
    letterSpacing: "0.02em"
  body-lg:
    fontFamily: "\"LisaTerminal Paper 2X3Y Medium\", sans-serif"
    fontSize: "18px"
    fontWeight: "500"
    lineHeight: "1.0"
    letterSpacing: "0.01em"
  body-md:
    fontFamily: "\"Die Grotesk C Regular\", sans-serif"
    fontSize: "17px"
    fontWeight: "400"
    lineHeight: "1.2"
    letterSpacing: "0.05em"
  code-sm:
    fontFamily: "\"JetBrains Mono\", monospace"
    fontSize: "10px"
    fontWeight: "300"
    lineHeight: "1.2"
    letterSpacing: "0.05em"
rounded:
  none: "0px"
  card: "0px"
  button: "0px"
  badge: "0px"
spacing:
  xs: "4px"
  sm: "10px"
  md: "20px"
  lg: "50px"
  xl: "100px"
  container: "1440px"
components:
  primary-button:
    background: "{colors.ink-strong}"
    color: "{colors.canvas}"
    borderRadius: "{rounded.none}"
    padding: "8px 16px"
    border: "1.2px solid {colors.ink-strong}"
  secondary-button:
    background: "transparent"
    color: "{colors.ink-strong}"
    borderRadius: "{rounded.none}"
    padding: "8px 16px"
    border: "1.2px solid {colors.ink-strong}"
  header-link:
    background: "{colors.canvas}"
    color: "{colors.body}"
    fontFamily: "{typography.body-lg.fontFamily}"
    fontSize: "18px"
    padding: "8px 6px"
  window-card:
    background: "{colors.primary}"
    border: "1.2px solid {colors.ink-strong}"
    borderRadius: "{rounded.none}"
    boxShadow: "none"
  title-bar:
    background: "{colors.ink-strong}"
    color: "{colors.primary}"
    fontFamily: "{typography.body-lg.fontFamily}"
    fontSize: "18px"
    padding: "4px 8px"
  code-block:
    background: "{colors.surface-dark}"
    color: "{colors.primary}"
    fontFamily: "{typography.code-sm.fontFamily}"
    fontSize: "10px"
    padding: "10px"
  faq-accordion:
    background: "transparent"
    color: "{colors.ink}"
    borderBottom: "1px solid {colors.hairline}"
    padding: "20px 0px"
  footer-link:
    color: "{colors.canvas}"
    fontFamily: "{typography.body-md.fontFamily}"
    fontSize: "15px"
source: "https://typesafe.ai/"
captured: "2026-09-21T16:45:21.502Z"
---

# DESIGN.md: Home - TypeSafe AI

## Source

- URL: https://typesafe.ai/
- Captured: 2026-09-21T16:45:21.502Z
- Evidence: Firecrawl branding, HTML, images, links, markdown, and full-page screenshot

## Reference Screenshot

![Full-page screenshot of Home - TypeSafe AI](./screenshot.png)

## Design Summary

TypeSafe AI features a high-contrast vintage OS interface aesthetic combined with bold neo-grotesque display typography and a hyper-saturated pink (#F386A1) canvas section. Visual hierarchy is driven by sharp rectangular containers, pixel-precise glyphs, and simulated desktop utility headers.

## Visual Language

- Strict 0px border-radius layout across all cards, windows, buttons, and badges.
- Dual light background system switching between clean monochrome (#FEFEFE) and vibrant pink (#F386A1).
- Classic system title bars featuring solid dark headers with monospaced or terminal label text.
- Dense monospaced annotation copy formatted with Base64 code strings and ASCII/unicode decorative characters (∵ ⩆).

## Design Tokens

The normative colors, typography, radii, spacing, and component tokens are defined in the YAML frontmatter above.

## Spacing And Layout

- Grid of interactive OS-style floating tool windows overlaying texture-mapped canvas areas.
- Full-width section bands delimited by sharp 1px dark hairline borders.
- Centered display headers with vertical stack CTA groupings.
- Multi-column comparison blocks featuring raw benchmark metric graphics.

## Components

- Use solid 1.2px dark borders (#1E1E1E) for all content structural frames.
- Apply 'Die Grotesk C Medium' for high-impact display titles, keeping letter spacing tight and vertical line heights under 1.0.
- Render code and metadata in 'JetBrains Mono' or 'LisaTerminal Paper 2X3Y' at small sizes with elevated tracking.
- Ensure interactive states toggle inverted monochrome fills or primary pink highlights.

## Content Style

- Direct, technical, and precise prose targeting engineers and researchers.
- Inclusion of exact performance metrics (e.g. '193.6x Faster, 444.6x Cheaper').
- Section markers with functional tool titles and semantic version tags ('Clock Tool 1.1', 'Glider 1.1').

## Agent Build Instructions

- Import custom fonts 'Die Grotesk C', 'LisaTerminal Paper 2X3Y', and 'JetBrains Mono'.
- Configure custom CSS utility classes for sharp desktop window styling with custom title-bar headers.
- Ensure selection highlight uses color #D45BB6.
- Use CSS custom properties for core theme roles to support light and dark sub-containers seamlessly.

## Evidence And Confidence

- Observed: Canvas light background #FEFEFE and primary pink container fill #F386A1 directly measured from document styles.
- Observed: Ink color #000000 and text neutral #1E1E1E extracted from computing computed design colors.
- Observed: Monospaced accent text uses custom font LisaTerminal Paper 2X3Y Medium and JetBrains Mono.
- Inferred: Hover states utilize text color contrast flip based on Framer interactive rule bindings.

## Rerun Inputs

- workflow: pixloop-design-md-url-analysis
- source_url: https://typesafe.ai/

---

Generated by Pixloop Design.md from publicly observable design evidence. Third-party trademarks and assets remain the property of their respective owners.