# ascente.design

Source: https://ascente.design/
Captured: 2026-10-31
Tags: saas, landing, light, both, minimal, swiss, confident, calm, premium, technical
Colors: #fbfbfa, #141415, #d4d4d3, #2d2d2d, #555554, #b0b0ae, #70716f, #91918f
Type (h1): SF Pro Display · 56px/59.92px · 500 · tracking -1.68px — "Design is fun again. Type, shaders and motion on one canvas. AI can help. You de"
Type (h2): SF Pro Display · 37px/41.44px · 500 · tracking -0.925px — "Controls come to you. Select something and its settings open beside it. Close th"
Type (body): SF Pro Display · 16px/23.2px · 500 — "Right-click anywhere. Tools open in a ring around the cursor. Select a layer and"
Type (button): SF Pro Display · 15px/normal · 500 · tracking -0.2px — "Request an invite →"
Button: "Request an invite →" — fill #111111, text #ffffff, radius 999px, border 0px, padding 0px 16px, height 38px, type 15px/500
Radii: 28px (14), 999px (9), 12px (1), 6px (1)

## Images

- Hero (desktop): https://media.lvly.design/library/ascente-design/hero.webp?v=5cf98897
- Page crop (mid-1): https://media.lvly.design/library/ascente-design/mid-1.webp?v=02663ec3
- Page crop (mid-2): https://media.lvly.design/library/ascente-design/mid-2.webp?v=7d29bf77
- Hero (mobile): https://media.lvly.design/library/ascente-design/mobile-hero.webp?v=29512f2a
- Full page (desktop): https://media.lvly.design/library/ascente-design/full.jpg?v=65c35b28
- Full page (mobile): https://media.lvly.design/library/ascente-design/mobile-full.jpg?v=4c460606
- Clip preview (mp4): https://media.lvly.design/library/ascente-design/video-8azld4.preview.mp4?v=3787eeaa

A near-monochrome, Apple-grade product page for a browser design editor that lets the product do all the shouting. The page itself is an off-white `#fbfbfa` sheet set in SF Pro Display at weight 500 throughout, with one rhetorical trick repeated on every section: a short ink lead sentence followed by gray continuation copy in the same run. Color, texture and drama are rationed out to the content: near-black `#141415` app frames floating on pale gray mattes, Swiss-style type studies (fluted-glass wordmarks, bar charts with a single orange-red bar, a green VHS "SIGNAL"), and a moody night photo split into a before/after. The chrome stays out of the way: a floating hairline pill nav, pill buttons, 28px cards and hairline FAQ rows.

## Steal-worthy details

- Two-tone headline: the first sentence in ink `#141415`, the rest of the paragraph continues inline in light gray `#b0b0ae` at the same 56px/500/-1.68px, so a whole pitch reads as one sentence plus a whisper. The same pattern runs on every h2 (37px, -0.925px)
- Floating pill nav inset 16px from the viewport edge, with a white fill, a 1px hairline and a 999px radius. Centered text links, a black pill CTA tucked inside the right end, and the bar goes translucent over imagery as you scroll
- A three-step CTA ladder: a solid black pill (`#111111`, 15px/500, 16px side padding), a pale gray tonal pill for the secondary, then a bare gray text link with an arrow for the curious. Each step is quieter than the last
- Product screenshots sit in a dark app frame placed inside a larger pale gray matte card with a 28px radius and 40px of padding, so a dark UI reads as an object on a table instead of a hole punched in a light page
- A before/after photo split by a single 1px white rule, with tiny "Before" and "After" corner labels. It is an editorial alternative to a draggable comparison slider
- Captions under every media block follow the headline's grammar: a bold ink lead ("Study 01."), gray specs that quote real parameter values, and a right-aligned underlined ".ascente ↓" link to download the source file
- Three-up feature cards as flat `#f2f2f0`-ish tonal tiles with no border and no shadow. Each card's text is a bold lead phrase that runs straight into gray body copy
- A shader demo card pairs a dark media half with a light text half, plus a row of small pill chips (one filled black, the rest outlined) that switch the example
- An FAQ built as bare hairline rows with right-edge plus icons, with no cards and no fill, followed by a centered "Come play." sign-off and a single black pill

## Style recipe

Build on a warm off-white page (`#fbfbfa`) with near-black ink (`#141415`) and a gray ramp of `#2d2d2d`, `#555554`, `#70716f`, `#91918f`, `#b0b0ae` and `#d4d4d3` for hairlines. Keep the interface fully achromatic and let color come only from content such as imagery, demos and illustrations. If you need a hue for a single highlight, use one small orange-red mark rather than a brand color. Set everything in SF Pro Display (fallback Inter) at weight 500, with no bold and no light. The display size is 56px with a 1.07 line-height and -0.03em tracking, h2 is 37px with -0.025em tracking, body is 16px with a 1.45 line-height, and buttons are 15px with -0.2px tracking. Write every heading and caption as a short ink lead sentence followed by gray continuation text in the same paragraph and size. Use a 999px radius for every button, chip and the nav, and 28px for every card, matte and media block, with 12px and 6px only for small inner controls. Make the primary button a 38–48px solid `#111111` pill with white text and a trailing arrow. Make the secondary a pale gray tonal pill, and the tertiary a gray text link with an arrow. Float the nav as an inset white pill with a 1px hairline that goes translucent over imagery. Present screenshots as dark frames inside light gray 28px mattes with generous padding and a soft, wide shadow. Lay content on a centered column of about 960px with large vertical gaps between sections. Use flat tonal tiles instead of bordered cards, and hairline rows for lists and FAQs. Caption media with precise, number-quoting specs.