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

# BaseHub · Design System

> A near-black canvas lit by vivid orange and product UI.

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

BaseHub presents its AI-native CMS through a dark, developer-oriented homepage with crisp typography and vivid orange calls to action. Large product-interface previews, restrained section labels, and thin borders make the software itself the main visual feature.

## North star

Keep the page nearly black and let clear product UI, precise type, and sparing orange accents carry the hierarchy.

## Overview

The page uses a nearly black canvas (#040404) throughout, with subtly differentiated charcoal surfaces to frame cards and product previews without breaking the dark continuity. Vivid orange (#ff6c02) is reserved for primary actions, selected interface details, and occasional visual cues; a warmer orange gradient appears in decorative or media treatments. Headings use Geist with compact tracking and medium weight, while muted gray supporting text keeps the hierarchy calm and readable. Geist Mono is limited to captions and code, reinforcing the developer-tool context. The layout begins with a spacious, left-aligned hero and an oversized product screenshot, then continues through editorial feature sections, interface demonstrations, pricing, and templates. Content sits within a centered, constrained column, with generous gaps between sections and tighter spacing inside cards. Thin charcoal borders and restrained shadows define layers; rounded pill buttons provide the clearest interactive contrast.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Carbon Canvas | `#040404` | `--color-carbon-canvas` | brand | Dominant page canvas behind the hero, feature content, and product showcases. |
| Quiet Gray | `#909090` | `--color-quiet-gray` | neutral | Muted navigation, secondary links, and supporting copy. |
| Signal Orange | `#ff6c02` | `--color-signal-orange` | accent | Primary CTA fill, selected product UI details, and prominent visual cues. |
| Soft White | `#f3f3f3` | `--color-soft-white` | neutral | Main headings, body copy, and high-priority text on dark backgrounds. |
| Graphite Line | `#252525` | `--color-graphite-line` | surface | Fine borders around cards, controls, and product-preview elements. |
| Raised Charcoal | `#0c0c0c` | `--color-raised-charcoal` | surface | Subtle card and navigation surfaces against the near-black canvas. |
| Smoked Gradient | `#3d3d3d` | `--color-smoked-gradient` | semantic | Gradient stop measured in decorative treatments; not a defining page color. |
| Footer Black | `#000000` | `--color-footer-black` | surface | Footer background, visually deepening the transition from the main page. |
| Silver Text | `#dedede` | `--color-silver-text` | neutral | Secondary button labels and occasional supporting interface text. |
| Ember Highlight | `#ff9b51` | `--color-ember-highlight` | accent | Warm end of the orange gradient, mainly visible in decorative or media treatments. |
| Faint Ash | `#646464` | `--color-faint-ash` | neutral | Low-emphasis text details; avoid using for key content. |
| Button White | `#fafafa` | `--color-button-white` | neutral | High-contrast labels on orange primary buttons. |
| Deep Panel | `#121212` | `--color-deep-panel` | surface | Occasional dark media and footer details, not a major page band. |

### Semantic aliases

`--color-canvas` → `#040404` (Carbon Canvas) · `--color-surface` → `#0c0c0c` (Raised Charcoal) · `--color-surface-2` → `#000000` (Footer Black) · `--color-text` → `#f3f3f3` (Soft White) · `--color-text-muted` → `#909090` (Quiet Gray) · `--color-text-subtle` → `#dedede` (Silver Text) · `--color-border` → `#252525` (Graphite Line) · `--color-accent` → `#ff6c02` (Signal Orange) · `--color-accent-2` → `#ff9b51` (Ember Highlight) · `--color-on-accent` → `#fafafa` (Button White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#f3f3f3` | `#040404` | 18.48:1 | AAA |
| `#f3f3f3` | `#0c0c0c` | 17.63:1 | AAA |
| `#f3f3f3` | `#000000` | 18.93:1 | AAA |
| `#909090` | `#040404` | 6.42:1 | AA |
| `#909090` | `#0c0c0c` | 6.13:1 | AA |
| `#909090` | `#000000` | 6.58:1 | AA |
| `#dedede` | `#040404` | 15.24:1 | AAA |
| `#dedede` | `#0c0c0c` | 14.54:1 | AAA |
| `#dedede` | `#000000` | 15.61:1 | AAA |
| `#ff6c02` | `#040404` | 7.22:1 | AAA |

### Gradients

- `linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0) 100%)`
- `linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0) 90%, rgba(0, 0, 0, 0) 100%)`
- `linear-gradient(rgb(255, 108, 2), rgb(255, 155, 81))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Geist | `--font-body` | webfont | 400, 500, 600 | Display, headings, body copy, navigation, and buttons. | Inter |
| Geist Mono | `--font-mono` | webfont | 400 | Captions, code samples, and developer-oriented metadata. | IBM Plex Mono |

- **Geist:** Use medium weights for headings and controls, regular for body; compact negative tracking on prominent text, with natural casing.
- **Geist Mono:** Regular monospaced text for small technical labels; keep it secondary to the sans-serif hierarchy.

### Type scale — Augmented Fourth (ratio ≈ 1.392, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 60px | 500 | 1.2 | -0.05em | — | Geist | Oversized hero headline and major promotional statements. |
| h1 | 48px | 500 | 1.2 | -0.05em | — | Geist | Primary page headline and leading section headings. |
| h2 | 32px | 500 | 1.2 | -0.05em | — | Geist | Feature and product section headings. |
| h3 | 24px | 500 | 1.5 | -0.05em | — | Geist | Subsection headings and supporting feature titles. |
| body | 16px | 400 | 1.4 | -0.03em | — | Geist | Explanatory copy, testimonials, and card descriptions. |
| caption | 13px | 400 | 1.5 | -0.03em | — | Geist Mono | Compact monospace labels and technical metadata. |
| button | 13px | 500 | 1.23 | -0.03em | — | Geist | CTA and control labels. |
| nav | 14px | 400 | 1.5 | 0 | — | Geist | Top-level navigation links. |
| link | 13px | 500 | 1.5 | -0.03em | — | Geist | Inline actions and secondary navigation links. |
| code | 13px | 400 | 1.5 | -0.03em | — | Geist Mono | Code examples and developer snippets. |

## Spacing & layout

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

Use a centered content column with a measured maximum width of 1148px, while allowing prominent product media to feel broad and immersive. The hero is left-aligned, with the headline, supporting copy, and CTA above a large interface preview. Follow with stacked editorial feature sections, alternating text and product demonstrations, then pricing and template cards. Section spacing is generous; internal card spacing is tighter and comfortable. Keep the overall density low, with clear separation between blocks.

## Shape & elevation

- Radius: button `9999px` · card `12px` · media `50%` · nav `4px` · link `8px` · xs `2px` · sm `4px` · md `6px` · lg `8px` · xl `12px` · pill `9999px`
- Shadow `hairline` (nav): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(71, 70, 70, 0.25) 0px 1px 0px 0px`
- Shadow `md` (other): `rgba(255, 109, 5, 0.02) 0px 3px 3px 0px, rgba(255, 109, 5, 0.15) 0px 2px 3px 0px, rgba(255, 109, 5, 0.5) 0px 1px 2px 0px, rgba(255, 109, 5, 0.85) 0px 0px 2px 0px, rgba(255, 109, 5, 0.98) 0px 0px 1px 0`
- Shadow `lg` (card): `rgba(0, 0, 0, 0) -27px 35px 12px 0px, rgba(0, 0, 0, 0) -17px 23px 11px 0px, rgba(0, 0, 0, 0.01) -10px 13px 10px 0px, rgba(0, 0, 0, 0.02) -4px 6px 7px 0px, rgba(0, 0, 0, 0.02) -1px 1px 4px 0px`
- Shadow `lg-2` (media): `rgba(0, 0, 0, 0.06) 0px 1px 6px 0px, rgba(0, 0, 0, 0.16) 0px 2px 32px 0px`
- Motion: standard transition `0.3s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The design is mostly flat: dark surfaces sit close to the canvas, with thin charcoal borders defining cards and controls. Use restrained shadows for media or layered interface previews rather than broad ambient elevation. The orange hero frame and CTA provide stronger visual separation than shadows.

## Imagery

Use product UI as the primary visual asset: dark CMS interfaces, editor panels, code samples, and template previews. Frame screenshots within dark, thin-bordered cards; the hero preview receives a vivid orange outline and an informal orange annotation. Template thumbnails can introduce small image-specific color variations, but keep the surrounding page dark. No photography-led art direction is evident.

## Components

### Top navigation

Compact horizontal navigation on a dark surface, with muted links, a bordered Log In pill, and an orange Sign Up pill.

### Primary CTA

Orange pill-shaped button with near-white medium-weight Geist text; used for Get Started and Sign Up.

### Hero product preview

Large dark CMS interface screenshot framed with a thick, rounded orange edge, accompanied by a hand-drawn orange annotation.

### Feature cards

Near-black cards with thin #252525 borders and rounded corners, pairing concise copy with interface or workflow details.

### Code panel

Dark code example with small Geist Mono text, restrained syntax color, and supporting documentation links.

### Template gallery

Three compact preview cards with distinct thumbnails, dark caption surfaces, and brief title and description text.

### Footer CTA band

A vivid orange horizontal prompt above a black footer, followed by subdued navigation links and brand details.

### Measured component styles

- **Primary button** (“Sign Up”): background #ff6c02 · text #fafafa · radius 96px · padding 0px 12px · 500 13px Geist
- **Secondary button** (“Log In”): background #1b1b1b · text #dedede · border 1px solid #252525 · radius 96px · padding 0px 12px · 500 13px Geist
- **Link** (“Marketing Website Compelling site to sho”): background #0c0c0c · text #f3f3f3 · border 1px solid #252525 · radius 8px · padding 0px · 400 16px Geist
- **Card** (“1 Branch out Creating a branch is instan”): background #0c0c0c · text #f3f3f3 · border 1px solid #252525 · radius 12px · padding 16px 16px 0px 16px · 400 16px Geist
- **Navigation item** (“Pricing Templates Documentation Blog Cha”): transparent background · text #f3f3f3 · radius 0px · padding 0px · 400 16px Geist

## Do

- Keep the main canvas near-black and consistent.
- Use orange for primary actions and a few deliberate cues.
- Let product screenshots occupy the largest visual areas.
- Set headlines in Geist with tight, compact tracking.
- Use Geist Mono for code and technical metadata.
- Separate dark cards with thin charcoal borders.
- Maintain generous gaps between major page sections.

## Don't

- Do not introduce bright section backgrounds.
- Do not use orange as a broad page background.
- Do not add decorative imagery that competes with product UI.
- Do not make every card glow or cast a heavy shadow.
- Do not use muted gray for primary headlines or actions.
- Do not crowd the hero with multiple competing CTAs.

## Agent prompt

Build a new page in the BaseHub visual style. Use Carbon Canvas (#040404) as the dominant background, with Raised Charcoal (#0c0c0c) panels and Graphite Line (#252525) borders. Set headings and body in Geist, keeping headline tracking compact; use Geist Mono only for code and technical labels. Reserve Signal Orange (#ff6c02) for primary pill buttons and selected interface details, with Button White (#fafafa) button labels. Organize content in a centered, constrained column with generous gaps between sections and tighter card interiors. Make realistic dark product UI the main imagery, framed with subtle borders rather than heavy shadows. Use a clear left-aligned hero, followed by concise feature sections and large interface previews. Keep secondary text Quiet Gray (#909090), and avoid bright backgrounds or unnecessary decoration.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Left-aligned headline and CTA above a large, dark CMS interface preview. | Top navigation, Single primary CTA, Prominent product preview | Near-black canvas, Orange pill button, Orange-framed interface screenshot, Handwritten annotation |
| 2 | footer | A full-width orange prompt band sits above a compact black footer with brand and link rows. | Free-start invitation, Grouped footer links, Legal navigation | Orange horizontal band, Black footer surface, Small muted links, Brand mark |

## Source CSS custom properties (selected)

```css
--duration-swift: 1.8s;
--ease-swift: cubic-bezier(0.19,1,0.22,1);
--duration-snappy: 0.3s;
--ease-snappy: cubic-bezier(0.175,0.885,0.32,1.1);
--color-raw-bg: 4 4 4;
--color-raw-base: 12 12 12;
--color-raw-base-dark: 18 18 18;
--color-raw-shade: 22 22 22;
--color-raw-shade-hover: 27 27 27;
--color-raw-elevated: 48 48 48;
--color-raw-border: 19 19 19;
--color-raw-border-solid: 37 37 37;
--color-raw-bright: 243 243 243;
--color-raw-button-label: 250,250,250;
--color-raw-dim: 222 222 222;
--color-raw-muted: 144 144 144;
--color-raw-faint: 100 100 100;
--color-raw-accent: 255 108 2;
--color-raw-control-base: 255 108 2;
--color-raw-control-highlight: 255 139 53;
--color-raw-control-muted: 34 17 5;
--color-raw-error: 255 73 73;
--color-raw-success: 44 255 209;
--color-raw-warning: 246 202 71;
--color-bg: rgb(4 4 4);
--color-base: rgb(12 12 12);
--color-base-dark: rgb(18 18 18);
--color-shade: rgb(22 22 22);
--color-shade-hover: rgb(27 27 27);
--color-elevated: rgb(48 48 48);
--color-border: rgb(19 19 19);
--color-border-solid: rgb(37 37 37);
--color-bright: rgb(243 243 243);
--color-dim: rgb(222 222 222);
--color-muted: rgb(144 144 144);
--color-faint: rgb(100 100 100);
--color-accent: rgb(255 108 2);
--color-control-base: rgb(255 108 2);
--color-control-highlight: rgb(255 139 53);
--color-control-muted: rgb(34 17 5);
```

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