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

# Huly · Design System

> A luminous interface for focused team productivity

**Theme:** light · **Industry:** productivity · **Source:** https://huly.io/ · **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._

Huly presents an all-in-one team workspace through a dramatic dark hero and vivid, luminous product imagery. Alternating light editorial sections and a dark GitHub feature band explain the breadth of the platform before a concise closing invitation.

## North star

Let luminous, carefully framed product UI carry the story, using restrained typography and alternating dark and light fields for clarity.

## Overview

The page balances a near-black product atmosphere with broad, pale content bands. The hero and GitHub synchronization section use #090a0c and #111111 as immersive backdrops; #f6f6f6 provides a calm canvas for collaboration and documentation. Bright white display text and product screenshots stand out against dark fields, while dark headings and muted body copy keep light sections readable. Inter handles navigation, supporting copy and controls; a compact monospace face gives large headlines a distinctive technical character. Wide, left-aligned headings introduce sections, and full-bleed interface visuals carry much of the storytelling. Product panels combine dark UI, subtle glows and blue-violet light, while warm coral appears sparingly as part of artwork and gradients rather than a dominant brand fill. Generous vertical intervals separate dense feature layouts, and rounded controls and media frames soften the otherwise precise, software-focused presentation.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Night Interface | `#090a0c` | `--color-night-interface` | surface | Primary dark canvas for the opening hero and closing CTA, framing glowing product imagery. |
| Gallery Mist | `#f6f6f6` | `--color-gallery-mist` | surface | Main light canvas behind productivity, collaboration, MetaBrain, and documentation content. |
| Graphite Ink | `#303236` | `--color-graphite-ink` | neutral | Default text and navigation color, especially legible across pale sections. |
| Bright Type | `#ffffff` | `--color-bright-type` | neutral | Headings, navigation, and button text placed on dark surfaces. |
| Carbon Band | `#111111` | `--color-carbon-band` | surface | Dark background for the GitHub synchronization feature section. |
| Soft Slate | `#95979e` | `--color-soft-slate` | neutral | Muted supporting copy, most visible in dark product-focused areas. |
| Quiet Rule | `#9d9d9e` | `--color-quiet-rule` | semantic | Measured border tone for restrained control outlines and hairlines. |
| Signal Blue | `#5683da` | `--color-signal-blue` | accent | Blue accent found in buttons and product media; use as a selective highlight. |
| Warm Haze | `#f8e6dd` | `--color-warm-haze` | accent | Warm end of measured gradients, seen in atmospheric artwork rather than core UI. |
| Silver Text | `#aaaaab` | `--color-silver-text` | neutral | Secondary text tone appearing in measured page content. |
| Coral Flare | `#ff8964` | `--color-coral-flare` | accent | Small warm highlight in media, glow effects, and illustration details. |
| Button Charcoal | `#222325` | `--color-button-charcoal` | semantic | Dark control color measured within button styling. |
| Pale Type | `#e5e5e7` | `--color-pale-type` | neutral | Light text detail in dark interface and supporting content. |
| Lavender Mist | `#cbd3eb` | `--color-lavender-mist` | accent | Cool end of measured atmospheric gradients and product artwork. |
| Muted Graphite | `#4a4b50` | `--color-muted-graphite` | neutral | Low-emphasis text and other restrained supporting details. |
| Cloud Gray | `#e0dfdf` | `--color-cloud-gray` | neutral | Pale gradient detail within atmospheric artwork rather than a defining UI color. |

### Semantic aliases

`--color-canvas` → `#f6f6f6` (Gallery Mist) · `--color-surface` → `#090a0c` (Night Interface) · `--color-surface-2` → `#111111` (Carbon Band) · `--color-text` → `#303236` (Graphite Ink) · `--color-text-muted` → `#ffffff` (Bright Type) · `--color-text-subtle` → `#95979e` (Soft Slate) · `--color-border` → `#9d9d9e` (Quiet Rule) · `--color-accent` → `#5683da` (Signal Blue) · `--color-on-accent` → `#ffffff` (Bright Type)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#303236` | `#f6f6f6` | 11.88:1 | AAA |
| `#303236` | `#090a0c` | 1.54:1 | fail |
| `#303236` | `#111111` | 1.47:1 | fail |
| `#ffffff` | `#f6f6f6` | 1.08:1 | fail |
| `#ffffff` | `#090a0c` | 19.8:1 | AAA |
| `#ffffff` | `#111111` | 18.88:1 | AAA |
| `#95979e` | `#f6f6f6` | 2.7:1 | fail |
| `#95979e` | `#090a0c` | 6.79:1 | AA |
| `#95979e` | `#111111` | 6.47:1 | AA |
| `#5683da` | `#f6f6f6` | 3.44:1 | AA-large |

