Turso

---
version: alpha
name: Turso landing-page reference
description: A dark database-platform landing page with mint-green emphasis, strong
  white display text, a split code-example hero, fine grid rules and technical diagrams
  embedded in understated panels.
colors:
  primary: '#4FF8D2'
  surface: '#101317'
  on-surface: '#FFFFFF'
  secondary: '#0D1318'
  accent: '#152029'
typography:
  headline-sample:
    fontFamily: __Inter_f367f3, __Inter_Fallback_f367f3
    fontSize: 60px
    fontWeight: 800
    lineHeight: 60px
    letterSpacing: -1.5px
  secondary-sample:
    fontFamily: __Inter_f367f3, __Inter_Fallback_f367f3
    fontSize: 36px
    fontWeight: 700
    lineHeight: 40px
    letterSpacing: -0.9px
  mobile-heading-sample:
    fontFamily: __Inter_f367f3, __Inter_Fallback_f367f3
    fontSize: 36px
    fontWeight: 800
    lineHeight: 40px
    letterSpacing: -0.9px
  paragraph-sample:
    fontFamily: __Inter_f367f3, __Inter_Fallback_f367f3
    fontSize: 18px
    fontWeight: 400
    lineHeight: 32px
---

# Turso landing-page reference

## Overview

Observed at https://turso.tech/ on 2026-09-19 at 1440px desktop and 390px mobile widths. A dark database-platform landing page with mint-green emphasis, strong white display text, a split code-example hero, fine grid rules and technical diagrams embedded in understated panels. This is an independent visual reference, not an official brand specification.

## Colors

Tokens record sampled CSS RGB values, converted to hex. Artwork and interface imagery contain additional colors; the tokens are a compact reference palette, not an exhaustive brand system.

## Typography

The first measured headline sample uses __Inter_f367f3, __Inter_Fallback_f367f3 at 60px, weight 800, line height 60px and tracking -1.5px. The YAML records this sample, a secondary heading, a mobile heading and a substantial paragraph where available. These are observed elements, not an invented universal scale. Font-family declarations are measured; exact glyph rendering depends on font availability and licensed assets.

## Layout

Anchor the page within fine vertical and horizontal grid rules. Split the hero between a multiline headline with mint emphasis, gray explanatory copy and pill action on the left, and a syntax-highlighted code window on the right. Place a customer-logo strip underneath. Follow with centered architecture framing, diagrams, five technical properties, alternating code/replication chapters, use cases, enterprise and open-source panels, then a mint-accented final section.

Keep the wordmark, mint trial pill and menu icon. Stack the 36px/40px headline and explanatory copy above the code card; both use a 340px region at x=25. The code retains monospaced alignment rather than wrapping like prose. Only the opening viewport and computed samples were inspected for mobile. No horizontal document overflow was detected at either inspected width. Intermediate breakpoints and full mobile scroll behavior were not visually reviewed. Section spacing and component arrangements are visual observations rather than an exhaustive measured spacing scale.

## Elevation & Depth

Low-contrast borders, near-black layers and subtle shadows separate code windows from the dark canvas. Avoid bright drop shadows; the mint buttons already provide the strongest emphasis. Exact shadow values were not measured.

## Shapes

Combine pill-shaped actions, softly rounded code panels and precise ruled sections. Database illustrations use translucent mint forms, distinct from the flatter textual panels. Radius descriptions are visual estimates.

## Components

Keep the bright mint reserved for important text, actions and diagram emphasis. Preserve code indentation and the fine grid system. Do not turn every card border mint or reduce muted body text until it becomes unreadable. The desktop overview supplies the section ordering; the mobile evidence supplies only the inspected opening composition. Video previews and animation frames are static captured states, not a specification for playback.

## Do's and Don'ts

- Do preserve the reference-specific hierarchy, imagery and responsive ordering described above.
- Do maintain legibility when adapting the palette or replacing fonts.
- Don't infer hover, focus, open-menu or form-validation states: those interactions were not exercised.
- Don't treat a single capture as a complete animation or carousel specification.