Ember Orange
#ea580cOrange supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color
Dub Links
dub.shWebsite preview
The design language
Dub presents a warm, confident SaaS aesthetic: a near-monochrome interface anchored by soft cream-to-white gradients, with one vivid orange accent that makes every action feel activated. The system breathes through generous whitespace on a compact 4px grid, pairing Inter's utility precision with Satoshi's rounded display character for headlines. Surfaces stay matte and light with hairline borders and whisper-soft shadows — depth comes from subtle tonal shifts and elevation, never heavy panels. The primary CTA is always a black pill with orange-ember micro-accents nearby, creating a contrast between structural neutrality and brand warmth. Components should feel quick and utilitarian: 4px and 8px radii dominate, pill buttons carry CTAs, and cards are flat white rectangles on a faintly warm canvas.
Color palette
brand
Ember Glow
#fb923cLighter orange for hover states on ember elements, soft accent fills
Ember Deep
#7c2d12Dark orange for icon strokes and decorative accents needing depth
Warm Sunrise
#f97316Gradient endpoint for the hero's warm peach wash — the signature atmospheric gradient
accent
Signal Blue
#3b82f6Decorative icon accent, link highlights, informational touches — the secondary chromatic note
Terminal Green
#22863aGreen supporting accent for decorative details and low-frequency emphasis. Use as a supporting accent, not as a status color
Alert Red
#d32f2fRed supporting accent for decorative details and low-frequency emphasis. Use as a supporting accent, not as a status color
neutral
Canvas Cream
#f5f5f5Page background base — the warm off-white that gives the interface its sunlit feel
Paper White
#ffffffCard surfaces, elevated panels, input fields — pure white for content containers
Ink Black
#0a0a0aDark supporting neutral for text, icons, and strong contrast. Do not promote it to the primary CTA color
Charcoal
#171717Secondary text, button text on dark fills, heading weights
Graphite
#404040Tertiary text, muted descriptions, secondary button text
Steel
#737373Placeholder text, disabled states, low-emphasis body copy
Ash
#a3a3a3Icon fills at rest, muted helper text, tertiary icons
Fog
#d4d4d4Input borders at rest, subtle dividers, inactive form controls
Mist
#e5e5e5Hairline borders throughout — the workhorse divider color
Slate
#6b7280Muted body text, secondary icon strokes, meta information
Typography
Type scale
Minor Third (1.2) · 16px basedisplay
48px · 500 · 1.15The quick brown fox jumps
text-40
40px · 500 · 1The quick brown fox jumps
heading-sm
24px · 400 · 1.4The quick brown fox jumps
subheading
20px · 400 · 1.5The quick brown fox jumps
body-lg
18px · 400 · 1.56The quick brown fox jumps
body
16px · 400 · 1.5The quick brown fox jumps
body-sm
14px · 400 · 1.43The quick brown fox jumps
text-13
13px · 400 · 1.5The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Satoshi
- Weights
- 500
- Sizes
- 40px, 48px
- Line height
- 1.00-1.15
- Fallback
- General Sans, Switzer, Inter (weight 600)
Display headlines — the custom Satoshi at medium weight creates a rounded, friendly authority at hero scale; its geometric softness contrasts with Inter's utilitarian precision
Additional typeface
Inter
- Weights
- 400, 500, 600, 700
- Sizes
- 8px, 12px, 14px, 16px, 18px, 20px, 24px
- Line height
- 1.25-1.56
Primary UI font — handles body text, nav items, buttons, form labels, section headings; weight 500 for nav active states and subtle emphasis, 600-700 for subheadings; tight 1.25-1.43 line-height at body sizes keeps the compact density working
Additional typeface
Geist Mono
- Weights
- 400
- Sizes
- 12px, 13px, 14px
- Line height
- 1.33-1.50
Short URL display, code snippets, technical metadata — monospace where data precision matters (the shortened link, the click counter)
Spacing & shape
Spacing
- Density
- compact
- Base unit
- 4px
- Max width
- 1200px
- Section gap
- 80px
- Card padding
- 24px
- Element gap
- 8px
Border radius
tags
9999pxcards
12pxpills
9999pxinputs
8pxbuttons
8pxSpacing scale
1px2px3px4px6px8px10px12px14px16px20px24px25px32px36px40px48px53px56px64px80px96px112px139px157px190px201px223px236pxGuidelines
Do
- Use 8px radius for all rectangular buttons and inputs, 9999px for pill-shaped tags and nav CTAs
- Apply Inter weight 500 for navigation items, button text, and subtle emphasis; reserve 600-700 for subheadings
- Use Satoshi weight 500 at 40-48px for section display headlines — never drop below 40px
- Pair the Ink Black (#0a0a0a) primary CTA with an Ember Orange (#ea580c) in-product action for a clear primary/secondary distinction
- Use Geist Mono for shortened URLs, click counts, and any technical data display
- Keep section gaps at 80px+ to maintain the airy, spacious rhythm
- Use hairline 1px Mist (#e5e5e5) borders for all dividers and input resting states
Don’t
- Don't use Ember Orange (#ea580c) for more than one action per view — it loses impact when overused
- Don't apply heavy drop shadows — the system uses whisper-soft 1-6px lifts only
- Don't use Satoshi for body text or UI labels — it's display-only at 40px+
- Don't use filled colored backgrounds for cards — surfaces stay white or light-tinted only
- Don't use 4px radius for primary CTAs or feature cards — 8px and 12px are the system minimums for significant elements
- Don't introduce new chromatic colors — the palette is monochrome + orange + blue accent
- Don't use decorative gradients on product surfaces — the warm gradient is hero-only atmospheric
Components
Primary CTA Button
Main conversion action — 'Start for free', 'Sign up'Ink Black (#0a0a0a) fill, Paper White (#ffffff) text, 8px radius, Inter weight 500 at 14px, 8px 16px padding, subtle 0px 1px 2px shadow at 5% black. The near-black fill against the warm cream canvas is the strongest visual element on any page.
Secondary Ghost Button
Secondary action — 'Get a demo', 'Log in'Transparent fill with Mist (#e5e5e5) 1px border, Charcoal (#171717) text, 8px radius, Inter weight 500 at 14px, 8px 16px padding. Sits beside the primary CTA as a quiet alternative.
Sign Up Pill Button
Navigation primary actionInk Black (#0a0a0a) fill, white text, 9999px radius (full pill), Inter weight 500 at 14px, 6px 14px padding. Slightly tighter padding than card CTAs for the nav context.
Ember Action Button
Brand-emphasized action — 'Shorten link', key conversion in product contextEmber Orange (#ea580c) fill, white text, 8px radius, Inter weight 500 at 14px, 8px 16px padding. The single chromatic button in the system — use sparingly for the most important in-product action.
Text Input
URL destination, search, text fieldsPaper White (#ffffff) fill, Fog (#d4d4d4) 1px border, Ash (#a3a3a3) placeholder text, Charcoal (#171717) input text, 8px radius, Inter at 14px, 10px 14px padding. Focus state: 4px black-at-10% outer ring.
Link Shortener Card
Hero product demonstration — the centerpiece of the homepagePaper White surface, 12px radius, two-layer shadow (0px 4px 6px -1px / 0px 2px 4px -2px at 10% black). Contains: input row with Ember Action Button, and a result row with Geist Mono short URL + click count badge. This is the signature component.
Brand Tag / Badge
Category label above headlines — 'Dub Links', 'Branded Short Links'Light tinted background, Charcoal text, 9999px radius, Inter weight 500 at 12px, 2px 10px padding. Features a small leading icon. Tints include #fef9c3 (warm yellow), #eff6ff (cool blue), #dcfce7 (mint).
Navigation Bar
Top-level site navigationTransparent on canvas, Ink Black logo wordmark, Inter nav items at 14px weight 500 in Charcoal. Dropdown items have 8px radius. Active nav item has light background highlight.
Trust Logo Grid
Social proof — customer logos2-row grid of 5 columns, 40px row gap, each logo rendered in Ash (#a3a3a3) or muted monochrome. 'CASE STUDY' link in Geist Mono appears beneath select logos. No borders, pure whitespace separation.
Product UI Mockup
Feature section visual — link creation interfacePaper White surface, 12px radius, layered shadow. Contains form fields, QR code preview, social link preview icons. Simulated browser chrome with traffic light dots at top. Rounded input fields at 8px.
QR Code Preview Tile
Embedded QR code in product mockupPaper White fill with 8px radius, 1px Mist border, small external link icon. Centered QR code pattern in black.
Section Heading
Feature section titlesSatoshi weight 500 at 40-48px, Ink Black color, centered, line-height 1.15. Followed by 18px body text in Slate (#6b7280) at weight 400, max-width ~600px centered.
Surfaces & elevation
Level 0
Canvas
#f5f5f5Page background with warm cream tint — the base layer everything sits on
Level 1
Paper
#ffffffCard surfaces and product UI mockups — pure white containers
Level 2
Elevated
#ffffffModals, popovers, floating panels with subtle shadow elevation
Elevation is whispered, not declared: the system uses 1-2px micro-shadows for buttons and 4-6px lifts for product cards. Inset shadows appear on inset UI states. The overall feel is flat surfaces with occasional gentle lift — never dramatic floating panels.
Primary button
rgba(0, 0, 0, 0.05) 0px 1px 2px 0px
Product card / link shortener
rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px
Input focus ring
rgba(0, 0, 0, 0.1) 0px 0px 0px 4px
Layout & imagery
Layout
The page uses a max-width ~1200px centered container with generous outer padding. The hero is centered text over a warm gradient wash that fades to white — full-bleed gradient with a constrained content stack. Below, sections alternate between centered headline + product visual patterns. The trust logo grid is a 2×5 layout with even spacing. The feature sections use a single-column centered heading followed by a wide product mockup card. Navigation is a simple top bar with horizontal links and right-aligned auth buttons. Content density is low — large vertical breathing room between sections (80px+).
Imagery
Visuals are product-first: the site uses UI mockups and product screenshots rather than lifestyle photography. The hero link-shortener card and the branded-links product mockup are the primary visual elements. Customer logos appear as small monochrome marks in a trust grid. The only decorative gradient is the warm peach-to-white wash behind the hero section — everything else sits on a clean neutral canvas. No stock photography, no illustrations, no 3D renders. Icons are minimal: small leading icons in section badges and inline link/chain icons in the shortener UI.
Design notes
Agent Guide
**Quick Color Reference** - text: #0a0a0a - background: #f5f5f5 (canvas) / #ffffff (surfaces) - border: #e5e5e5 - accent: #ea580c (Ember Orange) - primary action: no distinct CTA color - secondary text: #6b7280 **3 Example Component Prompts** No distinct primary action color was observed; use the extracted neutral button treatments instead of inventing a filled CTA color. 2. Create a link shortener product card: white surface, 12px radius, shadow 0px 4px 6px -1px rgba(0,0,0,0.1). Contains a row with an input field (white fill, 1px #d4d4d4 border, 8px radius, 10px 14px padding, Inter 14px) and an Ember Orange (#ea580c) action button at 8px radius with white text. Below it, a result row showing a shortened URL in Geist Mono 14px and a click count in a light pill badge. 3. Create a section with a brand badge: a pill-shaped tag (9999px radius) with #fef9c3 background and #171717 text, Inter weight 500 at 12px, 2px 10px padding, with a small leading icon. Below it, a Satoshi 40px headline in #0a0a0a, centered, followed by a 16px Inter body in #6b7280.
Similar brands
Vercel
Same monochrome-first aesthetic with hairline borders, near-black primary CTAs, and minimal color usage; shared commitment to a compact 4px grid and utility-focused Inter typography
Linear
Similar product-mockup-as-hero approach, pill-shaped CTAs, and the same 8px/12px radius hierarchy for buttons and cards
Cal.com
Comparable warm gradient hero washes, orange brand accent against neutral canvas, and the same Satoshi-style rounded display headlines for hero copy
Raycast
Shared product screenshot emphasis over lifestyle imagery, clean monochrome UI with single chromatic accent, and Geist Mono for technical data
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
