---
title: "Fuser design system"
variant: extended
source: https://fuser.studio/
captured_at: 2026-10-12
theme: light
industry: ai
generator: Design DNA (https://four.wiralomi.com/style/fuser-studio)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Fuser · Design System

> A bright, tactile canvas for creative AI workflows

**Theme:** light · **Industry:** ai · **Source:** https://fuser.studio/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Fuser pairs a quiet, near-white interface with a tactile node-canvas product showcase and vivid creative work. Restrained typography, rounded controls, fine grid lines, and soft gradient color keep the long-form homepage calm and product-led.

## North star

Keep the interface quiet and near-white, and let layered creative-work examples—not decorative UI—provide the color and energy.

## Overview

Fuser’s homepage is built around an almost-white canvas (#fafafa), allowing the node-based product demo and portfolio-like media to supply most of the visual drama. Near-black headings provide clear hierarchy, while muted gray copy and hairline borders keep navigation, cards, and supporting details quiet. Marund gives headings and prominent copy a distinctive, softly editorial character; Inter Variable handles compact interface labels, navigation, and controls. The first viewport layers a floating pill navigation above a fine grid backdrop and overlapping workflow cards, then centers the headline below. Across the page, generous whitespace separates application demos, recipe cards, feature storytelling, plans, integrations, FAQ, and mission content. Rounded pills and softly edged panels make the interface approachable and tactile. Violet, lavender, and pink appear sparingly in links, small controls, and ambient gradients; stronger yellows, greens, and terracottas belong to the creative examples, not the core brand palette.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Canvas White | `#fafafa` | `--color-canvas-white` | surface | Dominant page canvas and light text used on dark or media-backed areas. |
| Soft Graphite | `#525252` | `--color-soft-graphite` | neutral | Muted body copy, navigation labels, and recipe-card text. |
| Periwinkle Edge | `#a3b3ff` | `--color-periwinkle-edge` | accent | Fine outline on the Generate control; a subtle interface accent. |
| Panel Gray | `#e5e5e5` | `--color-panel-gray` | surface | Neutral surface for product panels and selected card-like elements. |
| Border Gray | `#b7b7b7` | `--color-border-gray` | neutral | Hairlines and outlines on navigation, badges, buttons, and panels. |
| Ink Black | `#171717` | `--color-ink-black` | neutral | Primary headline, button, and prominent interface text. |
| Pale Periwinkle | `#c6d2ff` | `--color-pale-periwinkle` | accent | Soft button detail within interface accents. |
| Signal Violet | `#4f39f6` | `--color-signal-violet` | brand | High-contrast link accent, notably the recipe exploration link. |
| Deep Charcoal | `#262626` | `--color-deep-charcoal` | neutral | Secondary dark text within body and interface content. |
| Lavender Haze | `#bdbcfc` | `--color-lavender-haze` | accent | Soft violet stop in atmospheric section gradients. |
| Mid Gray | `#737373` | `--color-mid-gray` | neutral | Secondary text and subdued input or heading details. |
| Pure Black | `#000000` | `--color-pure-black` | neutral | Occasional strong text and graphic details; not the dominant text tone. |
| Blush Glow | `#fca3b9` | `--color-blush-glow` | accent | Pink stop in ambient gradients, especially the closing visual field. |
| Dark Slate | `#404040` | `--color-dark-slate` | neutral | Low-frequency supporting text. |
| Lavender Mist | `#eae9fb` | `--color-lavender-mist` | accent | Very subtle light section and gradient tint. |
| Near Black | `#0a0a0a` | `--color-near-black` | neutral | Sparse dark text and button detail. |

### Semantic aliases

`--color-canvas` → `#fafafa` (Canvas White) · `--color-surface` → `#e5e5e5` (Panel Gray) · `--color-text` → `#171717` (Ink Black) · `--color-text-muted` → `#525252` (Soft Graphite) · `--color-text-subtle` → `#fafafa` (Canvas White) · `--color-border` → `#b7b7b7` (Border Gray) · `--color-accent` → `#4f39f6` (Signal Violet) · `--color-accent-2` → `#bdbcfc` (Lavender Haze) · `--color-accent-3` → `#fca3b9` (Blush Glow)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#171717` | `#fafafa` | 17.18:1 | AAA |
| `#171717` | `#e5e5e5` | 14.23:1 | AAA |
| `#525252` | `#fafafa` | 7.49:1 | AAA |
| `#525252` | `#e5e5e5` | 6.2:1 | AA |
| `#fafafa` | `#e5e5e5` | 1.21:1 | fail |
| `#4f39f6` | `#fafafa` | 6.19:1 | AA |
| `#4f39f6` | `#e5e5e5` | 5.13:1 | AA |

### Gradients

- `linear-gradient(color(srgb 0 0 0 / 0.035) 1px, rgba(0, 0, 0, 0) 1px), linear-gradient(90deg, color(srgb 0 0 0 / 0.035) 1px, rgba(0, 0, 0, 0) 1px), radial-gradient(circle at 1px 1px, color(srgb 0 0 0 / 0.045) 2px, rgba(0,`
- `radial-gradient(100% 25% at 50% 0%, oklch(0.985 0 0), rgba(0, 0, 0, 0) 100%), radial-gradient(50% 20% at 0% 0%, oklch(0.985 0 0), rgba(0, 0, 0, 0) 100%), radial-gradient(50% 40%, color(srgb 0.38213 0.371924 1.00775 / 0.1`
- `radial-gradient(80% 40% at 40% 60%, color(srgb 0.38213 0.371924 1.00775 / 0.4), rgba(0, 0, 0, 0) 100%), radial-gradient(80% 40% at -50% 40%, color(srgb 1.00331 0.124723 0.33905 / 0.4), color(srgb 0.38213 0.371924 1.00775`
- `linear-gradient(oklch(0.922 0 0) 0%, oklch(0.985 0 0) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Marund | `--font-body` | webfont | 300, 400, 450, 500 | Display and editorial text: large headings, body copy, and selected links. | DM Sans |
| Inter Variable | `--font-inter-variable` | webfont | 400, 500 | Navigation, buttons, captions, eyebrow labels, and selected card headings. | Inter |

- **Marund:** Use a light-to-regular weight; headings are softly tracked, with the main heading slightly tight. Avoid forced uppercase.
- **Inter Variable:** Use compact, clear UI styling; eyebrow labels are uppercase with noticeably expanded tracking.

### Type scale — Perfect Fourth (ratio ≈ 1.316, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 48px | 450 | 1.1 | -0.025em | — | Marund | Centered hero headline and other primary section statements. |
| h2 | 30px | 400 | 1.4 | 0 | — | Marund | Section headlines for applications, features, plans, FAQ, and mission. |
| h3 | 24px | 500 | 1.33 | 0 | — | Inter Variable | Product or feature card headings and supporting subheads. |
| h4 | 22px | 400 | 1 | 0 | — | Marund | Smaller editorial headings and compact content labels. |
| body | 16px | 300 | 1.5 | 0 | — | Marund | Explanatory copy, mission statement, and supporting descriptions. |
| caption | 14px | 400 | 1.43 | 0 | — | Inter Variable | Small interface captions and media or card metadata. |
| button | 14px | 400 | 1.43 | 0 | — | Inter Variable | Pill CTA labels and compact product-demo actions. |
| nav | 14px | 400 | 1.43 | 0 | — | Inter Variable | Primary navigation and menu items. |
| link | 16px | 300 | 1.5 | 0 | — | Marund | Inline text links and recipe exploration links. |
| eyebrow | 13px | 500 | 1 | 0.14em | uppercase | Inter Variable | Uppercase section labels such as Applications and Features. |

OpenType features in use: `"ss00", "ss03"`.

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 1, 2, 4, 6, 7, 8, 10, 12, 16, 20, 24, 32, 64, 80, 160 px.
- Section rhythm 32px · element gap 16px · card padding 16px · max content width 1376px.

Use a centered, wide desktop composition constrained by the measured 1376px maximum width, with comfortable density and generous open space between content blocks. The hero and closing CTA are centered; FAQ, mission, and footer content shift to aligned columns. Product demonstrations can span multiple columns, while recipe cards form a compact grid. Maintain the measured 32px section-gap rhythm and 16px element spacing as a baseline, scaling whitespace qualitatively for larger section transitions. Keep navigation floating and centered rather than full-bleed.

## Shape & elevation

- Radius: button `9999px` · card `7px` · media `6px` · badge `9999px` · nav `9999px` · link `9999px` · xs `6px` · sm `7px` · md `11px` · lg `12px` · xl `14px` · 2xl `16px` · pill `9999px`
- Shadow `md` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4p`
- Shadow `inset` (text, card): `oklch(0 0 0 / 0.3) 0px 0px 2px 0px inset, oklch(0 0 0 / 0.1) 0px 1px 0px 0px inset`
- Shadow `inset-2` (other): `color(srgb 0.630079 0.630198 0.630209) 0px 2px 8px 0px inset, rgb(255, 255, 255) 0px -2px 4px 0px inset`
- Shadow `md-2` (button): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 255, 255, 0.35) 0px 0px 24px -6px`
- Motion: standard transition `0.2s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The page is mostly flat, with thin gray outlines defining pill navigation and controls. Product cards and demos gain depth through overlapping panels, inset edges, and restrained soft shadows rather than heavy drop shadows. Preserve a tactile, layered canvas quality without making routine text blocks appear elevated.

## Imagery

Lead with layered product UI: framed creative outputs, a central node or canvas interface, and a floating prompt input. Throughout the page, mix product walkthroughs with photographic and rendered creative examples, including furniture, fashion, film, and generated scenes. Keep media in rounded or framed panels, with images carrying their own strong colors. Reserve soft violet-to-pink ambient gradients for broad atmospheric moments rather than applying them to every section.

## Components

### Floating navigation

Centered rounded bar with a light gray surface, thin gray outline, muted Inter labels, and a pill-style Get Started action.

### Hero canvas demo

Grid-backed stage with overlapping framed creative media, a central product panel, and a floating prompt input with Generate action.

### Pill CTA

Compact rounded control with restrained dark text, a light surface, subtle outline, and soft glow where visible.

### Recipe cards

Six creative examples arranged in a grid; image-led panels pair short labels and muted copy with rounded edges.

### Application showcase

Wide product example framed as a canvas, with connected side thumbnails and a row of category selectors.

### FAQ rows

Two-column FAQ area with a prominent heading and short questions separated by fine horizontal rules and plus controls.

### Footer wordmark

Large custom Fuser mark above company and link columns, set over the page’s strongest violet-pink gradient.

### Measured component styles

- **Primary button** (“Get Started”): background #f9f9f9 · text #171717 · border 2px solid #b7b7b7 · radius 3.35544e+07px · padding 8px 10px 8px 16px · 400 14px Inter Variable
- **Secondary button** (“Get Started”): background #f8f8f8 · text #171717 · border 2px solid #afafaf · radius 3.35544e+07px · padding 6px 6px 6px 12px · 400 14px Inter Variable
- **Link** (“Compositor”): transparent background · text #525252 · radius 0px · padding 0px · 300 16px Marund
- **Input**: transparent background · text #737373 · radius 0px · padding 0px · 400 20px Marund
- **Card** (“Fashion Capture the essence of timeless ”): transparent background · text #525252 · radius 16px · padding 16px · 400 16px Inter Variable · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Badge** (“Used by folks at”): transparent background · text #747474 · border 1px solid #b7b7b7 · radius 3.35544e+07px · padding 4px 8px · 400 12px Inter Variable
- **Navigation item** (“Features Solutions Recipes Models Resour”): background #ebebeb · text #525252 · border 1px solid #b7b7b7 · radius 16px · padding 8px 8px 8px 16px · 400 16px Inter Variable

## Do

- Use #fafafa as the default canvas.
- Let Marund shape large editorial headlines.
- Use Inter Variable for compact interface text.
- Frame demos with fine gray outlines and rounded edges.
- Keep violet and pink accents selective.
- Give sections generous breathing room.
- Let portfolio media supply vivid color.

## Don't

- Do not turn the whole page into a saturated gradient.
- Do not use heavy shadows on every card.
- Do not make the navigation full-bleed.
- Do not use the media palette as core brand colors.
- Do not crowd the page with dense copy.
- Do not replace the canvas demos with generic stock imagery.

## Agent prompt

Build a new Fuser-style page as a quiet, product-led creative software experience. Use #fafafa Canvas White as the dominant background, #171717 Ink Black for key headings, and #525252 Soft Graphite for supporting copy. Reserve #4f39f6 Signal Violet, #bdbcfc Lavender Haze, and #fca3b9 Blush Glow for restrained links, control details, or atmospheric gradient moments. Set editorial headings in Marund or a close free substitute such as DM Sans; use Inter for navigation, buttons, and labels. Create a centered floating pill nav, a spacious canvas-like hero with layered product panels, and generous whitespace between sections. Use thin #b7b7b7 borders, rounded controls, and soft, limited shadows. Make vivid creative examples the main source of color, and keep product demonstrations tactile, framed, and clearly legible.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered headline below a broad, grid-backed product canvas with overlapping media panels and a floating nav. | prompt-to-generate demo, primary navigation, explore recipes link | fine grid backdrop, layered framed media, pill navigation, floating input |
| 2 | logo-cloud | Single centered horizontal strip of partner and customer marks on the light canvas. | social proof | monochrome logo row, thin divider |
| 3 | product-showcase | Centered section intro followed by a wide canvas example and compact category selector. | Get Started CTA, category selection | connected thumbnails, framed product demo, pill selector |
| 4 | feature-grid | Intro above a two-row grid of six image-led recipe cards. | explore recipes, browse examples | rounded media cards, overlaid labels, compact grid |
| 5 | pricing | Centered heading and explanation, followed by a horizontal plan callout. | learn more, free trial CTA | minimal plan row, pill action |
| 6 | product-showcase | Centered heading above a broad, multi-model canvas illustration. | model discovery | connected model labels, central media panel |
| 7 | integrations | Compact centered description above a horizontal provider-logo row. | provider discovery | monochrome logo strip |
| 8 | faq | Two columns: large multiline heading at left and ruled question rows at right. | expandable questions | plus indicators, fine row dividers |
| 9 | other | Single-column, centered editorial statement with a small attribution. | brand storytelling | centered text, quiet attribution |
| 10 | cta | Centered closing headline and CTA surrounded by floating creative media. | Get Started CTA | scattered media panels, soft ambient gradient |
| 11 | footer | Large wordmark above a multi-column company, product, legal, and social link grid. | site-wide navigation | oversized custom wordmark, gradient field, link columns |

## Source CSS custom properties (selected)

```css
--tw-drop-shadow-size: drop-shadow(0 .25rem 1.5rem var(--tw-drop-shadow-color,#00000080));
--font-fuser-accent: "Marund";
--font-fuser-mono: "Fira Code Variable";
--font-fuser-sans: "Inter Variable";
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/fuser-studio