### Gradients

- `linear-gradient(rgb(248, 230, 221) 15%, rgb(203, 211, 235) 83.5%)`
- `linear-gradient(rgba(9, 10, 12, 0), rgb(9, 10, 12) 50%)`
- `radial-gradient(circle, rgba(210, 208, 208, 0.6) 0px, rgba(0, 0, 0, 0) 100%)`
- `linear-gradient(rgb(248, 230, 221) 17.05%, rgba(248, 230, 221, 0) 66.61%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| __Inter_f367f3 | `--font-body` | webfont | 400, 300, 500, 600, 700 | Navigation, body copy, captions, and buttons | Inter |
| __esbuild_b38aaf | `--font-display` | webfont | 400, 600, 500 | Display and section headings | IBM Plex Mono |

- **__Inter_f367f3:** Measured weights span light to bold; use light supporting copy, restrained tracking, and uppercase only for compact CTA labels.
- **__esbuild_b38aaf:** Monospace display face gives large headings a technical signature; measured display weights are semibold with tight negative tracking.

### Type scale — Augmented Fourth (ratio ≈ 1.411, base 15px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 84px | 600 | 0.9 | -0.04em | — | __esbuild_b38aaf | Oversized hero and prominent section display headlines. |
| h1 | 80px | 600 | 0.8 | -0.05em | — | __esbuild_b38aaf | Primary page headline in the opening hero. |
| h2 | 32px | 400 | 1 | -0.02em | — | __esbuild_b38aaf | Major feature-section headings. |
| h3 | 28px | 400 | 1 | -0.02em | — | __esbuild_b38aaf | Subsection titles within product feature areas. |
| h4 | 24px | 500 | 1.38 | -0.02em | — | __Inter_f367f3 | Smaller feature-card and documentation headings. |
| body | 15px | 300 | 1.38 | -0.02em | — | __Inter_f367f3 | Supporting paragraphs and explanatory product copy. |
| caption | 14px | 400 | 1 | -0.02em | — | __Inter_f367f3 | Compact descriptions and interface-related notes. |
| button | 14px | 400 | 1.5 | 0 | — | __Inter_f367f3 | Action labels, including uppercase hero CTA. |
| nav | 14px | 400 | 1.5 | 0 | — | __Inter_f367f3 | Header navigation and account links. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 2, 4, 5, 6, 8, 10, 12, 14, 16, 18, 19, 20, 24, 32, 40, 64 px.
- Section rhythm 180px · element gap 18px · card padding — · max content width 960px.

A centered, spacious page uses a measured maximum content width of 960px, with wide full-bleed media extending beyond text columns. Headings and copy generally align left; the collaboration section centers its headline over a broad visual. Feature cards use varied multi-column arrangements, while documentation becomes a narrower editorial flow. Large measured section gaps give each product story room, balanced by compact feature grids within individual sections.

## Shape & elevation

- Radius: button `9999px` · card `12px` · media `30px` · xs `10px` · sm `12px` · md `30px` · pill `9999px`
- Shadow `md` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.35) 0px 4px 16px 0px`
- Shadow `hairline` (card): `rgb(255, 255, 255) 0px 0px 0px 0px, rgba(255, 255, 255, 0.4) 0px 0px 0px 6px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Shadow `sm` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.15) 0px 4px 6px 0px`
- Shadow `lg` (media): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.5) 0px 6px 25px 0px`
- Shadow `md-2` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.15) 0px 4px 10px 0px`
- Motion: standard transition `0.2s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

Depth comes mostly from dark media panels, luminous edges, and layered product imagery rather than prominent card shadows. Cards have measured 12px corners, media frames 30px corners, and buttons pill-shaped corners. Use subtle outlines and restrained shadows to separate UI from canvas without adding heavy elevation.

## Imagery

Product UI is the main visual material: dark screenshots, task boards, call interfaces, and documentation panels appear as large framed showcases and smaller feature tiles. The hero uses a luminous vertical blue-violet beam behind a product screenshot. Soft glow, atmospheric gradients, and occasional warm coral highlights are integrated into media. Real video-call imagery adds a human moment amid primarily interface-led visuals.

## Components

### Header navigation

Compact Inter navigation sits on the dark hero, with brand mark at left and community, download, and account links arranged across the top.

### Hero CTA

Pill-shaped action sits beneath the hero copy; the screenshot shows a pale fill and warm edge glow over a dark background.

### Product showcase

Large dark interface image is framed by blue-violet luminous treatment and anchored near the bottom of the opening section.

### Feature tile

Rounded dark product-image cards pair interface visuals with short captions, arranged in an irregular multi-column grid.

### Collaboration media

Wide video-call frame shows participants within a pale virtual-office setting, with supporting copy and compact feature summaries below.

### GitHub feature band

Near-black section centers a large synchronization screenshot above a three-column set of concise feature descriptions and blue-tinted icons.

### Documentation content

Light editorial section combines text, product visuals, a building-mounted campaign image, and a dark code example.

### Closing CTA

Dark footer-like block pairs a circular glowing product illustration with a short invitation, pill action, and low-emphasis footer links.

### Measured component styles

- **Primary button** (“Link”): background #5683da · text #ffffff · radius 4px · padding 0px 10px 0px 8px · 400 14px __Inter_f367f3
- **Secondary button** (“SEE IN ACTION”): background #d1d1d1 · text #0b0d10 · border 1px solid #9d9d9e · radius 9999px · padding 0px 64px · 700 12px __Inter_f367f3 · uppercase
- **Card** (“Keyboard shortcuts. Work efficiently wit”): background #0c0c0d · text #303236 · radius 12px · padding 0px · 400 16px __Inter_f367f3 · shadow rgb(255, 255, 255) 0px 0px 0px 0px, rgba(255, 255, 255, 0.4) 0px 0px 0px 6px, rg
- **Navigation item** (“Huly Pricing Resources Community Downloa”): transparent background · text #303236 · radius 0px · padding 0px · 400 16px __Inter_f367f3

## Do

- Use the measured near-black and pale canvas colors as the main section alternation.
- Give product screenshots generous space and treat them as the primary storytelling device.
- Reserve blue and coral accents for selective glow, media, or interaction highlights.
- Keep headings left-aligned and supporting copy compact.
- Use large section intervals to distinguish product stories.
- Favor rounded media frames and pill-shaped actions.

## Don't

- Do not turn the page into a uniformly dark layout.
- Do not use bright accents as large flat background fills.
- Do not crowd the hero with extra copy or decorative controls.
- Do not place generic stock imagery ahead of product UI.
- Do not add heavy shadows to every card.
- Do not use oversized, dense navigation.

## Agent prompt

Build a new productivity SaaS page in Huly’s visual style. Use Night Interface (#090a0c) for immersive hero or CTA bands and Gallery Mist (#f6f6f6) for editorial feature sections; reserve Carbon Band (#111111) for a distinct dark product feature. Set headings in a technical monospace display face and use Inter for navigation, body copy, and controls. Keep the content centered within the measured 960px maximum width, with broad product media, generous vertical section rhythm, and mostly left-aligned text. Make real interface screenshots the hero of each feature, framing them with restrained glow. Use Signal Blue (#5683da), Warm Haze (#f8e6dd), and Coral Flare (#ff8964) sparingly in media accents. Prefer rounded panels, pill actions, subtle borders, and clear contrast over decorative ornament.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Dark full-bleed hero with left-aligned title and copy, luminous interface media below. | Primary action, Product overview | Dark canvas, Glow-framed screenshot, Pill CTA |
| 2 | feature-grid | Light feature band with heading, short intro, and irregular multi-column card grid. | Feature discovery, Visual scanning | Pale canvas, Dark media cards, Rounded corners |
| 3 | feature-split | Light section with centered heading, wide call media, supporting copy, and compact feature summaries. | Feature explanation, Call interface preview | Video-call frame, Soft light setting, Three feature items |
| 4 | integrations | Near-black feature band with centered product screenshot and a three-column benefits grid. | Integration discovery, Capability comparison | Dark section, Luminous screenshot edge, Blue icon accents |
| 5 | product-showcase | Pale, media-led showcase with a collage of dark interface cards and a short heading. | Product exploration, Feature overview | Light canvas, Dark UI collage, Soft atmospheric glow |
| 6 | feature-split | Light editorial content flow pairing text and product images with a narrow reading column. | Long-form reading, Documentation preview | Editorial text, Product screenshots, Dark code panel |
| 7 | cta | Dark closing block with glowing circular artwork at left and invitation with actions at right. | Final conversion, Community invitation | Dark canvas, Warm and cool glow, Pill actions |

## Source CSS custom properties (selected)

```css
--shiki-foreground: #f9fafa;
--shiki-color-text: #f9fafa;
--shiki-color-background: transparent;
--shiki-background: #111112;
```

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