tryklack.com

Klacksaved 6h ago · captured 6h ago

Ten details, nine pinned.

View as Markdown ↗

Colors8 colors · ground #FDF6EC

ground#fdf6ec·64.04%accent#2f282d·12.98%#d5d1cb·5.00%#a8a7ab·4.76%#8a858f·4.41%#110c11·4.13%#534f4f·2.14%#6c6e70·1.68%

Sized by coverage · click to copy.

Typography1 family · 3 styles · ui-sans-serif

Satisfying sound with every keystroke

ui-sans-serif · 96/96 · 700 · -2.4px

High fidelity sound

ui-sans-serif · 30/36 · 700 · -0.4px

Small

New

ui-sans-serif · 12/16 · 600 · normal

Specimens are the page's own words at their measured metrics; shown in Inter when the family is not loaded.

ButtonsFAQs1 style

FAQs

primary · fill — · label #292524 · radius 16px · border 0px · padding 16px 20px · height 60px · type 18px / 700

Shape5 radii · 37 uses

16px10 uses · 27%

9999px10 uses · 27%

6px8 uses · 22%

12px5 uses · 14%

24px4 uses · 11%

AnalysisA one-screen-deep Mac utility page built like a confident product poster: a cream `#fdf6ec` field, a 96px/700 system-sans headline tracked to -2.4px in warm near-black `#2f282d`, and directly benea…

A one-screen-deep Mac utility page built like a confident product poster: a cream #fdf6ec field, a 96px/700 system-sans headline tracked to -2.4px in warm near-black #2f282d, and directly beneath it a black, rounded-24px "desktop" stage where the app runs live as a translucent macOS menu, a frosted settings popover and a dock of glossy keycaps over an iridescent chrome sculpture. Everything outside that stage is restrained and warm (stone grays, soft shadows, no borders), so the only saturated color on the page is a lavender-pink marker hue that appears exactly twice, once as a highlighter behind "sound" and once as a hand-drawn loop around "native app." The page is short: hero, interactive demo, an eight-up icon feature grid, one repeated CTA, and a ghosted giant wordmark as the footer.

Style recipeSet the page on a warm cream ground (`#fdf6ec`, background `#fff7ed`) with warm near-black ink `#2f282d` for type and primary fills, and stone grays (`#d5d1cb`, `#a8a7ab`, `#8a858f`) for secondary…

Set the page on a warm cream ground (#fdf6ec, background #fff7ed) with warm near-black ink #2f282d for type and primary fills, and stone grays (#d5d1cb, #a8a7ab, #8a858f) for secondary fills, muted proof and dividers. Reserve one saturated marker hue, a lavender-pink around #f0a6f5, for at most two hand-made gestures per page: a flat highlighter block behind a single headline word and a hand-drawn loop around a key phrase; never use it on buttons. Type is the system sans stack (ui-sans-serif, system-ui) throughout: display 96px/700, line-height 1.0, tracking -2.4px; section labels 30px/700 at -0.4px, often centered and broken onto two lines; body 16px/24px; buttons 18px/700; small tags 12px/600. Buttons are 60px tall with 16px radius and 16px×20px padding: primary is ink-filled with cream text, a leading glyph and a wide soft warm shadow (e.g. 0 12px 24px rgba(47,40,45,.25)); secondary is a flat tinted fill (#f3ece2-ish) with no shadow, and may carry an inline dark price pill (6px radius). Header links are bold ink text with small filled icons, no underline. Use no borders on the cream surface; separate with space and shadow. Present the product inside a dark stage: a black panel with 24px radius holding translucent, blurred macOS-style surfaces (dark glass lists, light frosted popovers at 12–16px radius) over an iridescent or chrome render, letting one surface break out past the frame edge. Feature lists are cardless: bold 2px line icons over centered bold labels in a four-column grid. Social proof stays muted, gray at ~40% opacity with laurel sprigs. Close with a giant, low-contrast wordmark cropped by the page bottom.

Details10 worth noting

tryklack.com — the captured page — Landing, 1440 × 900 · captured Oct 9, 2026

1Highlighter block behind one word
Highlighter block behind one headline word — a flat lavender-pink rectangle sitting on the lower ~60% of the glyphs of "sound," square-cornered, no rotation, so the emphasis reads as a marker swipe rather than a UI chip.
2Inline price pill in secondary button
Price baked into the secondary button — the ghost "App Store" button carries an inline dark $4.99 pill at its right end, so the price is visible without a pricing section and the secondary CTA does double duty.
3Faded laurel badges on the CTA row
Social proof as muted laurels beside the CTAs — "Top Paid #1 App Store" framed in faint laurel sprigs and a grayed "Featured in Forbes," both set at ~40% opacity on the button row so they sit as quiet credentials, not logos competing with the buttons.
4Shadow-ranked primary versus secondary CTA
Primary CTA with a long, soft drop shadow — the near-black pill-ish button (16px radius, Apple glyph, 18px/700) floats on a wide, low-opacity warm shadow, while the secondary is a flat tinted fill with none: depth alone ranks the two.
5Fake macOS desktop as demo stage
Product demo staged as a fake desktop — a 24px-radius black panel with a mock menu bar (time, wifi, app icon in a frosted capsule) hosts the real UI: a dark translucent switch list on the left and a light frosted popover breaking out past the right edge of the frame.
6Whispered interaction hint under demo
"Psst... press above" whisper hint — a tiny gray cursor glyph plus inline play icon under the demo nudges interaction without a heading or arrow.
7Cardless icon-and-label feature grid
Feature grid with no cards — eight line icons over two-line 30px/700 centered labels on bare cream, four across, letting typography carry the grid instead of boxes.
8Hand-drawn circle annotation
Hand-drawn ellipse around the last feature — a loose lavender pen loop circles "native app," reusing the highlighter hue as an annotation to close the grid on its strongest claim.
9Cropped ghost wordmark footer
Ghosted giant wordmark footer — "Klack" set enormous in a cream-on-cream tint, cropped by the page bottom, beneath three small gray social chips.
10Header frosts on scroll
Frosted header on scroll — the transparent header gains a cream blur fill and a soft bottom shadow once content passes under it, keeping its tinted "Purchase for Mac" button.

saas · landing · light · minimal, glassmorphic · warm, playful, premium, confident, friendly

tryklack.com

More like this