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

# Herdi.ng — Bookmarking Landing Page · Design System

> A calm dark canvas for playful, visual bookmarking.

**Theme:** dark · **Industry:** productivity · **Source:** https://www.herdi.ng/lp · **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._

Herdi.ng pairs a quiet, warm charcoal interface with an oversized product preview and compact modular content blocks. Soft contrast, simple typography, and irreverent copy keep the bookmarking tool approachable.

## North star

Keep the interface itself quietly charcoal and let the colorful bookmark imagery provide the page’s visual energy.

## Overview

The page is built on a warm charcoal canvas, with closely related dark surfaces defining cards and section groups rather than conspicuous outlines. Off-white provides crisp headline contrast, while two muted gray tones carry supporting copy and small labels. The restrained interface palette lets the vivid green-to-cyan imagery inside the product preview stand out; treat those colors as demonstration content, not as core brand accents. Styrene is used throughout at a regular weight, with an oversized, naturally wrapped hero headline and compact uppercase button labels. The layout uses a wide, centered frame and asymmetrical card grid: introductory copy and headline sit beside account actions, followed by a broad product showcase and compact feature panels. Rounded cards, generous gaps between major blocks, and tighter spacing within cards create a comfortable rhythm. Shadows are subtle and inset, so depth comes mainly from tonal layering.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Warm Charcoal | `#232320` | `--color-warm-charcoal` | brand | Primary page canvas and the dark backing around the product preview. |
| Quiet Taupe | `#797870` | `--color-quiet-taupe` | neutral | Muted supporting text and subdued labels against dark surfaces. |
| Soft Porcelain | `#eeeeed` | `--color-soft-porcelain` | neutral | Main headline and high-contrast body text on charcoal. |
| Deep Umber | `#1c1c1a` | `--color-deep-umber` | surface | Underlying surface spanning the landing page’s section backgrounds. |
| Ash Linen | `#afaea6` | `--color-ash-linen` | neutral | Secondary explanatory copy and lower-emphasis text. |
| Olive Slate | `#2e2e29` | `--color-olive-slate` | surface | Raised cards and dark secondary controls. |
| Moss Graphite | `#35352f` | `--color-moss-graphite` | surface | Subtle variation on card surfaces for layered content. |
| Shadowed Olive | `#272723` | `--color-shadowed-olive` | surface | Low-contrast card and panel backgrounds. |
| Stone Charcoal | `#404039` | `--color-stone-charcoal` | surface | Occasional deeper card detail and tonal separation. |
| Muted Bark | `#3a3a34` | `--color-muted-bark` | surface | Secondary button and interface detail surface. |
| Near Black | `#161615` | `--color-near-black` | semantic | Dark foreground text on the light sign-up button. |
| Weathered Pewter | `#848379` | `--color-weathered-pewter` | neutral | Occasional low-priority text and control details. |
| Dark Lichen | `#47473f` | `--color-dark-lichen` | surface | Deeper button and card variation within the dark interface. |
| Pale Greige | `#b5b4ac` | `--color-pale-greige` | neutral | Sparse tertiary text details and subdued interface copy. |

### Semantic aliases

`--color-canvas` → `#232320` (Warm Charcoal) · `--color-surface` → `#1c1c1a` (Deep Umber) · `--color-surface-2` → `#2e2e29` (Olive Slate) · `--color-surface-3` → `#35352f` (Moss Graphite) · `--color-surface-4` → `#272723` (Shadowed Olive) · `--color-text` → `#eeeeed` (Soft Porcelain) · `--color-text-muted` → `#797870` (Quiet Taupe) · `--color-text-subtle` → `#afaea6` (Ash Linen)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#eeeeed` | `#232320` | 13.57:1 | AAA |
| `#eeeeed` | `#1c1c1a` | 14.7:1 | AAA |
| `#eeeeed` | `#2e2e29` | 11.75:1 | AAA |
| `#eeeeed` | `#35352f` | 10.63:1 | AAA |
| `#797870` | `#232320` | 3.55:1 | AA-large |
| `#797870` | `#1c1c1a` | 3.85:1 | AA-large |
| `#797870` | `#2e2e29` | 3.08:1 | AA-large |
| `#797870` | `#35352f` | 2.78:1 | fail |
| `#afaea6` | `#232320` | 7.07:1 | AAA |
| `#afaea6` | `#1c1c1a` | 7.66:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Styrene | `--font-body` | webfont | 400 | Used throughout headlines, body copy, buttons, links, and interface labels. | Inter |

