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

# Hashnode · Design System

> A quiet dark canvas for writing in public.

**Theme:** dark · **Industry:** devtools · **Source:** https://hashnode.com/ · **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._

Hashnode pairs a dark, restrained interface with a developer-focused editorial layout. A persistent sidebar frames a typographic hero, fine-line illustration, and compact feature grid.

## North star

Let typography and precise dark-surface hierarchy lead; keep accents sparse and every divider quiet.

## Overview

The page is built on a near-black canvas (#080a0e), with charcoal navigation and card surfaces that separate content without introducing bright section bands. Cool off-white (#e6e8eb) carries headings, navigation labels, and primary controls; muted gray (#9fa1a5) handles supporting copy and low-priority metadata. Hairline borders create quiet divisions around the sidebar, feature rows, and cards. Typography is compact and crisp: a bold Geist hero headline contrasts with Inter for navigation, body copy, and controls. The composition keeps a persistent, narrow left rail beside a broad content area. The hero aligns a large two-line message and concise copy on the left with a white line-art illustration on the right. Below it, six feature statements form a three-column grid with restrained icons and fine top rules. Spacing feels open around the hero but efficient in the feature area. Colorful green appears only as a small status accent, while a teal illustration tile belongs to the sidebar promo rather than the core identity.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Midnight Canvas | `#080a0e` | `--color-midnight-canvas` | neutral | Dominant page background and top navigation canvas. |
| Slate Mist | `#9fa1a5` | `--color-slate-mist` | neutral | Muted copy, timestamps, sidebar metadata, and secondary labels. |
| Cool Chalk | `#e6e8eb` | `--color-cool-chalk` | neutral | Headings, primary text, navigation labels, and dark-surface button text. |
| Charcoal Panel | `#15171c` | `--color-charcoal-panel` | surface | Sidebar, cards, and dark interface surfaces. |
| Quiet Graphite | `#1a1d22` | `--color-quiet-graphite` | neutral | Fine borders and understated separators around cards, badges, and navigation. |
| Shadow Gradient | `#323338` | `--color-shadow-gradient` | surface | Gradient-derived supporting tone; not a defining flat page color. |
| Feed Charcoal | `#23262c` | `--color-feed-charcoal` | surface | Secondary button and compact feed or card surfaces. |
| Status Green | `#4cb86a` | `--color-status-green` | semantic | Small New badge and navigation status indicator, not a dominant brand color. |
| Promo Teal | `#003e41` | `--color-promo-teal` | surface | Small promotional artwork tile in the sidebar; not a general page surface. |

### Semantic aliases

`--color-canvas` → `#080a0e` (Midnight Canvas) · `--color-surface` → `#15171c` (Charcoal Panel) · `--color-surface-2` → `#23262c` (Feed Charcoal) · `--color-surface-3` → `#003e41` (Promo Teal) · `--color-text` → `#e6e8eb` (Cool Chalk) · `--color-text-muted` → `#9fa1a5` (Slate Mist) · `--color-border` → `#1a1d22` (Quiet Graphite)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#e6e8eb` | `#080a0e` | 16.14:1 | AAA |
| `#e6e8eb` | `#15171c` | 14.61:1 | AAA |
| `#e6e8eb` | `#23262c` | 12.35:1 | AAA |
| `#e6e8eb` | `#003e41` | 9.69:1 | AAA |
| `#9fa1a5` | `#080a0e` | 7.66:1 | AAA |
| `#9fa1a5` | `#15171c` | 6.93:1 | AA |
| `#9fa1a5` | `#23262c` | 5.86:1 | AA |
| `#9fa1a5` | `#003e41` | 4.6:1 | AA |

### Gradients

- `linear-gradient(lab(7.72937 -0.163563 -4.07037) 30%, rgba(0, 0, 0, 0)), linear-gradient(rgba(0, 0, 0, 0), lab(7.72937 -0.163563 -4.07037) 70%), radial-gradient(farthest-side at 50% 0px, rgba(255, 255, 255, 0.12), rgba(0,`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 400, 700, 500 | Navigation, body copy, feature text, buttons, and compact metadata. | Inter |
| Geist | `--font-display` | webfont | 500, 700 | Large hero headline. | Inter |

- **Inter:** Mostly regular weight, with medium controls and uppercase, letter-spaced captions.
- **Geist:** Bold display weight, tight negative tracking, and compact line height.

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

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 48px | 700 | 1 | -0.025em | — | Geist | Large bold, two-line hero headline. |
| h2 | 30px | 400 | 1.2 | 0 | — | Inter | Feature section heading or secondary page heading. |
| h3 | 18px | 400 | 1.56 | 0 | — | Inter | Feature titles and compact content headings. |
| body | 14px | 400 | 1.43 | 0 | — | Inter | Supporting descriptions and explanatory interface copy. |
| caption | 12px | 500 | 1.33 | 0.05em | uppercase | Inter | Uppercase, letter-spaced compact labels and metadata. |
| button | 16px | 500 | 1.5 | 0 | — | Inter | Primary and secondary action labels. |
| nav | 16px | 400 | 1.5 | 0 | — | Inter | Sidebar links and top navigation items. |
| eyebrow | 12px | 500 | 1.33 | 0.05em | uppercase | Inter | Small uppercase pre-heading labels, such as promo metadata. |

OpenType features in use: `"calt", "kern", "liga"`.

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 2, 4, 6, 8, 12, 16, 20, 32, 56, 64 px.
- Section rhythm 56px · element gap 8px · card padding 4px · max content width —.

A persistent left sidebar anchors the viewport, with a thin divider before the wide main content. The top bar spans the content region, placing the page label at left and activity metadata at right. The hero uses a two-column split: text and CTA on the left, line illustration on the right. Six feature blocks sit below in three columns and two rows, aligned to a shared baseline with fine top rules. Preserve generous separation around the hero while keeping feature copy compact. No measured maximum content width is available.

## Shape & elevation

- Radius: button `6px` · card `12px` · badge `6px` · nav `50%` · link `6px` · xs `6px` · sm `12px`
- Shadow `md` (other, 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.35) 0px 1px 2px 0px, rgba(0, 0, 0, 0.35) 0px 2px`
- Motion: standard transition `0.15s cubic-bezier(0.16, 1, 0.3, 1)` on interactive elements.

The interface is predominantly flat. Thin graphite borders define the sidebar edge, feature divisions, and promotional card; dark surfaces provide the remaining hierarchy. A subtle shadow may lift the sidebar promo card, but avoid broad glow, strong drop shadows, or layered floating panels.

## Imagery

Use restrained monochrome line illustration rather than photography or 3D. The hero artwork sits to the right of the headline, drawn with thin light strokes against the dark canvas and generous negative space. Small interface icons are simple outlines. A saturated teal tile appears only inside the sidebar promotional card, so do not extend that treatment across the page.

## Components

### Sidebar navigation

Charcoal left rail with the Hashnode mark, compact icon-and-label links, a selected Feed row, and utility actions near the bottom.

### Top activity bar

Thin horizontal header with a page label at left and muted 24-hour article and writer counts at right.

### Hero

Bold two-line Geist headline and muted supporting copy at left, a light line-art illustration at right, and a pale primary Get started button.

### Feature grid

Six concise feature blocks arranged in three columns and two rows, each using a small outline icon, title, muted copy, and fine top border.

### Sidebar promo card

Compact What's New card with muted metadata, a teal artwork tile, clipped title, and subdued supporting text.

### Status badge

Small green New pill in the lower sidebar, used sparingly as a status cue.

### Measured component styles

- **Primary button** (“Feed”): background #23262c · text #e6e8eb · radius 6px · padding 8px · 400 14px Inter
- **Secondary button** (“Get started”): background #e4e5e8 · text #15171c · radius 6px · padding 0px 16px · 500 16px Inter
- **Link** (“Pro”): transparent background · text #e6e8eb · radius 6px · padding 8px · 400 14px Inter
- **Card** (“You get found A new blog starts at zero ”): transparent background · text #e6e8eb · border 1px solid #1a1d22 · radius 0px · padding 16px 0px 0px 0px · 400 16px Inter
- **Badge** (“Ctrl”): background #1b1e23 · text #9fa1a5 · border 1px solid #1a1d22 · radius 6px · padding 0px 6px · 500 12px system-ui
- **Navigation item** (“Buildful - AI coding agent that delivers”): transparent background · text #e6e8eb · radius 0px · padding 0px · 400 16px Inter

## Do

- Use #080a0e as the dominant canvas.
- Keep navigation and cards on restrained charcoal surfaces.
- Set hero display text in bold Geist or a close substitute.
- Use #9fa1a5 for supporting copy rather than competing white.
- Separate feature blocks with subtle #1a1d22 hairlines.
- Reserve green for small status indicators.
- Keep hero illustration monochrome and line-based.

## Don't

- Do not brighten the canvas into light mode.
- Do not use green or teal as broad page backgrounds.
- Do not add gradients or glows as dominant decoration.
- Do not replace the editorial grid with oversized cards.
- Do not make secondary copy as bright as the headline.
- Do not use photography where restrained line art belongs.
- Do not remove the sidebar-led information hierarchy.

## Agent prompt

Build a developer-focused homepage in Hashnode’s restrained dark editorial style. Use Midnight Canvas (#080a0e) as the main background, Charcoal Panel (#15171c) for the sidebar and select surfaces, Cool Chalk (#e6e8eb) for primary text, and Slate Mist (#9fa1a5) for supporting copy. Use Quiet Graphite (#1a1d22) for subtle rules. Keep the left navigation persistent and compact, with a thin boundary before the content area. Compose a spacious two-column hero with a bold, tightly tracked Geist-like headline, concise Inter copy, a pale primary action, and monochrome line illustration. Follow with a three-column feature grid using small outline icons and fine top borders. Treat Status Green (#4cb86a) and Promo Teal (#003e41) as rare utility or promotional details, never broad brand fills. Favor flat surfaces, clean alignment, and restrained shadows.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Persistent left sidebar and top activity bar frame a two-column hero above a three-column, two-row feature grid. | Primary signup action, Persistent sidebar navigation, Scannable feature overview | Bold split hero headline, Monochrome line illustration, Fine-rule feature grid, Dark surfaces |

## Source CSS custom properties (selected)

```css
--fa-family-brands: "Font Awesome 7 Brands";
--fa-font-brands: normal 400 1em/1 "Font Awesome 7 Brands";
--radius: .5rem;
--background: lab(2.72854% -.0508502 -2.03854);
--foreground: lab(91.8598% -.149757 -1.88929);
--card-foreground: lab(91.8598% -.149757 -1.88929);
--popover-foreground: lab(91.8598% -.149757 -1.88929);
--primary: lab(90.9359% -.121027 -1.51216);
--primary-foreground: lab(7.72937% -.163563 -4.07037);
--secondary: lab(15.1527% -.211179 -4.09482);
--secondary-foreground: lab(91.8598% -.149757 -1.88929);
--muted-foreground: lab(66.0992% -.200242 -2.63952);
--accent: lab(17.5893% -.221208 -4.09946);
--accent-foreground: lab(91.8598% -.149757 -1.88929);
--success-foreground: lab(98.26% 0 0);
--border: lab(10.6274% -.187591 -4.08428);
--reading-text: lab(88.3839% -.120908 -1.51209);
--scroll-shadow: #ffffff1f;
--elevation-xs: 0 1px 2px #0000004d;
--elevation-sm: 0 1px 2px #00000059,0 2px 8px -2px #00000059;
--elevation-md: 0 2px 4px #00000059,0 8px 20px -4px #00000073;
--elevation-lg: 0 4px 8px #0006,0 16px 40px -8px #0000008c;
--selection-foreground: lab(98.252% -.0618994 -.756907);
--pro-foreground: lab(11.7746% 6.15902 14.3125);
--pro-button-foreground: lab(15.1801% 9.93429 22.912);
--ai-border: lab(46.2367% 20.0915 -40.5251/.45);
--ai-accent: lab(75.1579% 23.0165 -42.7367);
--brand-linkedin: #4aa3f0;
--changelog-feature-foreground: lab(76.4835% -7.65583 -37.6854);
--changelog-improvement-foreground: lab(75.5001% 17.4462 -37.1487);
--changelog-fix-foreground: lab(78.3461% -35.894 23.3022);
--changelog-breaking-foreground: lab(75.5992% 37.9297 18.357);
--changelog-security-foreground: lab(77.9385% -33.6653 -6.76284);
--sidebar-foreground: lab(91.8598% -.149757 -1.88929);
--sidebar-primary: lab(90.9359% -.121027 -1.51216);
--sidebar-primary-foreground: lab(7.72937% -.163563 -4.07037);
--sidebar-accent: lab(15.1527% -.211179 -4.09482);
--sidebar-accent-foreground: lab(91.8598% -.149757 -1.88929);
--sidebar-border: lab(10.6274% -.187591 -4.08428);
```

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