Style Guide
Internal typography and UI component test page.
Design Tokens: Typography
Semantic font families and their designated weights within the system.
font-headline (Bodoni Moda)
Light (300) - Large Accents
Regular (400) - Standard
Medium (500) - UI Elements
Bold (700) - Brand / Logos
font-body (Lora)
Light (300) - Body Copy
Regular (400) - Standard
Medium (500) - Emphasis
Italic (300) - Quotes / Kicker
Files: global.css
Brand Colors
Brand colors and their semantic meaning.
Brand Accents (Exceptions)
brand-reading
#ffeee4
brand
#f63f0e
brand-complimented
#2b5a7d
brand-inverted
#ecaa94
accent
#ffe6d7
accent-inverted
#75b2df
Files: global.css
Typography Scale
Defines the structural heading and body text scale used across the application. Powered by the type-* utility classes in global.css.
type-h1
Heading Level 1
type-h2
Heading Level 2
type-h3
Heading Level 3
type-subheading
Subheading / Italic Callout
type-body
Default body text - Lora, light weight, relaxed line-height for maximum legibility. This is used for standard interface text and descriptions.
type-ui
Systemic UI (Nav, Tags, Pagination, Breadcrumbs)
type-button
Action Button Text
<Kicker> ComponentKicker Default
Files: global.css, Kicker.astro
Prose / Markdown
Simulates the output of rendered markdown content from the CMS, constrained by the .prose utility class.
The Architecture of Thought
Software architecture is not merely about choosing frameworks or structuring directories. It is the art of making decisions that allow a system to evolve gracefully.
“Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away.”
Key insight: The most maintainable codebases are those where every line has a clear purpose. This is the essence of clean architecture.
Files: Prose.astro, global.css (.prose selectors)
Buttons
Primary action triggers. Minimalist, text-based with wide letter spacing.
Files: Button.astro, ButtonGroup.astro
Navigation
Structural wayfinding elements used across the platform. The active state utilizes the brand color border for semantic clarity.
Files: Breadcrumbs.astro, MenuItem.astro, Pagination.astro
Interactive Links
Standardized link components for branding and social outlinks.
Logo Link
Lars Jensen
Files: LogoLink.astro, SocialLink.astro, IconLogo.astro, BaseIcon.astro
Forms & Inputs
User input fields and interactive data retrieval.
Search Interface
Will AI Replace You? The Future of Work and Adaptation
Is AI causing a job apocalypse? Discover why AI is a tool for professional growth and how to adapt your skills for the future of work in this expert analysis.
The Future of Product Management: From Creation to Curation
Discover how AI-driven software abundance is transforming the product manager role from a gatekeeper of creation to a strategic curator of business value.
Claude Opus 4.8 Review: Agent Swarms and the Cost of Scale
Is Claude Opus 4.8 worth the cost? We analyze the new dynamic workflows, agentic performance, and the hidden price of scaling AI-driven code refactoring.
Scaling Enterprise AI: From Pilot Projects to Production
Learn why most enterprise AI projects fail and how to overcome governance, finance, and engineering bottlenecks to achieve scalable, machine-speed innovation.
Why Single AI Agents Fail: The Case for Multi-Agent Systems
Stop relying on single AI agents for high-stakes decisions. Learn how multi-agent architectures provide the verification needed to mitigate enterprise AI risk.
The Cognitive GIL: Why Agentic Workflows Kill Productivity
Stop the orchestration tax. Learn why spawning autonomous AI agents creates a human bottleneck and how to architect your attention for real productivity.
Files: SearchInterface.astro
Tags
Taxonomy elements with a soft 0.25rem rounded corner.
Files: TagPill.astro
Metadata
Components used to display data attributes like dates on articles.
Files: DateBadge.astro
Article Previews (Editorial List)
Typographic list items with 1px dividers in system-brand-inverted (Peach/Brand Inverted).
Article Card
The Future of Executive Leadership in Tech
An exploration of how AI will reshape the role of technology executives.
The Future of Executive Leadership in Tech
An exploration of how AI will reshape the role of technology executives.
Files: ArticleCard.astro
Layout Elements
Major structural blocks that define the page architecture.
Header
Footer
PageTitle (Standard — centered)
Morten G. Lind
Executive coach and former C-suite technology leader.
PageTitle (Inverted — responsive)
Morten G. Lind
Executive coach and former C-suite technology leader.
Files: Header.astro, Footer.astro