Loft

Overview

Loft is encrypted cloud storage for Mac, in development, built to free up local disk space: big files live in the cloud and only download when opened, and they open like they are on the Mac. The emotional register is calm reassurance, a product promising relief from a full disk without asking for trust it has not yet earned. Aesthetic movement: Quiet Privacy Modernism, a light, airy surface stack with a single deep teal voice and generous whitespace that signals restraint rather than hype.

Tone is precise, honest and never breathless. Copy states limits plainly ("Opening files needs an internet connection", "Encryption is still being built"), uses short declaratives, and avoids exclamation. Example sentence: "Files stay in the cloud until you open them. Keep your own backup of anything important."

Colors

Primary (#286B78) is the signature teal used on the main CTA ("Get my beta invite"), focus outlines (3px solid), key links and checkmark affordances. Hover deepens it to #205763 (tertiary) on buttons. Secondary (#53636C) carries muted body copy and nav labels rather than interactive emphasis. Tertiary (#205763) is reserved for pressed/hover depth. Ice (#DDEEEF, primary-container) fills secondary buttons, the hero illustration panel and the waitlist callout, and is the only tinted surface on light pages. Page background is #F7F8FA; cards use pure #FFFFFF with 1px #DCE3E5 borders. Dark mode inverts to a #17212B page with #79BFCC teal accents and #202E39 surfaces, so every token pair retains contrast. Error red #B42318 is used only for consent and validation messages.

Typography

A single Inter variable face carries the whole hierarchy; weight does most of the work. The display H1 at 72px, weight 560, line-height 1.06 and letter-spacing -3.24px (-0.045em) reads as confident and editorial. H2 at 46px weight 550 uses -1.8px tracking; below 800px it drops to 34px with -1.5px. Body copy is 16px/1.7 in muted #53636C, while the hero lede is 18px. Labels are 12px weight 550 in teal for section eyebrows. Apply text-wrap: balance to headings and text-wrap: pretty to paragraphs. Japanese locale switches to Hiragino/Yu Gothic stacks and sets letter-spacing: 0 on headings.

Layout

Fluid two-column grid with a fixed container: width min(1184px, 100% - 96px), reduced to calc(100% - 64px) under 1050px and calc(100% - 40px) under 540px. The storage section splits 1fr / 1.15fr with a 108px gap, collapsing to a single column with 42px gap under 800px. Section padding is 81px vertical on desktop and 50px on mobile. Use lg (16px) spacing between related list rows, xl (20px) for card internals and 2xl (24px) for card padding. Whitespace is the primary separator; hairline 1px dividers appear only between list items.

Elevation & Depth

Depth is achieved with soft, teal-tinted shadows rather than borders alone. The file window uses 0 18px 36px -19px rgba(40,107,120,0.24) so the product mockup lifts from the ice panel. The comparison card uses 0 18px 40px -28px rgba(23,33,43,0.2). Dropdowns use 0 12px 24px -12px rgba(23,33,43,0.25). Level 1 is the flat #F7F8FA page, Level 2 is white cards with 1px #DCE3E5 border, Level 3 is floating menus with the dropdown shadow. Dark mode removes shadow intensity in favour of border contrast.

Shapes

Shape language is Soft-Technical: a restrained curve system that reads as precise rather than playful. Buttons and inputs use 8px radius (rounded.DEFAULT), compact secondary buttons use 6px, content cards and the file window use 11–16px, and the large waitlist and ice panels use 24px. Pills (status badge, "In development") use full 9999px. The brand mark itself is a folded-corner document glyph that echoes these corner radii.

Components

Action Elements The primary button is a solid teal rectangle, 48px tall, 15px label at weight 550, 8px radius and 15px/20px padding. On hover it transitions to #205763 over the default 200ms ease. Secondary buttons sit on #DDEEEF with teal text, 40px tall with 6px radius. Focus rings are 3px solid teal with 3–5px offset.

Containers & Surfaces Cards are white with a 1px #DCE3E5 border, 16px radius and 28px padding; the file window adds an 11px radius and clip overflow. The waitlist panel uses ice (#DDEEEF) with 24px radius and 48px padding, collapsing to 24px/18px padding under 480px. Compare cards use 24px radius with the 0 18px 40px -28px shadow.

Inputs & Interaction Text inputs are white, 48px minimum height, 1px solid #7A8990 border, 8px radius and 13px/14px padding at 16p

Do's and Don'ts

**Do**

• Do lead with the teal primary (#286B78) on every primary CTA and keep it the only saturated interactive colour.
• Do state limitations and beta status plainly, matching the calm, honest copy already on the page.
• Do use 8px radius on buttons and inputs and 16–24px on content panels to keep the Soft-Technical rhythm.
• Do keep a 40px gutter and 1184px max container so the two-column storage layout breathes.

**Don't**

• Don't introduce gradients, neon accents or additional saturated hues beyond the teal and error red.
• Don't use heavy drop shadows; keep elevation teal- or ink-tinted at 18–40px blur.
• Don't set headings below weight 550 or add letter-spacing above -1px on large display sizes.
• Don't use exclamation marks or hype language that contradicts the privacy-first, in-development positioning.