Sublime

Overview

Sublime is a second brain for creative people: a personal knowledge tool that captures, organizes and remixes what inspires you. The marketing site leans into a quiet, editorial minimalism — a single custom grotesque (Control Upright) set very large against a white canvas, with a single photographic object (a moss-covered stone) doing the emotional work. The aesthetic movement is best described as Editorial Naturalism: stark typographic contrast, generous white space and one organic image per viewport.

The voice is lowercase, playful and self-aware ("wtf is a knowledge worker? you are a creative human being."), with short declarative lines broken on purpose. Copy is set in sentence fragments and deliberate line breaks rather than long paragraphs. Example sentence: "inspiration is everywhere. and nowhere."

Colors

The palette is almost entirely neutral: stone-1 (#181816) for headlines, stone-4 (#908f8e) for secondary statements, and a silver scale (#efefef to #e6ebf2) for chips and fields. The only chromatic accent is a pale lime, green-2 (#cbffa6), used as the fill of the primary "try now" CTA with green-1 (#38744d) text; this is the brand's signature accent and should be reserved for the single most important action per view. Hover deepens the fill to #bbee96. Blue (#0af) is used only for the text caret and selection-adjacent focus states, never for decoration. Surfaces stay flat white (#ffffff); do not introduce gradients or tinted backgrounds.

Typography

A single display family, Control Upright, carries the brand: the hero h1 is set at 120px with line-height 108px and letter-spacing -0.03em, and section statements drop to 28px at weight 400. Body copy uses the system sans stack at 18px with -0.3375px tracking, which makes the grotesque feel intentionally loud by contrast. Apply text-decoration-skip-ink: none and text-underline-offset: auto on inline links so underlines do not clip descenders. Labels such as nav buttons use Control Upright at 14px with no added tracking.

Layout

The layout is a fluid, centered single column for hero and statements, capped at a 1400px container max-width with 30px gutters on desktop and 15px on mobile. Sections are separated by generous vertical rhythm: py-32 (roughly 160px) on large viewports and py-14 (roughly 70px) on mobile, with each full-viewport section held to min-height 80dvh. Use the 8px md and 10px xl spacing steps for internal component padding and reserve the 30px gutter for column separation.

Elevation & Depth

Depth is nearly absent. Surfaces are separated by 1px hairline strokes rather than shadows: inset 0 0 0 1px #efefef for chips, and 0 0 0 .5px #adacab for the outlined container states. Do not apply drop shadows to cards or buttons; the flat stack (surface, surface-container-low, surface-container-high) provides the only tonal lift.

Shapes

Shapes follow a Soft-Technical system: small, controlled radii on functional controls (4px on CTA buttons, 5px on inputs and media thumbnails) and a fully rounded pill (9999px) for the floating annotation chip ("headintheclouds.txt"). The 4px radius keeps buttons tight and button-like rather than playful, while the pill is reserved for ephemeral, decorative labels.

Components

Action Elements The primary "try now" button is a 24px-tall pill-like rectangle with 4px radius, 0 17.5px horizontal padding, pale lime fill (#cbffa6) and green text (#38744d). On hover, the fill transitions to #bbee96 over 150ms ease-out. Active state scales the element to 0.95 over 100ms. The secondary "login" button uses a #efefef fill and stone-4 text and shifts to #e1e1e1 on hover.

Containers & Surfaces Media cards are borderless 5px-radius images sitting on a #fafbfc field, captioned beneath with a Times New Roman label at 16px, line-height 1.2, in stone-5 (#a29e9c). Cards do not lift on hover; instead the image scales to 1.02 over 200ms.

Inputs & Interaction Fields use the silver-field (#eef1f5) fill with 5px radius and 8px padding. Focus is indicated by a 1px black fo

Do's and Don'ts

**Do**

• Do reserve the pale lime (#cbffa6) for the single primary CTA per viewport.
• Do set hero and section statements in Control Upright at 120px and 28px with tight tracking.
• Do keep surfaces flat white and separate elements with 1px hairlines.
• Do use lowercase copy and deliberate line breaks to match the voice.

**Don't**

• Don't introduce drop shadows or gradients on cards and buttons.
• Don't use the blue #0af accent for decoration; it is reserved for the caret and focus states.
• Don't set body copy in the display family; keep the system sans for paragraphs.
• Don't round buttons beyond 4px; only ephemeral chips take the full pill radius.