← All styles
Live preview Open site ↗
A page rendered in Ember Darkroom

Ember Darkroom

one object lit in a warm dark room

Warm near-black canvas, cream uppercase grotesk at a single weight, and one ember orange rationed to a single button and a few credit lines. Depth comes from a second surface, never a shadow, and every divider is a dashed hairline.

darkwarmeditorialproductminimaluppercaseluxury v1.0.0 CC-BY-4.0

Install

npx styles-md add ember-darkroom

Palette

bg #140d06
surface #2e2015
fg #f7e7cf
muted #b39d86
accent #e2601a
accent-fg #140d06
border #443729
success #93a862
danger #e0655a

Type

Body & headings Archivo

Aa Bb Cc 0123 The quick brown fox

"Archivo", "Inter", "Helvetica Neue", Arial, sans-serif
Code DM Mono

const total = 1 + lI0O;

"DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace

18px base · 1.2 ratio · body 400 / heading 500 · heading tracking 0em. Fonts are not bundled. Install the first family in each stack, or the specimens below fall back to the next one your device has.

4xl · 44.79px

The quick brown fox jumps

3xl · 37.32px

The quick brown fox jumps

2xl · 31.1px

The quick brown fox jumps

xl · 25.92px

The quick brown fox jumps

lg · 21.6px

The quick brown fox jumps

base · 18px

The quick brown fox jumps

sm · 15px

The quick brown fox jumps

xs · 12.5px

The quick brown fox jumps

Licensing

No font files are redistributed here. Every family this style asks for by name is free for commercial use, and CI rejects a style that names one which is not.

Fallbacks: Helvetica Neue, Arial, sans-serif, ui-monospace, SFMono-Regular, Menlo, monospace. These are CSS generics and fonts the reader's OS already ships, referenced by name only, so nothing is licensed or downloaded.

The spec itself, and everything generated from it, is CC-BY-4.0. Attribution is the comment at the top of each generated file; keep it and you have complied.

Shape, space & motion

stroke
1px
radius
12px · 22px · 36px
spacing unit
6px
gutter
18px
section gap
160px
max width
1440px
motion
250ms cubic-bezier(0.33, 0, 0.2, 1)
Download

Ember Darkroom

A product photographed in a warm dark room, with the copy set around it in cream capitals. The page is a gallery wall: one object per section, generous emptiness, and no chrome arguing with the form. What makes it feel expensive is what is missing, so the rules below are mostly removals.

Principles

  • One family does every job. Weight 500 uppercase for headings, nav and labels; weight 400 mixed case only for body copy.
  • The canvas is warm near-black, never pure black, and text is warm cream, never pure white.
  • Ember is rationed: one filled control per page, and otherwise text for links, credits and footnotes.
  • Depth is two surfaces, bg then surface. No shadow exists in this style.
  • One object per section, centred, with copy flanking it left and right.
  • Dividers are 1px dashed in border. A solid rule reads as a UI frame and breaks the gallery.

Typography

The scale is a minor third from an 18px base, which puts body copy well above the usual 16px and lets a page carry very few sizes. Headings run past the emitted ramp: the display line is set around 120px on a wide viewport and 51px on a phone, at line height 0.9, and continuing the same 1.2 ratio is how you get there. Nothing is bold. Weight 500 against weight 400 is the entire emphasis system, and the difference reads because the two are never mixed inside a line.

Colour

bg is a brown-black, so a screenshot next to a pure #000 page looks lit rather than switched off. surface is the one chromatic step up, for cards and secondary buttons, and the step is small on purpose. muted is a warm grey that clears AA on the canvas at 7.42:1; the darker structural browns in this family sit far below that, which is why they are borders and never text. Ember is the only saturated hue and it appears a handful of times per page.

Components

  • Display line: font-display, weight 500, uppercase, line height 0.9, tracking 0.
  • Body copy: weight 400, mixed case, text-lg to text-xl, left aligned, measure under 46 characters.
  • Button (primary): accent fill, accentFg label, radius-lg pill, 14px/28px padding. One per page.
  • Button (secondary): surface fill or 1px border over the canvas, fg label, radius-md, same padding.
  • Card: surface, radius-sm, 24px padding, 1px border, no shadow.
  • Divider: 1px dashed border, full bleed, with section space above and below.
  • Nav: no bar, no fill. Wordmark left, uppercase 12px links right, active link underlined dashed.
  • Label / eyebrow: mono, uppercase, 12px, muted, sitting directly above the display line.
  • Credit line: mono, 12px, accent, bottom corner of a section.
  • Focus ring: 2px accent outline at 3px offset.

Do / Don’t

  • Do set every heading, nav item and label in uppercase weight 500. Sentence case is for body copy only.
  • Do give each product reveal its own full viewport height. Two reveals in one screen kills both.
  • Do use dashed hairlines for every divider, including the footer.
  • Do keep ember to one fill and a handful of small text marks per page.
  • Don’t use #000 for a background or #fff for text. The warm tint is the whole style.
  • Don’t fill a card, a badge or a section band with ember. One button is the whole budget.
  • Don’t add a shadow, a glow or a blur to lift a card. Change the surface instead.
  • Don’t tighten tracking on display type, and don’t letterspace the body.
  • Don’t centre body copy, even when it flanks a centred image.
  • Don’t go below radius-sm on a container, and don’t put two filled buttons in one section.

When to use

Single-product launches, hardware, coffee and spirits, studio portfolios: anywhere one object has to carry the page. A poor fit for dense dashboards and long forms, where full-viewport sections and all-caps labels cost more than they return.