Soft Slate Blue Editorial — Light-First Design System & Template

Overview

A clean editorial system built around deep blue, soft slate backgrounds, white surfaces, and restrained typography. It feels calm, technical, and readable, with pill navigation, rounded cards, subtle shadows, and airy grid layouts. Density is moderate; hierarchy comes from scale, weight, and blue accents rather than heavy borders or loud color.

Colors

Deep blue anchors the system. It is used for primary actions, active navigation, section titles, key links, footer base, and hero overlay, creating a consistent high-priority accent across the interface. Soft blue and translucent blue appear in interactive states, especially hover and active pills.

• primary: Deep blue #2650c5 for primary buttons, active navigation, section titles, footer, and key links.
• primarySoft: Soft blue #8da6eb for lighter interactive accents and dark-mode hover states.
• primaryWash: Translucent blue #8da6eb4d for active mobile navigation pills.
• secondary: Lavender #8576FF for primary button hover and gradient interplay.
• ink: Deep navy #0E215D for strong quote/title text and the footer gradient start.
• body: Slate #474854 for most body copy and secondary headings.
• surface: Off-white #f6f8fd for cards, sections, newsletter backgrounds, and hover fills.
• surfaceMuted: Soft gray-blue #e1e5ef for highlight surfaces and tag totals.
• border / borderLight: Low-contrast rgba borders separate articles, nav, cards, and footer details without hard lines.
• muted: rgb(164,172,195) for secondary text in dark contexts.
• footerStart / footerEnd: #0e215d to #263977 create the footer's vertical blue gradient.
• dark1 / dark2: Deep navy hsla values support dark-mode surfaces.
• accentPink: #ff1493 reserved for small uppercase chips.
• articleTime: #323d5e colors article dates.
• tagBackground: #f6f8fd is the default tag surface.

Typography

Hanken Grotesk is the primary family, with 400 and 700 weights loaded. Base line-height is 1.25; h1/h2/h3 use 400 weight, with h2 at 1.75rem and h3 at 1.5rem. Hero titles use fluid clamp sizing and can sit on translucent primary blocks. Section titles use 700 weight and primary color. Article titles use fluid container-based sizing at 500 weight. Article dates are 14px. Supporting text uses fluid clamp around 1rem to 1.5rem. Debug/layout section titles are large 700-weight #3964d7. Buttons and labels use 1rem.

• body: Base reading text at 1rem with a compact 1.25 line-height.
• h1 / h2 / h3: Editorial headings with restrained 400 weight and tight line-heights.
• heroTitle: Fluid hero heading from 1.5rem to 4rem, often reversed on imagery with translucent primary text blocks.
• heroMain: Fluid supporting hero statement from 1.5rem to 2.375rem.
• heroDesc: 1.15rem slate description copy for hero context.
• sectionTitle: 700-weight primary title used in section headers.
• articleTitle: Fluid 14px–20px title at 500 weight.
• articleTime: 14px metadata with #323d5e.
• debugTitle: Large 700-weight #3964d7 display title for feature sections.
• supporting: Fluid supporting text from 1rem to 1.5rem.
• button / label: 1rem interface text.
• code: 1rem monospace for code blocks.

Layout

The wrapper is max-width 1120px, centered, with 1rem inline padding. Article lists use a 1rem gap and switch to auto-fill minmax(300px,1fr) at 550px. The header uses grid areas: mobile stacks logo/theme/nav; desktop places logo, centered nav, and theme toggle with a dynamic clamp column. Desktop navigation sits in a max-content pill wrapper with .75rem inline padding.

Content sections use flex headers with 1rem gaps and 1.5rem bottom margin; paragraph blocks cap at 65ch. Hero is 4/3 on mobile and 3/1 from 900px, with content capped at 90ch. Work grids use one column, then two columns from 520px/700px. Rows-wrapper maxes at 1700px. Contribution grids use two columns from 700px. Newsletter uses flex wrappers with 400–500px flex bases. Spacing follows a 4, 8, 16, 24, 32, 48px scale.

Elevation & Depth

Depth is subtle. Navigation uses layered low-opacity shadows, the banner uses an inset bottom shadow, newsletter cards use a soft drop shadow plus a primary ring, and page images use a 2px low-opacity ring. Contribution cards use a 3px surface-colored hover ring. Borders and surface changes carry most hierarchy, not blur or backdrop effects.

Shapes

