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

# Zelt · Design System

> Warm neutrals, oversized type, and a focused HR story

**Theme:** light · **Industry:** saas · **Source:** https://zelt.app/ · **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._

Zelt’s homepage pairs a warm, quiet canvas with a centered oversized headline and compact navigation. Soft cream surfaces and a golden CTA add gentle emphasis without disrupting the restrained, spacious composition.

## North star

Let a warm, quiet canvas and centered oversized typography lead; use gold only to mark key actions.

## Overview

The page establishes a calm, warm-neutral identity: a broad muted gray-beige canvas supports near-black text, while cream navigation surfaces and a small golden CTA provide the main contrast. A narrow announcement band sits above a floating, pill-like navigation bar; both remain visually secondary to the centered hero. Typography is clean system sans-serif, with a very large, regular-weight headline, tight tracking, and a compact supporting line. The first viewport keeps generous open space around the message and CTA, creating an editorial rather than dashboard-like feel. The measured page uses a spacious grid and a 1181px maximum content width, but the hero reads as a centered, constrained text composition. Media is visible near the lower edge and elsewhere in the page, yet the opening identity is defined primarily by typography, muted surfaces, and restrained gold accents. Rounded controls soften the otherwise flat layout.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Soft Ink | `#121718` | `--color-soft-ink` | neutral | Primary headline, navigation labels, body copy, and text on golden CTA surfaces. |
| Warm Haze | `#e4e0dd` | `--color-warm-haze` | brand | Dominant muted gray-beige canvas across the hero and broad page background. |
| Oat Cream | `#f6f3ef` | `--color-oat-cream` | surface | Light navigation and button surfaces, plus the measured section background. |
| Honey Gold | `#ffcd6d` | `--color-honey-gold` | accent | Primary demo and get-started CTA fill; the brightest functional accent. |
| Apricot Glow | `#ffe2aa` | `--color-apricot-glow` | accent | Announcement band and pale warm surface accent behind small navigation content. |
| Porcelain Mist | `#fbf9f8` | `--color-porcelain-mist` | surface | Subtle light surface used in navigation-area treatments, not a dominant page color. |

### Semantic aliases

