Things

---
version: alpha
name: Things landing-page reference
description: A restrained task-manager landing page with a pale blue-gray canvas,
  dimensional app icon, centered introductory copy, angled interface imagery, a multi-device
  showcase and a long editorial testimonial section.
colors:
  primary: '#4F91FB'
  surface: '#F2F5F7'
  on-surface: '#2C3138'
  secondary: '#FFFFFF'
typography:
  headline-sample:
    fontFamily: ui-sans-serif, -apple-system, BlinkMacSystemFont, Roboto, sans-serif
    fontSize: 36px
    fontWeight: 700
    lineHeight: 36px
  secondary-sample:
    fontFamily: ui-sans-serif, -apple-system, BlinkMacSystemFont, Roboto, sans-serif
    fontSize: 36px
    fontWeight: 700
    lineHeight: 36px
  mobile-heading-sample:
    fontFamily: ui-sans-serif, -apple-system, BlinkMacSystemFont, Roboto, sans-serif
    fontSize: 36px
    fontWeight: 700
    lineHeight: 36px
  paragraph-sample:
    fontFamily: ui-sans-serif, -apple-system, BlinkMacSystemFont, Roboto, sans-serif
    fontSize: 23.994px
    fontWeight: 400
    lineHeight: 29.9925px
---

# Things landing-page reference

## Overview

Observed at https://culturedcode.com/things/ on 2026-09-19 at 1440px desktop and 390px mobile widths. A restrained task-manager landing page with a pale blue-gray canvas, dimensional app icon, centered introductory copy, angled interface imagery, a multi-device showcase and a long editorial testimonial section. 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 section heading sample uses ui-sans-serif, -apple-system, BlinkMacSystemFont, Roboto, sans-serif at 36px, weight 700, line height 36px 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

Center the large app icon, product name and narrow introductory paragraph in a generously padded pale hero. Let a tilted application screenshot enter from below the fold. Follow with a centered feature introduction, a multi-device composition, four purchase-platform tiles, then testimonial and editorial grids. Keep newsletter signup and utility navigation near the bottom.

The three text navigation links remain visible beside the wordmark. The icon and product name dominate the first screen, while the introductory paragraph occupies about 323px at x=34. The angled screenshot is cropped at the lower edge of the opening viewport. The first measured section heading remains 36px; do not mistake that sample for the large product wordmark. 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

Soft diffuse shadows lift the app icon, tilted window and device screenshots. Keep the background itself quiet and flat; exact shadow values were not sampled. Exact shadow values were not measured.

## Shapes

Use native-device silhouettes, softly rounded screenshot windows and small store badges. Typography and spacing provide hierarchy without a surrounding card for every section. Radius descriptions are visual estimates.

## Components

Preserve the narrow centered introduction and the transition into oversized product imagery. Do not substitute an unrelated dashboard for the task-list screenshots or turn every testimonial into a bright promotional card. 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.