Liam Fallen | AI & Marketing

Overview

Liam Fallen is a direct, no-nonsense newsletter brand serving marketing professionals and AI practitioners. The design embodies 'Austere Clarity'—a minimalist aesthetic that rejects decoration in favor of information hierarchy and purposeful contrast. The visual language uses a deep charcoal-black (#0b0a0a) as the dominant accent, paired with a clean white canvas (#ffffff) and a teal-green secondary (#095544) for strategic emphasis. The brand personality is conversational yet authoritative: the voice is that of a trusted peer sharing hard-won insights over coffee, never breathless or hyperbolic. Example: 'AI isn't replacing marketers—it's replacing the marketers who don't learn to use it.'

Colors

The color system prioritizes legibility and directness. Primary (#0b0a0a) is the deep charcoal used for all call-to-action buttons, headlines, and interactive elements—it commands attention without aggression. On-primary (#ffffff) ensures maximum contrast (21:1 WCAG AAA) for text on dark backgrounds. The surface stack ranges from pure white (#ffffff) at surface-bright down to light gray (#f0f3f9) at surface-container-low, providing subtle visual separation for cards and containers without introducing visual noise. Secondary (#095544), a muted teal-green, is reserved for badges, status indicators, and secondary CTAs—it adds warmth without competing with primary. Tertiary (#ffffff) serves as a neutral accent for inactive states. Error (#ef4444) is used sparingly for validation and warnings.

Typography

The type system uses Inter exclusively across all weights (100–900), ensuring consistency and modern clarity. Display (60px, 700 weight, -0.04em letter-spacing) is reserved for hero statements and major section breaks; its tight tracking creates visual tension that draws the eye. Headline-lg (40px, 600 weight) anchors primary content sections, while headline-md (28px, 600 weight) breaks up longer articles. Body-lg (18px, 400 weight, 28px line-height) is used for hero copy and introductory paragraphs, providing generous line-height (1.56) for comfortable reading. Body-md (16px, 400 weight, 24px line-height) is the default for article text and form labels. Label-md (14px, 600 weight, 0.01em letter-spacing) is applied to button text and small UI labels, with a 1.43 line-height for compact ver

Layout

The layout uses a 12-column grid with a max-width of 1280px, centered on the viewport with symmetric margins. The spacing scale is semantic: lg (40px) separates major sections (hero from content, content from footer), md (24px) is the default gutter between cards and form elements, and sm (12px) is used for internal padding within components. The hero section uses a centered, single-column layout with max-width 640px for the text block, ensuring readability and focus. Form inputs (email + subscribe button) are laid out horizontally on desktop (mob-stack class switches to vertical on screens ≤667px) with 12px gap between elements. Cards use md (24px) padding internally and are separated by lg (40px) vertical spacing. The design favors generous white-space: the body background is pure white

Elevation & Depth

Depth is conveyed through subtle shadows and surface color shifts rather than dramatic layering. The elevation system uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for cards and raised surfaces, md (0 4px 12px rgba(0, 0, 0, 0.08)) for modals and overlays, and lg (0 16px 40px rgba(0, 0, 0, 0.12)) for dropdowns and floating elements. Input fields and buttons use no shadow by default, relying instead on border color (#dfe1e4) and background color shifts to indicate interactivity. On hover, buttons transition to a darker background (primary-container, #374151) with a 200ms ease-out timing

Shapes

The shape philosophy is 'Functional Minimalism'—rounded corners are used sparingly and purposefully, never decoratively. Buttons use rounded-md (0.75rem / 12px), a subtle curve that softens the hard edges of the charcoal background without introducing playfulness. Input fields use rounded-DEFAULT (0.5rem / 8px), a tighter radius that emphasizes their utilitarian purpose. Cards use rounded-lg (1rem / 16px), the most generous radius, to create visual breathing room and distinguish them from the flat background. Badges use rounded-full (9999px) to create pill-shaped containers that feel distinct

Components

Action Elements Buttons are the primary interaction pattern. Button-primary uses backgroundColor: {colors.primary} (#0b0a0a), textColor: {colors.on-primary} (#ffffff), rounded-md (12px), and padding 12px 24px for a 44px total height. The font is Inter 600 weight (label-md). On hover, the background transitions to primary-container (#374151) over 200ms with ease-out timing, and the cursor changes to pointer. On focus, a 3px ring of rgba(11, 10, 10, 0.08) appears around the button. Button-secondary uses a transparent background with a 1px border at {colors.outline} (#9ca3af), same padding and height as primary, and on hover shifts to surface-container-high (#e5e7eb). Both button variants use font-family: Inter and disable the default focus ring with outline: none, relying instead on the

Do's and Don'ts

**Do**

• Do use primary (#0b0a0a) exclusively for CTAs and interactive elements—it creates a clear visual hierarchy and trains users to recognize clickable areas.
• Do maintain 24px gutter spacing between major sections and 12px between components to preserve the clean, breathing aesthetic.
• Do apply Inter 600 weight to all labels and button text; the heavier weight signals interactivity and improves scannability.
• Do use the surface-container stack (lowest through highest) to create subtle depth without introducing new colors or borders.
• Do apply rounded-md (12px) to buttons and rounded-lg (16px) to cards; this creates a consistent, recognizable pattern across the interface.

**Don't**

• Don't use secondary (#095544) or tertiary (#ffffff) as primary CTAs—they dilute the visual hierarchy and confuse users about what to click.
• Don't add decorative shadows, gradients, or blur effects; the austere aesthetic relies on flat color and minimal depth cues.
• Don't mix font families; Inter is the only typeface used across all weights and sizes, ensuring visual cohesion.
• Don't apply border-radius greater than 16px (rounded-lg) to any element except badges (rounded-full); larger radii introduce visual softness that conflicts with the minimalist brand.
• Don't use color to convey information alone; always pair color with text, icons, or other visual cues to ensure accessibility and clarity.