Brand & Style

Modern-Editorial with Technical Accents. A grid-based editorial layout with deep blue and vibrant blue palette — authoritative, precise, developer-centric. Targets software architects and technical leads.

Two modes, one brand:

  • Dark mode — “Night Slate.” Immersive digital journal for long, low-strain reading.
  • Light mode — “Clean Lab.” High-contrast technical manual with information density.

Colors

Material 3–style token system: primary / secondary / tertiary with on-* and *-container pairs, plus a shared neutral/surface ramp. Tone assignment flips between modes:

  • Dark mode: base roles get light, high-chroma tints for legibility on dark surfaces; *-container holds the deeper, more saturated version.
  • Light mode: base roles get deep, saturated tones for legibility on pale backgrounds; *-container holds the lighter, softer tint.

Role meaning stays constant:

  • Primary (Deep Blue): primary actions, navigation, core branding, headings. Stability and reliability.
  • Secondary (Vibrant Blue): highlights, callouts, links, focus states. Technical contrast to primary.
  • Tertiary (Forest Green): success states, code diffs, technical readouts.
  • Neutral/Background: dark uses deep charcoal slate (#101319) with lighter surface containers for depth; light uses cool off-white (#f7f9fb) with darker surface containers plus a border token (#e9e8e5 light / #434750 dark) for blueprint grid lines.
  • Text: on-surface is high-contrast body copy (near-white on dark, near-black on light); on-surface-variant is muted blue-grey for metadata.

Typography

Three-font scale, shared across both modes — theming touches color only, never type.

  • Fraunces (Headlines): expressive, chiseled serif. Editorial feel that separates the brand from generic tech blogs.
  • Inter (Body): legible sans-serif at 17px/1.6. Comfortable for long-form technical articles.
  • JetBrains Mono (Technical/UI): code, tags, timestamps, small labels. Developer-world anchor with precise rhythm.

Layout & Spacing

Fixed-Fluid Hybrid on an 8px baseline grid.

  • Article Pages: centered column (article-max: 720px) for line-length readability.
  • Dashboards/Lists: 12-column grid, 24px gutters (container-max: 1100px).
  • Rhythm: strict 8px vertical rhythm. Light mode uses 1px border dividers between sections for blueprint structure.
  • Mobile: margins shrink to 16px (margin-mobile), grids collapse to single stack.

Elevation & Depth

No drop shadows. Depth comes from tonal stacking and outlines.

  • Dark mode — Tonal Stacking: surface containers step lighter as they rise. Interactive elements use color shifts or 1px borders instead of shadows. 8px backdrop-blur on overlays and nav bars.
  • Light mode — Outlines + Tonal Layering: surface containers step darker/greyer. 1px border tokens define separation. Raised elements use offset borders or secondary-blue tint shifts.
  • Interactivity: focus and active states use high-contrast color shifts (e.g. primary to secondary blue), not z-axis movement.

Shapes

Technical and Precise — soft, not bubbly.

  • Standard elements: 4px radius (rounded.DEFAULT).
  • Large containers (cards, modals, code blocks): 8px (rounded.lg).
  • Interactive triggers (buttons, inputs): 4px for compact, technical look.

Components

  • Buttons: solid Deep Blue primary with white text; ghost-style secondary with 1px secondary-blue border. Labels use label-caps (monospaced).
  • Code Blocks: always dark-surfaced regardless of page theme. Headers show language in label-caps.
  • Chips/Tags/Badges: label-caps, all-caps, monospaced inside a subtle *-container tint.
  • Cards: dark mode uses Surface 2 fill with primary-blue 1px border on hover; light mode uses 1px border outline with darker header strip.
  • Inputs: darker-than-surface fill in dark mode with primary-color bottom border expanding on focus; base-surface fill in light mode with border transitioning to secondary blue.
  • Lists: horizontal separators; hover uses subtle background-tint shift.
  • Technical Readouts: bordered box with label-caps label top-left, code-inline data points inside.
  • Reading Progress Bar: thin 2px secondary-blue line at viewport top, fills on scroll.