The Content Architecture

Overview

The Content Architecture is a full-stack, agent-ready Sanity kit for Next.js and Astro that embodies 'Technical Pragmatism'—a design philosophy that prioritizes clarity, precision, and decisiveness over decoration. The brand serves developers and content teams who want to skip reinvention and move directly to the work that matters: building products. The aesthetic is warm minimalism with technical undertones: a warm off-white canvas (#f1eee7) paired with a vibrant orange accent (#ff9100) that signals action and energy. The UI avoids corporate sterility by embracing a human-scale color palette (warm taupes, soft blues) and monospace typography for code-adjacent contexts, creating an environment where technical decisions feel approachable rather than intimidating.

The voice is direct, confident, and slightly irreverent—it speaks to builders who have already made hard choices and want a partner that respects their time. Vocabulary leans into specificity: 'six years of decisions committed,' 'AGENTS.md,' 'MCP servers,' 'llms.txt'—terms that signal depth without jargon. The brand personality rejects both corporate polish and startup hype; instead, it conveys earned expertise. Example sentence in brand voice: 'The page builder alone costs you days. Every single time. We've already made those decisions so you don't have to.'

Colors

The color system is built on a warm, approachable foundation with strategic accent deployment. The primary surface (#f1eee7, off-white) creates a calm, readable canvas that feels less sterile than pure white (#ffffff) while maintaining excellent contrast with body text (#232323, near-black). The primary accent color is a vibrant, warm orange (#ff9100) used exclusively for call-to-action buttons, active states, focus rings, and brand-critical interactive elements—it commands attention without aggression. Secondary accent (#d6a878, warm taupe) provides a softer, supporting tone for secondary UI elements, badges, and decorative accents. Tertiary (#9fb6d6, soft blue) is reserved for data visualization, status indicators, and tertiary actions. The surface stack progresses from bright (#fdfcfa)

Typography

The type system uses GeistSans as the primary typeface—a modern, geometric sans-serif that conveys technical competence without coldness—paired with GeistMono for code, terminal output, and technical labels. Display (80px, 500 weight, -0.02em tracking) anchors hero sections with confident presence; headline-lg (40px, 500 weight) structures major section breaks; body-md (16px, 400 weight, 24px line-height) ensures readability at 1.5 line-height ratio for comfortable scanning. Label-md (14px, 600 weight, 0.01em tracking) is used for button text and UI labels, providing visual weight without size inflation. GeistMono at 12–14px is reserved for code snippets, terminal commands, and technical metadata—never use it for body copy. Apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) on small monospac

Layout

The layout uses a fluid 12-column grid that scales from 375px (mobile minimum) to 1600px (desktop maximum) using CSS custom properties for responsive scaling. Container max-width is 1600px with symmetric gutters of 24px on all sides, creating breathing room without excessive whitespace. The spacing scale is semantic: unit (8px) is the base increment; lg (40px) separates major sections; md (24px) is used for card padding and component spacing; sm (12px) for internal component gaps. Page rhythm follows a 'breathing' pattern: hero section (80px+ top margin), section separator (40px margin-block), card groups (24px gap between items). The grid uses 12 columns at desktop, collapsing to 6 columns at tablet and 1 column on mobile via CSS media queries. Fluid typography scales between defined brea

Elevation & Depth

Depth is conveyed through a restrained shadow system that avoids the 'floating card' aesthetic in favor of subtle layering. Level 1 (Base): no shadow; surface is flush with background. Level 2 (Cards, inputs): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a soft, close shadow that suggests slight elevation without drama. Level 3 (Modals, popovers, dropdowns): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), a larger blur radius and spread that indicates greater distance. Level 4 (Sticky headers, floating CTAs): box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1), the most pronounced shadow for element

Shapes

The shape philosophy is 'Geometric Precision'—rounded corners are used strategically to soften technical interfaces without sacrificing clarity. Buttons and inputs use 4px (0.5rem) border-radius, a subtle rounding that feels contemporary without being playful. Cards and larger containers use 8px (1rem) border-radius for slightly more breathing room. Modals and popovers use 12px (1.5rem) to signal elevation and importance. Full-width badges and pills use 9999px (full) for maximum roundness. The rationale: small radii (4px) on interactive elements like buttons and inputs maintain visual weight a

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons use #ff9100 background with white text, 40px height, 10px vertical / 24px horizontal padding, and 4px border-radius. Hover state darkens to #e68200 with a 150ms transition. Active state uses #cc7700. All buttons include box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to lift them from the surface. Secondary buttons are transparent with a 1px border at #cbcbcb, same padding and height, and hover to {colors.surface-container-high}. Ghost buttons (used for tertiary actions) have no border or shadow, transparent background, and text color matching primary (#ff9100); they hover to rgba(255, 145, 0, 0.08). Button text always uses label-md typography (14px, 600 weight, 0.01em tracking).

Containers & Surfaces Cards are

Do's and Don'ts

**Do**

• Do use #ff9100 (primary orange) exclusively for CTAs, active states, and focus rings—it's the brand's signature accent and must remain visually distinct.
• Do maintain 24px gutters and 40px section margins to create breathing room; the layout should feel spacious, not cramped.
• Do use GeistSans for all UI text and GeistMono only for code, terminal output, and technical metadata—never mix them for body copy.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to cards and elevated surfaces; it's the system's standard shadow and maintains visual consistency.
• Do use 4px border-radius on buttons and inputs, 8px on cards, and 12px on modals—this hierarchy signals interaction type and context.
• Do ensure all interactive elements have a minimum 44px touch target (height + padding combined) and a visible focus state using the 3px inset ring at rgba(255, 145, 0, 0.2).
• Do use the surface-container stack (#f1eee7 → #ebe8e0 → #e5e2da) for subtle visual hierarchy without harsh contrast shifts.

**Don't**

• Don't use pure white (#ffffff) or pure black (#000000) for body text or backgrounds—use #f1eee7 (off-white) and #232323 (near-black) to maintain warmth and reduce eye strain.
• Don't apply shadows larger than 0 16px 40px rgba(0, 0, 0, 0.1)—deeper shadows break the restrained, technical aesthetic and feel dated.
• Don't use #ff9100 for non-interactive elements like badges or decorative accents—reserve it for CTAs and focus states so it retains its signal strength.
• Don't mix GeistSans and GeistMono in the same text block; they have different metrics and will create visual discord.
• Don't use border-radius larger than 12px on any component except full-width pills (9999px)—excessive rounding reads as playful and undermines technical credibility.
• Don't apply transitions longer than 150ms on hover/focus states—the brand is responsive and snappy, not sluggish.
• Don't use the surface-container colors for text; they're reserved for backgrounds and containers. Always use #232323 (on-surface) or #5b5a56 (on-surface-variant) for readable text.