Cortex Engineering Blog

Overview

Cortex Engineering Blog is a technical publication platform for systems engineers and infrastructure practitioners. The design system embodies "Terminal Modernism"—a fusion of command-line aesthetics with contemporary web design—where monospace typography dominates the interface hierarchy while serif body copy provides warmth and readability for long-form content. The visual identity evokes precision, reliability, and the craft of operating systems at scale, with a purple accent (#6a41e0 in light mode, #9d7bff in dark mode) that signals interactivity and brand presence without overwhelming the content.

The brand voice is direct, technical, and unadorned. Cortex engineers write with clarity and specificity—no marketing hyperbole, no breathless enthusiasm. Example sentence: "We built an agent to drive Operational Excellence reviews because manual processes don't scale beyond 50 teams." The UI reinforces this voice through sparse ornamentation, generous whitespace, and a grid-based layout that mirrors the structure of well-organized code.

Colors

The color system operates in two distinct modes—light (#f4f5fb background, #25074d text) and dark (#0d0419 background, #eae5f6 text)—with a shared purple accent that anchors both themes. Primary (#6a41e0 light / #9d7bff dark) is used exclusively for interactive elements: CTA buttons, hover states on links and cards, and focus indicators. Secondary coral (#e63360 light / #fa466c dark) appears on accent text like the command prompt ($) and badge highlights, creating visual rhythm without competing with primary. Tertiary yellow (#c79c00 light / #fcc600 dark) is reserved for status indicators and code-block window controls.

The surface stack uses subtle purple-tinted grays to maintain visual cohesion: surface-container-low (#f4f5fb) for input backgrounds, surface-container (#ffffff) for cards

Typography

The type system prioritizes clarity and hierarchy through a monospace-first approach: JetBrains Mono (400, 500, 700 weights) governs all interface text—headings, labels, navigation, code—while Source Serif 4 (variable weight 200–900) is reserved for body copy and long-form content. Display (72px, 700 weight, -0.04em tracking) anchors the hero section with maximum visual impact; headline-lg (42px, 700, -0.022em) breaks content sections; title-lg (22px, 700, -0.01em) marks subsections. Body-lg (19px, 450 weight, 31px line-height, -0.003em tracking) provides the reading experience for article prose, with generous line-height (1.66) and negative letter-spacing to maintain warmth despite the serif's technical context. Label-md (14px, 400) and label-sm (12px, 400, 0.08em tracking) handle UI text

Layout

The layout operates on a 12-column grid with a fixed max-width of 1240px and responsive gutter of 48px (desktop) / 20px (mobile ≤700px). The hero section uses 80px top padding and 56px bottom padding to establish breathing room; section labels (sec-label) employ 48px top margin and 20px bottom margin to create visual separation. Feature cards use a 2-column grid (1fr 420px) that collapses to single-column on screens ≤800px; archive grids use 3 columns (gap: 20px) that reduce to 2 columns at 900px and 1 column at 600px. Spacing is semantic: lg (40px) separates major sections, md (24px) pads card interiors, sm (12px) spaces inline elements. The background employs a subtle grid pattern (56px × 56px, rgba(79, 53, 156, 0.055)) to reinforce the terminal aesthetic without creating visual noise. C

Elevation & Depth

Depth is conveyed through borders and subtle shadows rather than dramatic layering. Level 1 (Base): the background grid provides the foundation. Level 2 (Cards & Panels): 1px solid border in outline-variant (rgba(79, 53, 156, 0.22)) with box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) on hover. Level 3 (Modals & Overlays): same border treatment with box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12). Interactive elements (buttons, chips) use no shadow by default; on hover, cards translate up 2px (transform: translateY(-2px)) and borders shift to primary color (#6a41e0), creating a sense of lift without rely

Shapes

The shape philosophy is "Precise Minimalism"—sharp corners where possible, subtle rounding only where interaction demands it. Buttons and inputs use border-radius: 8px (rounded.lg) to signal affordance without softness; cards and feature panels use 10px (rounded.xl) to create visual distinction from UI controls. Code blocks and badges use 3–4px (rounded.sm / rounded.DEFAULT) to maintain a technical aesthetic. The theme toggle button uses 4px radius with a 1px border (outline-variant) and 30px × 30px dimensions. Grid backgrounds and subtle dividers use 0px radius (sharp edges) to reinforce the

Components

Action Elements Buttons use a 44px height with 12px vertical / 24px horizontal padding. Primary buttons (button-primary) have backgroundColor: {colors.primary} (#6a41e0), textColor: {colors.on-primary} (white), and rounded: 8px. On hover, background shifts to primary-container (#7650e9) and the button translates up 1px (transform: translateY(-1px)) over 0.15s ease. Secondary buttons (button-secondary) use transparent background with a 1px border in outline-variant and primary text color; on hover, border and text shift to primary. All buttons disable pointer-events and reduce opacity to 0.5 when disabled.

Containers & Surfaces Cards (card) use backgroundColor: {colors.surface-container} (white), rounded: 10px, and a 1px border in outline-variant. On hover, the border shifts to pri

Do's and Don'ts

**Do**

• Do use JetBrains Mono for all UI text (headings, labels, navigation) to maintain the terminal aesthetic and ensure consistent hierarchy.
• Do apply the purple accent (#6a41e0 light, #9d7bff dark) exclusively to interactive elements—buttons, links, focus states—to create a clear visual language for affordance.
• Do pair serif body copy (Source Serif 4, 19px, 1.66 line-height) with monospace UI to create visual contrast and improve readability for long-form content.
• Do use the outline-variant border color (rgba(79, 53, 156, 0.22)) consistently across cards, inputs, and dividers to maintain tonal cohesion.
• Do transition all interactive states over 0.15s ease (color, border, transform) to provide tactile feedback without distraction.

**Don't**

• Don't use the secondary coral (#e63360) or tertiary yellow (#c79c00) as primary interactive colors—reserve them for accents and status indicators only.
• Don't apply shadows deeper than 0 8px 24px rgba(0, 0, 0, 0.12) or use blur effects; the design system relies on borders and subtle elevation to convey depth.
• Don't round corners beyond 10px (rounded.xl) on cards or 8px (rounded.lg) on buttons; the brand identity depends on precision, not softness.
• Don't mix serif and monospace fonts within a single UI component (e.g., a button label should be monospace, not serif).
• Don't use the background grid pattern (56px × 56px, rgba(79, 53, 156, 0.055)) on surfaces other than the page background; it should remain a subtle foundation, not a repeated texture.