Shape language is rounded and friendly: small chips at 4px, buttons/inputs/theme toggle at 8px, contribution images at 12px, contribution cards at 15px, newsletter cards at 20px top corners, work thumbnails at a fluid clamp radius, nav and active nav pills at 50px, and avatars at 50%. Borders are typically 1px low-opacity; newsletter cards use a 10px translucent border.

Components

Navigation

Desktop navigation sits in a white pill container with a 1px light border, low shadow, 50px radius, and .75rem inline padding. Items are 15px, #222, with 14px 10px desktop padding. Active items are 600 weight and primary-colored with an underline on desktop; mobile active items use a translucent blue pill. The course item adds a small primary dot.

Buttons

Buttons are inline-flex, centered, min-width 120px, 8px radius, .75rem 1rem padding, 1px border, 1rem text, and .3s linear transitions. Secondary is white with a light gray border; hover fills with surface. Primary fills with primary and white text; hover shifts to lavender #8576FF. The large variant increases padding to 1rem 1.25rem.

Hero

Hero uses a cover background image masked into a blue overlay, 4/3 mobile and 3/1 desktop. The h1 is white, fluid-sized, max 30ch, and uses translucent primary blocks behind text. A small caption sits bottom-right with a white gradient background. Supporting hero copy is slate and fluid-sized.

Article List Item

Articles are separated by a 1px top border and 12px vertical padding, stacking on mobile and becoming a row in a container at 500px. Title uses clamp(14px,14px + 3cqw,20px), 500 weight, primary color, and pretty wrapping. Date is 14px #323d5e, right-aligned at 100px width in row layout.

Work Card

Work cards stack with .5rem gaps. The thumbnail is 250px high, increasing to 350px at 700px, with a fluid rounded radius, 1px low-opacity border, and colored background per work category. Images scale on hover; web-style thumbs center a 460px max-width image.

Contribution Card

Contribution cards use #f6f8fd background, 15px radius, 1rem padding, 1rem gap, and a 3px surface-colored hover ring. Inner images have a white border with fluid thickness, 12px radius, and low shadow. Headings are 600 weight with fluid sizing; text uses #4a4a4a and slate body colors.

Newsletter Form

Newsletter section is #f6f8fd with 3rem block padding. Inputs are white, 16px, 1px light gray border, 8px radius, and .5rem padding. Submit is primary with white text, min-width 130px, 8px radius, and a #244cba hover. The decorative card uses a 4/3 ratio, white background, ruled-paper gradient, 10px translucent border, 20px top radius, and a subtle shadow with primary ring.

Footer

Footer uses a vertical #0e215d-to-#263977 gradient over primary, 2rem 1rem padding, white text, and centered stacked content. Paragraphs are #fffc; emphasized text is white 600. Social icons are 1.5rem white SVGs with .2s opacity hover. Inner nav has 1rem gaps, active item 600 weight, inactive .85 opacity. The contact block has a 1px rgba(255,255,255,.1) top border and 1.75rem top padding.

Tag

Tags use #f6f8fd background, #222 text, full pill radius, and .25rem .5rem padding. The tag-total variant uses the darker soft surface.

Theme Toggle

Theme toggle is a borderless button with #efefef background, 8px radius, 4px 8px padding, 1.5rem icons, and .3s background/fill transitions.

Banner

Banner is sticky, full-width, centered, primary background, white text, .75rem 1rem padding, inset bottom shadow, and 1px transparent bottom border.

Chip

Chips are small uppercase pink #ff1493 blocks with white text, 4px radius, .1em .45em padding, 700 weight, .6em size, and .05em letter spacing.

Code Block

Code blocks use monospace at 1rem with surface background, slate text, 8px radius, and 1rem padding.

Do's and Don'ts

Do

• Use deep blue for primary actions, active navigation, section titles, and key links.
• Keep surfaces light with #fff and #f6f8fd, separated by low-opacity borders.
• Use Hanken Grotesk with restrained weights and fluid clamp sizing for large text.
• Round interactive elements to 8px or pills to 50px depending on role.
• Preserve the airy grid gaps, 1120px wrapper, and readable 65ch paragraph limits.
• Use subtle shadows and surface changes instead of heavy elevation.
• Keep article and work metadata quiet with slate and muted colors.

Don't

• Don't introduce saturated colors beyond the defined blue, lavender, and small pink chip accent.
• Don't square off nav pills, buttons, or cards.
• Don't use heavy black shadows or strong blur effects.
• Don't set body copy in uppercase or heavy weights.
• Don't remove the responsive grid behavior or fluid typography.
• Don't use high-contrast borders around every surface.
• Don't add extra accent colors for success, warning, or error without source evidence.