- **Styrene:** Regular weight throughout; buttons use uppercase labels, while headings and body copy retain natural casing.

### Type scale — Perfect Fifth (ratio ≈ 1.476, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 45px | 400 | 1.12 | 0 | — | Styrene | Large, naturally wrapped hero headline. |
| h2 | 27px | 400 | 1.56 | 0 | — | Styrene | Section-level explanatory statements and feature headings. |
| h3 | 20px | 400 | 1.56 | 0 | — | Styrene | Compact card titles and subsection headings. |
| body | 14px | 400 | 1.56 | 0 | — | Styrene | Introductory copy, feature descriptions, and supporting text. |
| button | 15px | 400 | normal | 0 | uppercase | Styrene | Uppercase sign-up and call-to-action labels. |
| link | 15px | 400 | 1.56 | 0 | — | Styrene | Small navigation or attribution links. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 4, 8, 12, 15, 16, 30, 32, 34, 45, 48, 64, 80 px.
- Section rhythm 48px · element gap 4px · card padding — · max content width 1280px.

A centered page frame uses the measured maximum width of 1280px and a comfortable modular grid. The opening block arranges headline, description, and account actions in adjacent cards; a wide product preview follows, then a two-column how-it-works area and compact feature cards. Later content combines a narrow audience list with a broad example panel. Major sections follow the measured 48px rhythm, with tighter internal spacing. Keep alignment left-led and preserve the intentionally uneven card proportions.

## Shape & elevation

- Radius: button `50%` · card `16px` · media `8px` · xs `8px` · sm `12px` · md `16px` · pill `9999px`
- Shadow `inset` (other): `rgba(8, 9, 1, 0.08) 0px 56px 72px 0px inset, rgba(8, 9, 1, 0.024) 0px 24px 29px 0px inset, rgba(8, 9, 1, 0.02) 0px 11px 14px 0px inset, rgba(8, 9, 1, 0.01) 0px 6px 7px 0px inset, rgba(8, 9, 1, 0.008) `
- Motion: standard transition `0.1s cubic-bezier(0.06, 0.69, 0.28, 0.96)` on interactive elements.

The interface relies on neighboring charcoal tones and rounded surfaces rather than visible borders. Cards use measured radii of 16px, media uses 8px, and buttons use pill-like shapes. A subtle inset shadow adds restrained depth; avoid strong floating shadows or high-contrast outlines.

## Imagery

The main visual is a large embedded product-interface preview, framed by a vivid green and cyan gradient visible within the mock-up. Smaller cards show collected visual references and interface examples. Keep image content inside rounded dark panels and avoid turning illustration colors into page-wide brand accents. The screenshots show no dominant photography or video.

## Components

### Hero card

Large headline and small brand mark on a dark rounded panel, paired with an adjacent muted introductory paragraph.

### Account actions

Compact uppercase SIGN UP and LOG IN controls; the primary uses a light muted fill, while the secondary stays dark.

### Theme switcher

Small pill-shaped toggle presented in its own understated dark panel.

### Product showcase

Wide, rounded dark container holding an interface preview; vivid green and cyan are confined to the mock-up.

### How-it-works block

Short numbered steps paired with a concise action button and supporting line.

### Feature cards

Compact grid panels combine short copy, interface controls, and visual examples on closely related charcoal surfaces.

### Attribution footer

Small, subdued creator credit and link in a simple full-width dark band.

### Measured component styles

- **Primary button** (“SIGN UP”): background #7f7e77 · text #161615 · radius 16px · padding 0px 16px · 400 15px Styrene · uppercase
- **Secondary button** (“LOG IN”): background #2f2f2a · text #fffced · radius 16px · padding 0px 16px · 400 15px Styrene · uppercase
- **Link** (“graz.io”): transparent background · text #fffffe · radius 0px · padding 0px · 400 15px Styrene
- **Card** (“Card style example”): background #2e2e2b · text #fffffe · radius 16px · padding 0px · 400 15px Styrene

## Do

- Use warm charcoal as the dominant page canvas.
- Reserve off-white for the strongest textual contrast.
- Keep explanatory copy muted and clearly secondary.
- Use surface-tone changes to separate cards without prominent borders.
- Let the product preview carry the vivid green and cyan.
- Keep button labels uppercase and concise.

## Don't

- Do not spread mock-up colors across the interface as brand accents.
- Do not introduce bright white page backgrounds.
- Do not add heavy borders or dramatic drop shadows.
- Do not make every card the same size or visual weight.
- Do not use bold typography where the measured type is regular.
- Do not crowd the gaps between major content blocks.

