Screen capture tool for macOS you were always looking for. No strange fuctionality included. Made by designers for digital professionals.
Design Analysis
This design language is a sparse screen-capture workspace with giant black statements, monospaced explanatory copy, compact black navigation, and large product screenshots. The interface should feel practical and asserti...
This design language is a sparse screen-capture workspace with giant black statements, monospaced explanatory copy, compact black navigation, and large product screenshots. The interface should feel practical and assertive, with personality coming from scale.
Use F7F5F2 and EFF5F1 as alternating canvases. Use pure black for text, navigation, and primary actions. Use white for pricing cards and screenshot frames. Use 075AFE only for the active paid path, selected links, or compact status marks. Let screenshot content bring in additional color.
Use a heavy grotesk for hero and section statements, with extreme scale around 104px / 100px on desktop. Use monospaced copy for paragraphs, pricing lists, labels, and small annotations. Do not add decorative type treatments. The contrast between huge black display text and small mono copy is the system.
Compose pages with large statements, direct copy, and one broad screenshot. Alternate off-white and pale green bands to separate app and cloud contexts. Pricing should feel like a product table: dotted separators, compact feature lists, and a small number of white rounded cards.
Core identity and authoring metadata from the refto.one design model.
A minimal screen-capture product language with off-white and pale green canvases, oversized black grotesk headlines, monospaced copy, black pill navigation, broad screenshots, and table-like pricing.
Sparse, monochrome, practical, and slightly playful through scale rather than decoration.
Fields outside the primary renderer remain visible here as structured fallback content.
Primitive palettes and resolved token colors for the active preview mode.
Spacing scales rendered as tokens with a simple length specimen.
Corner radii tokens with a live surface sample.
Font families from the current design YAML, including fallback stacks and usage character.
Top-level typography scale rendered as live text specimens.
Top-level typography line-height values from the design YAML.
| Property | Value |
|---|---|
hero | 100px |
page_title | 88px |
section_title | 68px |
body | 24px |
control | 18px |
Top-level typography weights from the design YAML.
| Property | Value |
|---|---|
display | 900 |
title | 800 |
control | 600 |
body | 400 |
Fields outside the primary renderer remain visible here as structured fallback content.
Border tokens with resolved values.
Shadow tokens with resolved values and shadow samples where applicable.
Motion tokens rendered as resolved values for timing and personality.
Resolved border token values.
| Property | Value |
|---|---|
hairline | 1px solid #D8D5CF |
dotted | 1px dotted #D8D5CF |
black | 1px solid #000000 |
Resolved shadow token values.
| Property | Value |
|---|---|
none | none |
screenshot | 0 24px 70px rgba(0, 0, 0, 0.16) |
Resolved motion token values.
| Property | Value |
|---|---|
duration_fast | 120ms |
duration_base | 180ms |
easing | cubic-bezier(.2, 0, 0, 1) |
Low-complexity component tokens rendered as design-system specimens.
Schema-agnostic optional blocks from the design YAML. New option keys render here automatically.
Schema-agnostic optional blocks from the design YAML. New option keys render here automatically.
Compact list of patterns the design system explicitly avoids.