TablePlus

---
version: alpha
name: TablePlus landing-page reference
description: A light database-client landing page with a bold stacked headline, laptop-and-phone
  product imagery, charcoal pill actions, database-logo grids and a detailed sequence
  of interface demonstrations.
colors:
  primary: '#262626'
  surface: '#F6F9FC'
  on-surface: '#1A1523'
  secondary: '#FFFFFF'
typography:
  headline-sample:
    fontFamily: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe
      UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color
      Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
    fontSize: 60px
    fontWeight: 700
    lineHeight: 60px
  secondary-sample:
    fontFamily: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe
      UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color
      Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
    fontSize: 48px
    fontWeight: 700
    lineHeight: 48px
  mobile-heading-sample:
    fontFamily: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe
      UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color
      Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
    fontSize: 48px
    fontWeight: 700
    lineHeight: 48px
  paragraph-sample:
    fontFamily: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe
      UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color
      Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
    fontSize: 16px
    fontWeight: 300
    lineHeight: 24px
---

# TablePlus landing-page reference

## Overview

Observed at https://tableplus.com/ on 2026-09-19 at 1440px desktop and 390px mobile widths. A light database-client landing page with a bold stacked headline, laptop-and-phone product imagery, charcoal pill actions, database-logo grids and a detailed sequence of interface demonstrations. 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 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" at 60px, weight 700, line height 60px and tracking normal. 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

Pair a left-aligned three-line headline, short product description and two pill actions with laptop-and-phone imagery on the right. Follow with a centered database compatibility logo grid, customer logos, a large desktop-monitor demonstration, alternating feature snippets and text, metrics-board and dark-interface screenshots, query-editor details and a closing download action.

Replace the desktop link navigation with a menu icon. Reorder the hero so the laptop-and-phone image appears before the centered three-line headline. Headline samples reduce from 60px to 48px. Supporting text occupies 326px with 32px gutters; download and alternative-platform pills become wide stacked controls. 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

Native device frames and small screenshot shadows provide depth. The pale background stays flat, with subtle curved pale artwork behind the hero rather than a dramatic gradient. Exact shadow values were not measured.

## Shapes

Use broad pill actions, simple rectangular feature snippets and native-device silhouettes. A small yellow elephant mark adds personality to otherwise neutral interface-led presentation. Radius descriptions are visual estimates.

## Components

Preserve the mobile image-first reorder and the clear distinction between primary download and other-platform actions. Keep database logos recognizable and the detailed GUI screenshots large enough to read; do not replace technical examples with abstract decoration. 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.