`--color-canvas` → `#e4e0dd` (Warm Haze) · `--color-surface` → `#f6f3ef` (Oat Cream) · `--color-surface-2` → `#ffe2aa` (Apricot Glow) · `--color-surface-3` → `#fbf9f8` (Porcelain Mist) · `--color-text` → `#121718` (Soft Ink) · `--color-accent` → `#ffcd6d` (Honey Gold) · `--color-accent-2` → `#ffe2aa` (Apricot Glow) · `--color-on-accent` → `#121718` (Soft Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#121718` | `#e4e0dd` | 13.78:1 | AAA |
| `#121718` | `#f6f3ef` | 16.35:1 | AAA |
| `#121718` | `#ffe2aa` | 14.39:1 | AAA |
| `#121718` | `#fbf9f8` | 17.23:1 | AAA |
| `#ffcd6d` | `#e4e0dd` | 1.13:1 | fail |
| `#ffcd6d` | `#f6f3ef` | 1.34:1 | fail |
| `#ffcd6d` | `#ffe2aa` | 1.18:1 | fail |
| `#ffcd6d` | `#fbf9f8` | 1.41:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| sans-serif | `--font-body` | system | 400, 500 | System sans-serif throughout; oversized hero headline, navigation, supporting copy, and captions. | Inter |

- **sans-serif:** Regular-weight display and headline; measured body/navigation weights are 500 and 400. Tight negative tracking; sentence case.

### Type scale — Custom (ratio ≈ 2.595, base 15px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 101px | 400 | 0.95 | -0.03em | — | sans-serif | Oversized hero headline treatment in the first viewport. |
| h1 | 23px | 400 | 1.4 | -0.02em | — | sans-serif | Compact section or content headings beneath the display title. |
| body | 15px | 500 | 3.13 | -0.02em | — | sans-serif | Supporting hero copy and descriptive page text. |
| caption | 14px | 400 | 0.95 | -0.043em | — | sans-serif | Small announcement and secondary interface labels. |
| nav | 101px | 400 | 0.95 | -0.03em | — | sans-serif | Primary navigation and announcement-style navigation text. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 5, 6, 8, 12, 16, 29, 43, 54, 173 px.
- Section rhythm 173px · element gap 16px · card padding — · max content width 1181px.

Use a spacious, centered composition with the measured 1181px maximum page width and a 12-column underlying grid. The hero title and supporting copy align centrally, with a compact CTA beneath and substantial open space around the group. A slim announcement strip precedes the floating navigation surface. Keep the density low and let sections breathe; the measured section rhythm is spacious, with a large 173px section gap and a 16px element gap. Avoid adding extra framing around the hero.

## Shape & elevation

- Radius: button `12px` · nav `12px` · xs `12px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s ease` on interactive elements.

The interface is largely flat, with no measured shadows or gradient system. Separate regions through warm surface shifts rather than strong borders. The navigation sits as a light rounded capsule against the canvas, and the golden CTA is distinguished by color and rounded corners rather than depth effects.

## Imagery

The opening viewport is led by typography rather than a prominent image; a soft, pale media form is only beginning to appear at the bottom edge. The full measured section contains many images and SVGs, so treat product media as supporting content rather than the brand’s primary signature. Keep imagery clean and integrated into the page, without introducing a new dominant palette.

## Components

### Announcement strip

A shallow full-width warm apricot band above the navigation, with a compact news marker, announcement text, and a close affordance.

### Floating navigation

A centered cream capsule containing the Zelt wordmark, Product and Resources menus, Pricing, Login, and a golden See demo CTA.

### Hero headline

Large regular-weight, near-black sans-serif headline centered across two lines, with tight negative tracking.

### Hero supporting copy

A short centered line beneath the headline describing the unified employee view across HR, Payroll, and IT.

### Primary CTA

Golden rounded button with near-black label; used for See demo and the hero’s Get started action.

### Scroll cue

Small circular light control near the lower-left edge of the opening viewport, showing a downward arrow.

### Measured component styles

- **Primary button** (“See demo”): background #ffcd6d · text #121718 · radius 12px · padding 0px · 500 15px sans-serif
- **Secondary button**: background #f7f6f5 · text #121718 · radius 50% · padding 0px · 400 15.12px sans-serif
- **Navigation item** (“News Zelt named Official HCM Platform Pa”): transparent background · text #121718 · radius 0px · padding 0px · 400 7.2px sans-serif

## Do

- Keep the hero message centered and visually dominant.
- Use Warm Haze #e4e0dd as the broad canvas color.
- Reserve Honey Gold #ffcd6d for primary actions.
- Use Soft Ink #121718 for all prominent text.
- Separate navigation with a light cream capsule.
- Preserve generous empty space around the hero.
- Keep typography regular-weight and clean.

## Don't

- Don’t introduce saturated colors outside the measured palette.
- Don’t add heavy shadows or decorative gradients.
- Don’t crowd the hero with extra panels or badges.
- Don’t use bold display typography in place of the measured regular style.
- Don’t turn the navigation into a full-width dense bar.
- Don’t make illustrations more prominent than the headline.

## Agent prompt

Build a new page in Zelt’s warm, spacious SaaS style. Use Warm Haze #e4e0dd as the dominant canvas, Soft Ink #121718 for text, and Oat Cream #f6f3ef for quiet navigation or content surfaces. Use Honey Gold #ffcd6d sparingly for the primary action, with Apricot Glow #ffe2aa reserved for announcement-like emphasis. Set clean system sans-serif type with regular-weight, tightly tracked display text; center the main message and leave generous breathing room. Keep a narrow announcement strip above a compact rounded navigation capsule. Favor flat surfaces and soft color transitions over shadows, borders, or gradients. Use imagery as supporting material, not as the focal point, and keep the page’s overall density low.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Announcement band and centered capsule navigation above a centered headline, supporting line, and CTA. | Announcement dismissal, Primary get-started action, Scroll cue | Warm neutral canvas, Floating rounded navigation, Oversized centered headline, Golden CTA |

## Source CSS custom properties (selected)

```css
--hsf-global__font-size: 2rem;
--hsf-richtext__font-size: 2rem;
--hsf-global__color: rgb(18, 23, 24);
--hsf-background__padding: 0rem;
--hsf-row__horizontal-spacing: 1.5rem;
--hsf-row__vertical-spacing: 1.5rem;
--hsf-module__vertical-spacing: 0px;
--hsf-field-input__placeholder-color: rgba(0, 0, 0, 0.5);
--hsf-field-input__border-radius: 0.4rem;
--hsf-field-input__border-width: 1px;
--wp--preset--color--black: #000000;
--wp--preset--color--cyan-bluish-gray: #abb8c3;
--wp--preset--color--white: #ffffff;
--wp--preset--color--pale-pink: #f78da7;
--wp--preset--color--vivid-red: #cf2e2e;
--wp--preset--color--luminous-vivid-orange: #ff6900;
--wp--preset--color--luminous-vivid-amber: #fcb900;
--wp--preset--color--light-green-cyan: #7bdcb5;
--wp--preset--color--vivid-green-cyan: #00d084;
--wp--preset--color--pale-cyan-blue: #8ed1fc;
--wp--preset--color--vivid-cyan-blue: #0693e3;
--wp--preset--color--vivid-purple: #9b51e0;
--wp--preset--font-size--small: 13px;
--wp--preset--font-size--medium: 20px;
--wp--preset--font-size--large: 36px;
--wp--preset--font-size--x-large: 42px;
--wp--preset--spacing--20: 0.44rem;
--wp--preset--spacing--30: 0.67rem;
--wp--preset--spacing--40: 1rem;
--wp--preset--spacing--50: 1.5rem;
--wp--preset--spacing--60: 2.25rem;
--wp--preset--spacing--70: 3.38rem;
--wp--preset--spacing--80: 5.06rem;
--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);
--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);
--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);
--wp--preset--shadow--outlined: 6px 6px 0px -3px rgb(255, 255, 255), 6px 6px rgb(0, 0, 0);
--wp--preset--shadow--crisp: 6px 6px 0px rgb(0, 0, 0);
```

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