Warm Slate Developer Editorial — Warm-Toned Editorial Design System & Template

Overview

This is a warm, editorial developer-community aesthetic. The surface palette leans on soft beige and muted greys rather than cool whites, which gives the interface a calm, printed-page feeling. Against that quiet base, the system introduces moments of saturated color: a deep purple-violet hero panel, a bright orange testimonial band, and a full-spectrum gradient strip. Typography is generous and humanist (Source Sans Pro), with oversized hero headlines and long, comfortable line-heights that make reading feel unhurried.

Colors

The palette balances quiet neutrals with a small set of bold accents, used sparingly and with intent.

• primary: The default body and heading color, a soft charcoal used for nearly all readable text on light surfaces.
• secondary: A darker slate used for dark surfaces and the "thunder" button variant.
• muted: A warm grey used for body copy inside the beige content sections and for secondary descriptions.
• muted-strong: A slightly darker warm grey for headings sitting on light beige backgrounds.
• background / background-alt: Warm off-white beiges that form the default page canvas and the footer strip.
• surface: Near-white card and button fills, used for testimonial quotes and secondary buttons.
• border: A light neutral grey for hairlines and outline buttons.
• link: A calm mid-blue used for inline links within dark hero copy and legal text.
• accent-green / accent-orange / accent-pink / accent-purple: The named accent colors. Green drives the primary call-to-action, orange fills the testimonial section, pink appears in the gradient band and notification logo, and purple anchors the hero.
• on-dark: Pure white, used for text on the hero, gradient panel, and primary buttons.

Typography

Typography is the dominant design element. Headlines are set in a humanist sans (Source Sans Pro) at large sizes with slightly negative letter-spacing, giving them an editorial, magazine-like quality.

• hero: Reserved for the top-of-page statement. Deliberately oversized with a tight ratio between font size and line-height so the statement reads as a single visual block.
• h1: Section headings across the page. Weight stays at 400 so headings feel calm rather than loud; an underline accent (a 60px wide, 3px tall bar at 10% opacity) sits beneath top-level headings.
• h2: Sub-headings inside feature lists and small content blocks.
• body-large: The primary reading size for descriptions and testimonials. Generous line-height is used to keep long-form copy comfortable.
• body: The default document size.
• body-small: Used on narrower viewports where the large body size would feel cramped.
• quote: Used for testimonial pull-quotes, sitting between h2 and hero in scale.
• label: A small, uppercase, widely letter-spaced style used for buttons, nav items, and footer links.

Layout

The layout is a centered, single-column editorial grid.

• Container: A .panel-content-wrapper caps content at 1200px wide, centered with padding-left and padding-right of 40px (reduced to 20px below 550px).
• Section rhythm: Major panels use 80px vertical padding for large sections, 44px for the header, and 40px for tighter bands like the "trusted by" strip and gradient panel.
• Grids: Logo strips and mini-feature lists use flexbox with justify-content: space-between and wrap. The Apps section uses a float/clear two-column arrangement (image left, copy right at 450px) that collapses to a single column below 1200px.
• Testimonials: A flex row of a wide quote column and a 450px content block, collapsing to stacked layout below 1200px.
• Breakpoints: 550px, 600px, 620px, 750px, 800px, 900px, 950px, and 1200px are the meaningful responsive stops, used to hide the nav, collapse columns, and shrink the hero.

Elevation & Depth

Depth is used sparingly and mostly through subtle borders and inset shadows rather than soft drop shadows.

• App store buttons use a hairline inset ring (inset 0 0 0 2px at ~15% opacity) instead of a drop shadow, and switch to a soft inner shadow on press.
• Testimonial cards sit as flat white panels on the orange background, relying on the color contrast rather than shadow for separation.
• The hero and gradient panels use full-bleed background imagery and layered gradients with a dark overlay (rgba(0,0,0,0.2) on buttons, rgba(255,255,255,0.75) for hero copy) to establish foreground/background hierarchy.
• The purple hero overlay and the black bottom layer behind the animated gradient provide the main sense of depth; everything else is intentionally flat.

Shapes

Shape language is soft and consistent.

• sm (4px): Inline code chips.
• md (6px): The default card, button, and image radius used throughout.
• lg (8px): Larger button shapes, expressed as .5em in the button system.
• full (9999px): Reserved for pill-shaped indicators where the source implies fully rounded treatments.
• Borders are always 1px hairlines, and buttons in the outline "subdued" variant use a 1px solid border in the button's own color.

Components

Navigation

A horizontal top bar with a compact logo cluster on the left (an animated mark plus wordmark) and a right-aligned set of uppercase nav links. Nav links use the label typography, are opacity: 0.5 by default and rise to 0.75 on hover. The whole nav hides below 750px, and a small dark "sign-in" chip replaces the full-text CTA below 950px.

Buttons

Two primary button kinds share geometry: solid (button--kind-primary) and outline (button--kind-subdued). Both use .5em radius, label typography, and generous horizontal padding (0.8em 3.5em). Color variants are defined per palette color (green, orange, pink, charcoal, beige, near-white), each with its own hover, subdued-hover, disabled, and disabled-hover states. The primary hero CTA is the green variant; the secondary hero CTA is the near-white subdued variant.

App Buttons

Flat white pills with a hairline inset ring rather than a filled background. They carry a label typography, 16px 25px padding, and a 6px radius. On press they gain a soft inner shadow, giving a subtle tactile response without any drop shadow.

Testimonial Quotes

Large white cards (6px radius, 35px 40px padding) sitting on the orange testimonial band. Each contains a bold attribution line, a muted attribution descriptor, and a pull-quote set in the quote typography. A small decorative quotation mark is rendered as an image before the text. Cards fade between each other with an opacity transition, and the entire block sits inside a wide left column with a 450px content column on the right.

Footer

A warm off-white bar (#f1f0ed) with warm grey text. Content splits between a copyright notice on the left and a horizontal list of uppercase, letter-spaced footer links on the right. The list wraps and centers below 620px.

Feature List Items

Mini feature blocks used inside the hero and similar panels. Each is a flex item with padding-right: 55px containing an h2 and a paragraph. On narrow screens they stack, and on wide screens they sit three-to-a-row.

Do's and Don'ts

Do

• Use the beige and near-white surfaces as the default page canvas; treat color as an event, not a background.
• Keep headline weight at 400 and rely on size, negative letter-spacing, and generous line-height for hierarchy.
• Apply the small, uppercase, letter-spaced label style consistently to buttons, nav items, and footer links.
• Use the green accent for primary actions and reserve orange, pink, and purple for large banner-style sections.
• Use 6px radius as the default and 4px only for tiny inline elements like code chips.
• Express depth with hairline inset rings and 1px borders rather than soft drop shadows.

Don't

• Don't invent bright, fully saturated backgrounds outside the defined hero, testimonial, and gradient panels.
• Don't bold headings; the system deliberately uses regular weight with negative tracking.
• Don't stack multiple accent colors in the same component; each button or panel commits to a single named color.
• Don't use heavy drop shadows; the palette relies on flat surfaces and border contrast for depth.
• Don't shrink the label typography below 12px or reduce its 2px letter-spacing.
• Don't apply large radii to cards or buttons; 6px and 8px are the intended ceilings.