Ember Orange
#ff6c02Primary CTAs, section tags, active nav, the glowing product frame, hand-drawn annotations, and the single decorative rule on the left margin — the one warm voice in an otherwise cold palette
BaseHub
basehub.comWebsite preview
The design language
BaseHub speaks a near-monochrome dialect: a near-black canvas, a grayscale text scale, and one molten orange accent that does the work of a full color system. The product is the hero — large borderless screenshots of the editor float in the dark rather than floating illustrations, and a thin vertical orange rule on the far left anchors every section like a margin note. Typography stays compressed and quiet: Geist at semibold for headlines, regular for body, with tight negative tracking at every size to make words feel machined rather than typeset. Surfaces are flat and hairline-bordered rather than shadowed, and a 12px card radius plus 4px button radius keep the geometry sharp and developer-tool familiar. The only warm note is the orange — used for CTAs, section tags, the glowing product frame, and hand-drawn annotations — and a cool blue (#55c2ff) reserved strictly for informational badges.
Color palette
brand
Ember Glow
#ff9b51Gradient stop paired with Ember Orange for the rare gradient surface (e.g. template card accent bars)
neutral
Bone White
#f3f3f3Neutral form states, badge text, and quiet UI feedback where color should stay understated. Do not promote it to the primary CTA color
Ash Gray
#dededeSecondary text and lighter icon strokes on dark surfaces
Fog Gray
#909090Medium-contrast borders, control outlines, and structural separators.
Slate Gray
#646464Muted metadata text, timestamp labels, tertiary icon strokes
Iron Border
#303030Hairline dividers, code block borders, subtle list separators
Charcoal Edge
#252525Card borders, subtle frame edges, input field borders
Graphite
#1b1b1bHigh-contrast neutral action fill for primary buttons on light surfaces.
Obsidian
#121212Card surface — one step above canvas, used for testimonial cards and elevated blocks
Onyx
#0c0c0cQuote/testimonial card surface, link button background, the most common elevated surface
Void
#040404Page canvas — the dominant page background
Black
#000000Deepest surface for footer and image fill where absolute black is needed
semantic
Glacier Blue
#55c2ffBlue state accent for badges, validation surfaces, and short status labels.
Typography
Type scale
Minor Third (1.2) · 24px basedisplay-xl
60px · 500 · 1.1 · -3px trackingThe quick brown fox jumps
display
48px · 500 · 1.14 · -1.92px trackingThe quick brown fox jumps
heading-lg
32px · 500 · 1.2 · -0.96px trackingThe quick brown fox jumps
heading
24px · 500 · 1.23 · -0.72px trackingThe quick brown fox jumps
heading-sm
18px · 400 · 1.4 · -0.54px trackingThe quick brown fox jumps
text-16
16px · 400 · 1.5The quick brown fox jumps
body
14px · 500 · 1.5 · 0px trackingThe quick brown fox jumps
text-13
13px · 400 · 1.5The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Geist
- Weights
- 400, 500, 600
- Sizes
- 11, 12, 13, 14, 16, 18, 24, 32, 48, 60
- Line height
- 1.0, 1.1, 1.14, 1.2, 1.23, 1.4, 1.5
- Letter spacing
- -0.05em at 60px, -0.04em at 48px, -0.03em at 16–32px, normal at 11–14px
- Fallback
- Inter
Primary UI and display typeface. Weight 600 for headlines, 500 for nav and sub-labels, 400 for body. The tight negative tracking (-0.05em at 60px tightening to -0.03em at 16px) gives the type a machined, geometric feel — Geist's tall x-height and open apertures keep small body text readable against #040404 without weight inflation. Display sizes use lineHeight 1.0–1.14 for editorial compression.
Additional typeface
Geist Mono
- Weights
- 400
- Sizes
- 13
- Line height
- 1.5
- Letter spacing
- -0.03em
- Fallback
- JetBrains Mono
Code-adjacent micro-copy: version tags, branch labels, file paths, inline commit IDs. Only used at 13px / 400 with the same -0.03em tracking as body Geist — this consistency is what makes the mono feel native rather than a foreign insert.
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 4px
- Max width
- 1200px
- Section gap
- 80px
- Card padding
- 24px
- Element gap
- 16px
Border radius
cards
12pxpills
9999pxbadges
9999pxinputs
8pxbuttons
4pximageCards
21pxSpacing scale
2px4px6px8px10px11px12px14px16px18px20px24px28px32px33px56px80px112px146pxGuidelines
Do
- Use Ember Orange (#ff6c02) for exactly one element per viewport: the primary CTA, a section tag, or the product frame border — never multiple at once
- Set headings in Geist 600 with letter-spacing -0.04em at 48px and -0.05em at 60px; the tight tracking is what makes the type feel machined
- Use 12px radius for cards and 4px radius for buttons; 9999px is reserved for tags, badges, and pills only
- Define surfaces with 1px #252525 or #303030 hairline borders rather than shadows; the page should read as flat code-editor geometry
- Anchor every section with a Section Tag Pill in Ember Orange before the headline — this is the system's repeating motif
- Let product screenshots fill their containers edge-to-edge; the orange border is the only frame they need
- Keep body text at 14–16px in Fog Gray (#909090) and reserve Bone White (#f3f3f3) for headlines and primary actions
Don’t
- Never introduce a second warm color; orange is the only warm voice and adding red, yellow, or another orange-adjacent hue dilutes the single-accent system
- Don't use drop shadows on cards, buttons, or navigation; the design rejects elevation as a visual signal
- Don't set body text in Bone White (#f3f3f3) — use Fog Gray (#909090) for paragraphs to create the dim-product-canvas atmosphere
- Avoid gradients on large surfaces; the only gradient is the orange→peach pair on template card accent bars
- Don't use a border radius larger than 12px on cards or 4px on buttons; large radii read as friendly consumer apps, which this isn't
- Never center-align body copy; BaseHub is editorial and left-aligned throughout, including descriptions and quotes
- Don't use Glacier Blue (#55c2ff) for anything outside informational badges and status chips
Components
Primary CTA Button
Main conversion action (Get Started, Sign Up, Open in new tab)Ember Orange (#ff6c02) fill, Bone White (#f3f3f3) text, Geist 500 at 14px, 4px radius, 14px 16px padding. No shadow. The only filled button in the system — it should feel like flipping a switch in a dark room.
Secondary Outlined Button
Companion action to a primary CTA (Schedule a Demo, Learn more)Transparent background, Fog Gray (#909090) 1px border, Fog Gray text, Geist 500 at 14px, 4px radius, 14px 16px padding. Visually quieter than the primary so the eye lands on the orange first.
Nav Login Button
Low-emphasis action in the top navigationGraphite (#1b1b1b) fill, Bone White text, Geist 500 at 14px, 4px radius, 6px 12px padding. Sits next to the primary orange Sign Up button and stays subordinate.
Section Tag Pill
Small label that opens a feature section (Editor, Branching, Playground)Transparent fill, Ember Orange 1px border, Ember Orange text, Geist 500 at 12px, 9999px radius, 6px 12px padding. Reads as a category marker rather than a button.
New Badge
Annotation attached to a nav link indicating recent contentTransparent fill, Fog Gray 1px border, Fog Gray text, Geist 500 at 11px, 4px radius, 2px 6px padding. Lives inline with the link it modifies.
Info Badge
Status or environment indicator (playground warnings, branch labels)Transparent fill, Glacier Blue (#55c2ff) 1px border, Glacier Blue text, Geist 500 at 12px, 9999px radius, 4px 10px padding. The only place blue appears — reserved for informational context.
Testimonial Card
Quote block from a customer, with author attributionOnyx (#0c0c0c) fill, no border, 12px radius, 24px padding. Quote mark icon in Bone White at the top, quote text in Bone White at 14px, author name in Fog Gray with avatar to the right. Flat surface — no shadow.
Template Card
Selectable template preview in the template galleryObsidian (#121212) fill, Charcoal Edge (#252525) 1px border, 12px radius, 0px internal padding (image fills the card). A 2px accent bar at the top in a brand color (purple, orange, or yellow from the template itself). Title in Bone White 16px semibold below the image, description in Fog Gray 14px regular.
Product Screenshot Frame
The hero element below the headline — a live preview of the editorVoid (#040404) fill, Ember Orange 2px border, 16px outer radius. The screenshot content is a real product capture, not a mockup. The orange border glow is what makes it feel like a hot ember on the dark canvas.
Feature Block Heading
Large section title for each feature explainerBone White text, Geist 600 at 48px, lineHeight 1.14, letter-spacing -0.04em. Followed by a description in Fog Gray 14–16px regular. Always preceded by a Section Tag Pill.
Logo Strip
Social proof row of customer logosLogos rendered in Fog Gray (#909090) at consistent height (~20px), evenly spaced with 32px gaps, left-aligned within the page max width. 'Trusted by' label in Fog Gray 12px sits above.
Hand-drawn Annotation
Playful callout pointing to a feature in the product screenshotEmber Orange (#ff6c02), thin stroke, casual handwritten appearance, always paired with an arrow pointing to the relevant UI element. Used sparingly — one per hero section maximum — to inject personality without cluttering the editorial layout.
Decorative Left Margin Rule
Vertical guide line anchoring the page composition1px Ember Orange stroke, full viewport height, positioned at ~5% from the left edge. A small Ember Orange dot (4px circle) marks section starts along the rule. This is the only persistent visual element that repeats across all sections.
Floating Chat Widget
Persistent support entry point in the bottom-right cornerEmber Orange (#ff6c02) fill circle, 48px diameter, Bone White chat icon centered. Fixed position, bottom 24px, right 24px. Subtle drop shadow for separation from the canvas.
Surfaces & elevation
Level 0
Void
#040404Page canvas — the dominant background every section floats on
Level 1
Black
#000000Deepest layer, used sparingly for footer and image fills
Level 2
Onyx
#0c0c0cTestimonial and quote card surface, one step above canvas
Level 3
Obsidian
#121212Elevated product blocks and secondary card surface
Level 4
Graphite
#1b1b1bButton fills and highest elevation surface
BaseHub is deliberately anti-shadow: surfaces are defined by hairline #252525–#303030 borders and grayscale tone steps (#040404 → #0c0c0c → #121212 → #1b1b1b) rather than elevation. The only shadow in the system is the floating chat widget, which needs physical separation from the canvas. Every other component sits flat — the orange border on the product screenshot does the work a shadow would normally do. This is a developer-tool choice: it reads as a code editor, not a marketing site.
Floating Chat Widget
0 4px 12px rgba(0, 0, 0, 0.4)
Layout & imagery
Layout
Max-width 1200px centered container, full-viewport dark canvas behind it. Hero is left-aligned text stack (version tag pill → 60px headline → 14px subhead → button row) occupying roughly the left half, with the product screenshot occupying the right half on desktop. The decorative left margin rule at ~5% from edge is the only element that breaks out of the container. Feature sections below are single-column: section tag pill → 48px headline → 14px description → supporting visual, all left-aligned with 80px vertical gaps. The template gallery is a 3-column grid with equal-width cards. Section rhythm is consistent — no alternating bands, no dark/light switches — the entire page is one continuous dark surface.
Imagery
Product screenshots are the entire visual language. The hero is a borderless editor capture framed in an orange 2px stroke, not a stock photo or illustration. Secondary sections use customer logos (grayscale, single row) and template preview cards that are themselves product screenshots. The only decorative imagery is hand-drawn orange annotations ('PLAY WITH IT' with a curved arrow) layered over product captures — these are the brand's personality injection. No lifestyle photography, no 3D renders, no abstract gradients. Visual space is dominated by text and product UI, not by imagery.
Design notes
Agent Guide
**Quick Color Reference** - text: #f3f3f3 (primary), #909090 (body), #646464 (muted) - background: #040404 (canvas), #0c0c0c (card), #121212 (elevated) - border: #252525 (cards), #303030 (dividers), #1b1b1b (button fill) - accent: #ff6c02 (Ember Orange — single warm voice) - primary action: #ff6c02 (filled action) **3 Example Component Prompts** 1. Create a Primary Action Button: #ff6c02 background, #303030 text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA. 2. *Feature block*: #040404 canvas. Section tag pill in #ff6c02 (same as above). Headline — Geist 600 at 48px, #f3f3f3, letter-spacing -1.92px, line-height 1.14. Description — Geist 400 at 16px, #909090, max-width 640px. Testimonial card below — #0c0c0c fill, no border, 12px radius, 24px padding, quote text in #f3f3f3 14px, author in #909090 12px. 3. *Template gallery*: 3-column grid, 24px gap. Each card — #121212 fill, #252525 1px border, 12px radius, 0px padding. Top accent bar — 2px tall, template-specific color (purple, orange, or yellow). Template screenshot fills the card body. Title below image — Geist 600 at 16px, #f3f3f3. Description — Geist 400 at 14px, #909090.
Similar brands
Linear
Same dark-mode editor-tool atmosphere with a single vivid accent, tight Geist-style tracking, hairline borders over shadows, and product screenshots as the hero
Vercel
Near-black canvas, grayscale text scale, one warm accent color doing all the action work, and the same flat border-based surface elevation system
Resend
Developer-tool aesthetic with monochrome palette, compact 4px/12px radii, tight letter-spacing on Geist-class type, and ornamental left margin accents
Notion
The editor-screenshot-as-hero approach, the 12px card radius, and the product-forward composition with minimal decoration
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
