Warm Charcoal Editorial — Dark-First Charcoal & Amber Design System & Template

Overview

This design system presents a dark, warm, text-first documentation experience. It is built for long-form reading and code-heavy technical content, using a deep charcoal background, soft amber accents, and a light-weight serif-informed sans-serif for body copy. The mood is editorial and slightly retro: the page feels like a well-worn technical manual, with a subtle inset shadow that gives the entire viewport a tactile, printed quality. Hierarchy is driven almost entirely by typography and generous spacing, not by heavy surface contrast.

Colors

The palette is built on a warm, dark charcoal base with a single high-energy accent.

• background: The primary page tone, a warm mid-dark gray used behind the entire document.
• background-raised / background-inset / background-header / background-footer: Layered dark tones used to separate chrome (header, footer) and inset surfaces (search, inline code) from the main canvas.
• background-quickstart / background-code: A deep maroon and a near-black used specifically for the quick-start band and its terminal-style code block.
• text / text-muted / text-faint: A three-tier text hierarchy from bright off-white body copy, to mid-gray secondary labels, to muted placeholder text.
• accent: A warm amber used for active navigation, inline links, and the signature accent on the quick-start block.
• accent-hover: A slightly more saturated amber used for link hover states.
• accent-contrast: A near-black used as text on top of the amber accent for strong contrast.
• info / warning / note: Restrained semantic colors used for inline callouts and asides.
• border: A mid-gray hairline used for subtle separators and input outlines.
• shadow-inset / shadow-code: Low-opacity black used for the page inset shadow and the terminal block's drop shadow.

Typography

Typography is the primary carrier of hierarchy in this system. Body copy is set in Lato, a humanist sans-serif, at a relatively large 21px with a light 300 weight, which gives the page an airy, editorial feel. Navigation and small labels use a heavy 900 weight at a small size to create a stark contrast against the light body text. The intro line is set at a dramatic 3.2em on larger screens, acting as the page's hero statement.

• body: The default reading size at 21px and 300 weight, used for all prose and general content.
• h1 / h2 / h3: Bold, heavy headings at 700 weight, used to create clear section breaks against the light body copy.
• nav: A compact, heavy 0.75em uppercase style used for the main navigation links, creating a strong, tab-like feel.
• intro: A large, light 3.2em display style used for the homepage hero statement.
• code: A compact monospace style at 0.75rem used for code blocks and terminal commands.
• small: A 15px style used for footer copy and metadata.

Layout

The layout is a classic documentation shell built on a simple grid. A centered container (max-width: 978px) holds the main content, with a persistent header and a full-width footer. The homepage uses a three-column feature grid for its "Simple / Static / Blog-aware" section, which stacks to a single column on mobile. The quick-start section uses a two-column golden-ratio layout (small label column, large code column) that also stacks on mobile. Spacing is generous, with 60px vertical rhythm around the quick-start band and 40px above the footer.

Elevation & Depth

Depth is communicated through subtle layering and a signature inset shadow. The entire body has an inset 0 3px 30px rgba(0,0,0,.3) shadow, which gives the page a recessed, tactile quality as if it were a physical panel. Cards and the quick-start band use soft dark shadows (0 5px 30px rgba(0,0,0,.3)) to lift them off the page. The header and footer are flat, separated only by background color. No blur or backdrop effects are used; the depth is purely shadow-based.

Shapes

The shape language is soft but restrained. The primary corner radius is 5px, used for navigation pills, buttons, and code block headers. Larger panels use a 10px radius. Circular shapes are reserved for the search submit and reset icons. Borders are thin, 1px hairlines in a mid-gray. The overall feel is slightly rounded and friendly, without being playful.

Components

Header

A flat, dark header bar that contains the logo, a horizontal navigation list, a search box, and version/GitHub links. The active navigation item is highlighted with a solid amber background and dark text, creating a strong, tab-like affordance. Search is a compact input with an amber search icon.

Navigation Links

Navigation and meta links use a heavy, uppercase 0.75em style. Inactive links are plain text; on hover they gain an inset shadow and a darker background, giving them a pressed, inset appearance. The active link uses the amber accent as a solid background with dark text and a subtle inner highlight.

Quick-start Block

A full-width band with a deep maroon background and an inset shadow. It contains a short heading on the left and a terminal-style code block on the right. The code block has a light "title bar" at the top and a near-black shell below, mimicking a real terminal window. Each line of the terminal shows a colored path, prompt, command, and output, using distinct colors for each element.

Feature Cards

The homepage features three equal-width cards, each with a bold heading, a short paragraph, and a text link. The cards are flat, separated only by their column position and the link's arrow affordance. On mobile, they stack vertically.

Free Hosting Pane

A raised card with a 10px radius and a soft shadow. It contains an illustration, a heading, body copy, and a link. On larger screens, a decorative corner graphic appears in the bottom-right of the pane. The card uses a slightly lighter background than the page to stand out.

Footer

A dark, flat footer with a two-thirds / one-third split. The left side contains copyright and license text; the right side contains a GitHub logo and a sponsorship note. Links in the footer are bright white and gain a hover effect on the logo's opacity. A hairline border separates the footer from the content above.

Callouts

Inline callouts (note, info, warning) use a small colored triangle in the top-left corner and a large symbolic icon (★, ⓘ, ‼) to draw attention. They sit on the page background with no background fill of their own, relying on the corner triangle and icon for emphasis.

Do's and Don'ts

Do

• Use the warm charcoal background as the base layer and reserve lighter tones for raised surfaces.
• Keep body copy light (300 weight) and relatively large (21px) for an editorial feel.
• Use the amber accent sparingly for active states, links, and the quick-start band.
• Apply the page-wide inset shadow to give the viewport a tactile, recessed quality.
• Use heavy, uppercase, small navigation text to create contrast against light body copy.
• Separate content with generous vertical spacing rather than heavy borders or fills.

Don't

• Don't introduce saturated colors outside the amber accent and semantic callout palette.
• Don't use heavy drop shadows or blur effects; depth should come from subtle shadows and inset light.
• Don't use large corner radii on standard surfaces; keep the shape language restrained.
• Don't use pure black or pure white for text; always use the defined warm off-white and dark charcoal tones.
• Don't use the amber accent for large background areas; it is meant for focal points and active states.
• Don't mix multiple font families; stick to Lato and the monospace variant for code.