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
Qwen 3.8 Max: The End of the AI Frontier Monopoly
Explore the impact of Qwen 3.8 Max. Discover how this 2.4T parameter model challenges US AI dominance through extreme efficiency and open-weight distribution.
X Strategy: From Twitter to the Everything App
Explore the strategic transformation of X under Elon Musk as it shifts from ad-dependency to a subscription-based model and an ambitious everything app.
Why Open Source Projects Are Banning AI-Generated Code
Discover why open-source maintainers are implementing no-LLM policies to combat code noise, legal risks, and the erosion of essential engineering skills.
Is the AI Job Apocalypse Cancelled? The Reality of Labor
Discover why the AI labor market narrative is shifting from job replacement to augmentation and how companies are using AI to drive real operational efficiency.
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.
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