## Agent prompt

Build a new page in Herdi.ng’s calm, dark visual style. Use Warm Charcoal (#232320) for the main canvas, Deep Umber (#1c1c1a) for section backing, and related dark surfaces such as Olive Slate (#2e2e29) for cards. Set text in regular Styrene or Inter; use Soft Porcelain (#eeeeed) for key headings and Ash Linen (#afaea6) or Quiet Taupe (#797870) for supporting copy. Keep the frame centered within the measured 1280px maximum width, with a modular, asymmetrical card grid and comfortable section rhythm. Use rounded panels, subtle inset depth, and restrained pill-shaped controls. If showing product imagery, confine bright green and cyan to the mock-up itself. Keep copy and button labels concise, with uppercase action labels.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Three-column opening cards: headline, description, then account actions above a theme toggle. | early-beta sign-up, secondary log-in, theme switcher | dark rounded cards, contrasting primary button, muted supporting copy |
| 2 | how-it-works | Two-column section pairing a large product illustration with numbered steps and an action. | three-step explanation, repeatable workflow, action button | wide product visual, numbered copy, rounded dark container |
| 3 | feature-grid | Six-column measured grid presenting content types, ordering controls, and copy-paste messaging in compact cards. | content type overview, reordering, copy-and-paste hint | modular feature cards, small interface examples, dark tonal panels |
| 4 | product-showcase | Three-column area with audience navigation beside a broad example card and supporting visuals. | audience selection, contextual example | compact category list, large rounded showcase, reference cards |
| 5 | footer | Single-column, low-profile full-width closing strip. | creator attribution, external link | small muted text, dark band |

## Source CSS custom properties (selected)

```css
--colors-sand1: hsl(61, 2.0%, 8.3%);
--colors-sand2: hsl(60, 3.7%, 10.6%);
--colors-sand3: hsl(58, 3.7%, 13.1%);
--colors-sand4: hsl(57, 3.6%, 15.3%);
--colors-sand5: hsl(56, 3.7%, 17.4%);
--colors-sand6: hsl(55, 3.7%, 19.9%);
--colors-sand7: hsl(53, 3.7%, 23.6%);
--colors-sand8: hsl(50, 3.8%, 30.6%);
--colors-sand9: hsl(50, 4.0%, 42.7%);
--colors-sand10: hsl(52, 3.1%, 48.3%);
--colors-sand11: hsl(50, 4.0%, 61.8%);
--colors-sand12: hsl(56, 4.0%, 92.8%);
--colors-sandA1: hsla(0, 0%, 0%, 0);
--colors-sandA2: hsla(60, 89.8%, 91.4%, 0.026);
--colors-sandA3: hsla(60, 95.5%, 92.5%, 0.056);
--colors-sandA4: hsla(60, 75.6%, 96.4%, 0.078);
--colors-sandA5: hsla(60, 81.9%, 95.2%, 0.104);
--colors-sandA6: hsla(41, 87.6%, 94.8%, 0.134);
--colors-sandA7: hsla(60, 95.4%, 96.2%, 0.172);
--colors-sandA8: hsla(49, 93.5%, 95.7%, 0.254);
--colors-sandA9: hsla(52, 97.3%, 96.2%, 0.391);
--colors-sandA10: hsla(52, 97.8%, 96.7%, 0.451);
--colors-sandA11: hsla(51, 97.0%, 97.8%, 0.597);
--colors-sandA12: hsla(60, 88.7%, 99.8%, 0.923);
--colors-js_quot: hsl(50, 75%, 70%);
--colors-js_decl: hsl(200, 75%, 70%);
--colors-js_func: hsl(300, 75%, 70%);
--colors-js_keyw: hsl(37, 75%, 70%);
--colors-js_pare: hsl(210, 75%, 70%);
--colors-js_squa: hsl(230, 75%, 70%);
--colors-js_curl: hsl(250, 75%, 70%);
--colors-js_numb: hsl(100, 75%, 70%);
--colors-js_logi: hsl(202, 35%, 85%);
--colors-js_comm: hsl(200, 10%, 45%);
--colors-html_tags: hsl(0, 75%, 70%);
--colors-html_angl: hsl(200, 10%, 35%);
--colors-html_attr: hsl(200, 75%, 70%);
--colors-html_quot: hsl(50, 75%, 70%);
--colors-step_0: hsl(60, 6%, 42%);
--colors-step_1: hsl(60, 6%, 39.5%);
```

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