Presets

Style Direction

Neutral, professional, adaptable. Works with any brand color. Think Stripe, Linear, Vercel — products that let content speak.

Layout Guidance

Centered content column (65ch), generous whitespace, 4px baseline grid. Works for landing pages, apps, and marketing sites equally.

Image Pairing

Clean product photography, abstract gradients, minimal icons. Avoid heavy textures or vintage imagery.

Style Direction

Approachable, modern, confident. Rounded terminals on headings soften the tech edge. Pair with vibrant accent colors.

Layout Guidance

Full-width hero, alternating 2-column sections, card grids. Generous padding (64px+ between sections).

Image Pairing

Isometric illustrations, 3D renders, product screenshots with browser chrome. Avoid stock photography.

Style Direction

Stripped-back, high-signal, zero noise. Use for tools, CLIs with web UIs, or any product where the interface should disappear. Think Vercel, Railway, Render.

Layout Guidance

Full-width layout, flush-left type, invisible grid. No decorative elements — borders, not shadows. Monospace for all code and numeric data.

Image Pairing

Terminal output, deployment status, minimal iconography. Black on white with one accent pop.

Style Direction

Trustworthy, measured, professional. For banks, law firms, insurance, or any brand where conservative typography signals reliability over creativity.

Layout Guidance

Wide masthead, clean horizontal sections, table-heavy content areas. Consistent vertical rhythm. Form-heavy pages work well here.

Image Pairing

Corporate photography, headshots, office environments. Consistent aspect ratios, no cropping surprises.

Style Direction

Community-first, accessible, egalitarian. For OSS project homepages, community wikis, or any product that wants to signal it is for everyone.

Layout Guidance

Wide content with sidebar nav, code examples prominent, changelog sections. GitHub-flavored markdown rendering conventions.

Image Pairing

Contributor avatars, GitHub activity graphs, architecture diagrams. Community-generated, authentic.

Style Direction

Maximum legibility, WCAG AAA intent, high contrast. For healthcare, government, educational platforms, or any product where clarity of information is life-critical.

Layout Guidance

Generous line height, wide measures, large touch targets (48px+). Skip-nav links visible. No color-only information encoding.

Image Pairing

High-contrast photography, labeled diagrams, icon + text always paired. Never rely on color alone.

Style Direction

Lean, fast, functional. For products where web performance is a brand value — lightweight font stack, single-family, works with aggressive font subsetting.

Layout Guidance

Narrow column widths, condensed headings for space efficiency. Prefer system font fallbacks in hero sections. Core content loads first.

Image Pairing

Performance metrics as imagery: Lighthouse scores, speed graphs, benchmarks. Technical and functional.

Style Direction

Journalistic, factual, authoritative. For news sites, media organizations, or any platform where credibility and fast scanning are primary reader needs.

Layout Guidance

Multi-column grid for article lists, single-column for articles. Prominent bylines, datelines, and related articles. Breaking news banner at top.

Image Pairing

News photography, photojournalism, infographics. Wire-quality images acceptable — credibility over aesthetics.

Style Direction

Encouraging, clear, student-friendly. For e-learning platforms, course sites, or educational tools where the typography should motivate rather than intimidate.

Layout Guidance

Course cards grid, video-first lesson view, progress indicators. Sidebar for curriculum navigation. Generous spacing to reduce cognitive load.

Image Pairing

Illustrated characters, progress badges, team collaboration photos. Bright, optimistic, inclusive.

Style Direction

Warm, mission-driven, trustworthy. For charities, NGOs, foundations — typography that signals the organization deserves your donation and your trust.

Layout Guidance

Impactful hero with stats, donor testimonials, program cards. Clear donation CTAs. Annual report sections need strong hierarchy.

Image Pairing

Community photography, before/after impact shots, beneficiary portraits. Real people, real stories.

Style Direction

Timeless, literate, unhurried. Like opening a well-typeset book. Use ample margins and let the text breathe.

Layout Guidance

Single column (60ch max), large margins, pull quotes, drop caps. Sidenotes over footnotes.

Image Pairing

Black and white photography, editorial illustration, woodcut-style graphics. Embrace negative space.

Style Direction

Dramatic, editorial, high-contrast. Think Vogue meets The New York Times. Headlines are large and commanding.

Layout Guidance

Asymmetric grids, full-bleed images, overlapping text on images. Multi-column body text for longer pieces.

Image Pairing

Full-bleed photography, fashion/lifestyle imagery, strong diagonals. Color photography with high saturation.

Style Direction

Warm, readable, trustworthy. Merriweather's chunky serifs were designed for screens first. Friendly without being casual.

Layout Guidance

Narrow content column (55-65ch), generous paragraph spacing, inline images. Sidebar optional for categories/TOC.

Image Pairing

Inline illustrations, author photos, code screenshots. Keep imagery supporting the text, not competing.

Style Direction

Deeply literary, unhurried, magazine-quality. For essays, features, memoirs, or investigative pieces that need to reward slow reading. Think The Atlantic or Longreads.

Layout Guidance

Single column, 58-65ch measure, generous top and bottom padding. Fraunces works beautifully as drop caps. Pull quotes set at 1.4em with left border rule.

Image Pairing

Full-bleed documentary photography, chapter illustrations, hand-drawn section dividers. Analog warmth.

Style Direction

Personal, curated, subscriber-first. For email newsletters, Substack-style publications, or weekly digests where the author's voice is the brand.

Layout Guidance

Single 600px column (email-safe), strong header section, clear issue number/date. Dividers between sections. Plain-text fallback compatible.

Image Pairing

Author headshots, inline illustrations, pull-quote callouts. Intimate, personal, editorial photography.

Style Direction

Warm, tactile, appetizing. For recipe blogs, food magazines, restaurant sites, or cookbooks translated to web. Typography should feel like it belongs in a kitchen.

Layout Guidance

Hero food photo full-bleed, recipe card with grid layout for ingredients/steps. Jump-to-recipe anchor. Print-friendly version essential.

Image Pairing

Overhead food photography, process shots, ingredient flatlay. Warm tones, natural lighting. Real food only.

Style Direction

Aspirational, cinematic, wanderlust-inducing. For travel blogs, destination guides, or booking platforms where imagery and editorial storytelling share equal weight.

Layout Guidance

Full-bleed hero imagery, overlaid display text, article grid with large thumbnail dominance. Maps as inline content.

Image Pairing

Landscape photography, golden-hour shots, cultural detail macro photography. Large format, immersive.

Style Direction

Scholarly, classical, text-rich. For academic papers, research publications, university sites, or any content where the tradition of the printed page matters.

Layout Guidance

Narrow justified columns (52-58ch), extensive footnote system, figure captions below images, abstract box at top. Citation-dense.

Image Pairing

Archival photographs, scientific diagrams, charts from datasets. Captions more important than the image itself.

Style Direction

Calm, reassuring, clearly structured. For health content sites, medical information portals, or wellness apps where anxiety reduction is a design goal.

Layout Guidance

Clear section headers, info boxes for key takeaways, warning/caution callouts. Accessibility baked in — large base font, high contrast.

Image Pairing

Clean lifestyle photography, calming nature scenes, illustrated anatomical diagrams. Avoid clinical stock imagery.

Style Direction

Cultured, critical, intelligent. For arts publications, museum sites, film criticism, music reviews — where the editorial voice is as important as the content.

Layout Guidance

Review card grid, critic bylines prominent, star/rating display typographically integrated. Generous imagery with editorial captions.

Image Pairing

Artwork photography, performance stills, exhibition installation shots. High quality, properly credited.

Style Direction

Rigorous, evidence-forward, technically precise. For science journalism, research blogs, or tech explainers where accuracy and nuance are non-negotiable.

Layout Guidance

Long article format with deep heading hierarchy, data tables, embedded interactive charts, and footnoted references. Abstract-first convention.

Image Pairing

Scientific visualization, data plots, laboratory photography, microscopy images. Technical precision over aesthetics.

Style Direction

Conversational, binge-worthy, discoverable. For podcast websites, audio platforms, or transcript-heavy content where episode discoverability is the primary UX goal.

Layout Guidance

Episode card grid, waveform-inspired dividers, transcript toggle. Show notes with chapter markers. Subscribe CTA above fold.

Image Pairing

Cover art thumbnails, host headshots, waveform visualizations. Episode art grid as primary visual.

Style Direction

High energy, action-first, score-focused. For sports news, fitness apps, or performance tracking platforms where data and drama coexist.

Layout Guidance

Scoreboard-style hero stats, condensed headline grid, video-heavy article pages. Live scores banner persistent.

Image Pairing

Action photography, freeze-frame moments, athlete portraits. High contrast, motion blur acceptable.

Style Direction

Dense, functional, precise. Every pixel earns its space. Use tabular numbers, clear hierarchy through weight not size.

Layout Guidance

Dense grid of cards (12+ column grid), collapsible sidebar, sticky header with breadcrumbs. Minimal padding (12-16px).

Image Pairing

Data visualizations, charts, sparklines, status indicators. Minimal decorative imagery.

Style Direction

Approachable density. DM Sans at 14px body is just as dense as Inter but feels warmer. Good for tools used all day.

Layout Guidance

Sidebar navigation + main content area. Tables, forms, and detail panels. Use cards sparingly — flat sections work better.

Image Pairing

Form elements, tables, status badges, avatar thumbnails. Functional, not decorative.

Style Direction

Modern, polished, scalable. Outfit's geometric shapes make headings feel intentional without being decorative. Brand-able.

Layout Guidance

Marketing: hero + feature grid. Product: sidebar + content. Both share the same type system — only density changes.

Image Pairing

Product UI screenshots, feature illustrations, customer logos. Clean and professional.

Style Direction

Thumb-first, tap-friendly, scroll-native. For progressive web apps, mobile-optimized dashboards, or apps that see >70% mobile traffic.

Layout Guidance

Bottom navigation, 44px+ touch targets, card-based scrollable content. Stack layout adapts to mobile naturally. Hamburger-free.

Image Pairing

Mobile screenshots at device scale, gesture illustrations, notification previews.

Style Direction

Keyboard-first, power-user, slash-command native. For tools like Linear, Raycast, or any interface where the command palette is the primary navigation.

Layout Guidance

Modal-dominant, keyboard-navigable lists, contextual shortcut displays. Minimal chrome. Spotlight-style search above fold.

Image Pairing

Keyboard shortcut visualizations, command tree illustrations, terminal-style output.

Style Direction

Efficient, relationship-oriented, activity-focused. For CRMs, sales tools, or pipeline management UIs where reps spend all day inside the product.

Layout Guidance

Pipeline kanban or list view, contact profile with activity feed, email thread integration. Keyboard shortcuts essential.

Image Pairing

Contact avatars, pipeline stage icons, activity timeline visualizations.

Style Direction

Precise, trustworthy, number-forward. For fintech apps, portfolio trackers, or budgeting tools where financial figures must be unambiguous and instantly readable.

Layout Guidance

Balance sheets, transaction lists, chart-dominant dashboards. Tabular lining figures throughout. Color-coded gain/loss.

Image Pairing

Candlestick charts, portfolio allocation pies, trend lines. Data visualization is the imagery.

Style Direction

Clinical-grade legibility, error-resistant typography. For EHR systems, clinical dashboards, or any healthcare UI where a misread character can have serious consequences.

Layout Guidance

High-contrast data tables, clear status indicators, alert hierarchy (critical/warning/info). Minimum 14px body, maximum 80ch line length.

Image Pairing

Medical icons, anatomy charts, patient flow diagrams. Clinical, not marketing.

Style Direction

Premium but accessible, location-centric, gallery-first. For property listing platforms, real estate agencies, or home search tools where visual confidence builds buyer trust.

Layout Guidance

Map + list split view, property gallery full-bleed, spec table on detail page. Price and location always above fold.

Image Pairing

Architectural photography, interior staging shots, aerial maps. Bright, spacious, aspirational.

Style Direction

Work-focused, status-at-a-glance, keyboard-navigable. For project trackers, kanban tools, and issue management products where the data is the interface.

Layout Guidance

Kanban board, list view, timeline/Gantt toggle. Inline editing throughout. Priority and assignee always visible in compact cards.

Image Pairing

Board screenshots, burndown charts, team capacity graphs. Interface itself is the visual hero.

Style Direction

Conversational, real-time, notification-aware. For messaging apps, team chat tools, or any interface where conversation threading and status indicators dominate.

Layout Guidance

Sidebar channel list, main message thread, member panel. Thread replies indented. Inline media previews. Unread counts prominent.

Image Pairing

Emoji reactions, custom status illustrations, channel type icons. Human-first micro-illustrations.

Style Direction

Metric-forward, insight-driven, annotation-heavy. For analytics dashboards, reporting tools, or business intelligence platforms where every number tells a story.

Layout Guidance

KPI row at top, chart grid below, data table with inline filtering. Tooltip design is as important as the page layout.

Image Pairing

Chart types used as section illustrations, data flow diagrams, funnel visualizations.

Style Direction

Tool-chrome minimal, canvas-first, creator-focused. For design tools, code editors, or creative applications where the UI frame should disappear entirely.

Layout Guidance

Narrow toolbar rails, floating panel drawers, canvas takes full remaining space. Typographic density highest in inspector panels.

Image Pairing

Tool screenshots, component anatomy diagrams, cursor state illustrations.

Style Direction

Clean, trustworthy, invisible. Typography should frame products, not compete with them. Use weight for hierarchy, not size.

Layout Guidance

Product grid (3-4 columns), sticky filters sidebar, product detail with image gallery. Price and CTA prominent.

Image Pairing

Product photography on white/neutral backgrounds. Lifestyle shots for category pages. Minimal text on images.

Style Direction

Refined, restrained, spacious. Generous letter-spacing on headings (0.05em+). Thin weights for body. Less is always more.

Layout Guidance

Centered, generous whitespace (100px+ padding). Full-bleed imagery. Minimal navigation. Each page is a curated composition.

Image Pairing

Studio photography, muted tones, close-up textures. No cluttered compositions. One image, one focal point.

Style Direction

Friendly, open, trustworthy. Rounded forms reduce perceived friction. Great for platforms where users need to feel safe transacting.

Layout Guidance

Search-first hero, card grid results, seller/buyer profiles. Clear trust signals (reviews, badges) in the typography hierarchy.

Image Pairing

User-generated content, product thumbnails, avatar circles. Diverse, authentic photography.

Style Direction

Fashion-forward, aspirational, trend-aware. For apparel brands, fashion marketplaces, or clothing retailers where style is the product. Generous whitespace signals premium.

Layout Guidance

Lookbook grid, editorial product photography dominant, minimal product metadata until hover. Size guide inline.

Image Pairing

Editorial fashion photography, model styling shots, flat-lay product photography. Season-aligned color palettes.

Style Direction

Feminine, premium, sensory. For beauty brands, cosmetics retailers, or skincare lines where the product experience starts with how the page feels.

Layout Guidance

Before/after galleries, ingredient call-outs, routine builder flow. Shade selector as a UI component. Review system prominent.

Image Pairing

Close-up texture photography, product still life, skin-tone-inclusive model photography. Soft lighting.

Style Direction

Considered, quality-forward, aspirational livability. For furniture, home decor, or interior design retailers where lifestyle aspiration meets practical purchase decisions.

Layout Guidance

Room scene hero photography, product in-context imagery, material/finish selectors, dimension spec tables.

Image Pairing

Lifestyle interiors, room vignettes, material close-ups. Natural light, warm tones, real homes.

Style Direction

Conversion-focused, benefit-led, trial-encouraging. For SaaS subscriptions, box services, membership sites — where the pricing page is the most critical typography canvas.

Layout Guidance

Tiered pricing cards side by side, feature comparison table, FAQ accordion. Free trial CTA above fold.

Image Pairing

Product screenshots, happy customer photos, feature illustration icons. Social proof heavy.

Style Direction

Performance-driven, energy-forward, gear-focused. For athletic equipment, outdoor adventure gear, or sports apparel where product capabilities are the selling proposition.

Layout Guidance

Action video hero, product feature highlights with icons, gear comparison table, athlete testimonials.

Image Pairing

Action photography, athlete-in-use shots, gear detail photography. High contrast, motion.

Style Direction

Creator-to-creator, preview-first, license-clear. For digital marketplaces, design asset shops, or template stores where the product quality must show through typography.

Layout Guidance

Preview-dominant product cards, lightbox gallery, license tier table, related products sidebar.

Image Pairing

Product previews, mockup renders, before/after comparisons. Creator-made content, not stock.

Style Direction

Rooted, established, community-trusted. For restaurants, local shops, service businesses — where the vibe is "this place has been here forever and earns your trust".

Layout Guidance

Location + hours prominently above fold, menu/services list format, map embed, review stars. Mobile-first mandatory.

Image Pairing

Storefront photography, team portraits, product/dish photography. Real location, real people.

Style Direction

Playful, loving, trust-building. For pet food, veterinary clinics, pet product shops — where the target audience is emotionally invested pet owners who want the best.

Layout Guidance

Pet photography hero, breed-specific product filtering, ingredient/nutrition tables, vet recommendation badges.

Image Pairing

Pet photography (happy animals), product on model/pet, lifestyle with owner. Emotional, joyful.

Style Direction

Enterprise-grade, procurement-ready, vendor-trustworthy. For B2B software marketplaces, supplier directories, or wholesale platforms where the buyer is a professional.

Layout Guidance

Vendor cards with trust signals, detailed spec sheets, RFQ forms, comparison tables. Pricing on request common.

Image Pairing

Product photography, integration logos, customer company logos. Enterprise, professional.

Style Direction

Authoritative, time-sensitive, provenance-signaling. For auction platforms, estate sales, or collectibles markets where the gavel-and-podium seriousness must translate to screen.

Layout Guidance

Lot grid with countdown timers, bid history table, provenance documentation. Current bid always visible. Mobile bid flow optimized.

Image Pairing

Provenance photography, detail shots of lot items, auction room atmosphere. Photography-first.

Style Direction

Authoritative, scannable, reference-grade. Headings as wayfinding, not decoration. Deep hierarchy (h1–h5 common).

Layout Guidance

Three-column: sidebar TOC, content (65ch), on-page anchors. Collapsible code blocks, tabbed examples.

Image Pairing

Code screenshots, architecture diagrams, annotated UI examples. Technical illustrations over photography.

Style Direction

Sharp, code-first, dark mode native. Fira Code's ligatures make code examples feel polished. Syntax highlighting matters.

Layout Guidance

Full-width code examples, copy buttons, language tabs. API reference tables. Dark code blocks on light page (or full dark mode).

Image Pairing

Terminal screenshots, API response examples, architecture diagrams. Dark theme native.

Style Direction

Precise, technical, structured. Space Grotesk's monospace heritage makes headings feel systematic. Tables and key-value layouts everywhere.

Layout Guidance

Two-panel: description left, code right (Stripe-style). Sticky endpoint headers. Collapsible parameter tables.

Image Pairing

Endpoint trees, JSON examples, status code badges. Minimal — the code IS the content.

Style Direction

SDK-first, developer-experience-focused. For library documentation, SDK guides, or framework references where code examples and prose are equally important.

Layout Guidance

Method signature as h3, parameters table, code example right-aligned. Copy button on every block. Inline type references.

Image Pairing

Code snippets as imagery, SDK architecture diagrams, integration flow charts.

Style Direction

Version-history-first, feature-announcement-ready. For public changelogs, release notes, or product update pages where the history of the product is a trust signal.

Layout Guidance

Reverse chronological, version number as anchor heading, tag badges (feature/fix/breaking). Subscribe widget above fold.

Image Pairing

Before/after UI screenshots, feature preview animations, product GIFs.

Style Direction

Search-first, self-serve, globally accessible. For help centers, knowledge bases, or support documentation where findability and translation coverage are top priorities.

Layout Guidance

Search bar hero, category card grid, article with breadcrumb, related articles footer. Feedback widget on every article.

Image Pairing

Step-by-step screenshots with callout annotations, video tutorial thumbnails, FAQ illustrations.

Style Direction

Incident-ready, step-by-step, scannable under pressure. For runbooks, operational playbooks, or oncall guides where someone reads these at 3am during a production incident.

Layout Guidance

Numbered steps prominent, command blocks copy-able, severity indicator in header. Print-ready essential.

Image Pairing

System architecture diagrams, alert screenshots, monitoring dashboard captures.

Style Direction

Step-by-step, beginner-welcoming, milestone-celebrating. For interactive tutorials, onboarding flows, or structured learning sequences where progress momentum matters.

Layout Guidance

Step indicator sidebar, main content with code panel, hint/reveal system. Progress bar persistent. Checkpoint animations.

Image Pairing

Step completion illustrations, progress badge animations, before/after code diffs.

Style Direction

Authoritative, research-backed, lead-generating. For technical whitepapers, industry reports, or research publications designed to establish thought leadership.

Layout Guidance

Executive summary at top, numbered sections with TOC, data tables mid-document, methodology appendix. Print layout critical.

Image Pairing

Data charts, research infographics, abstract cover art. Professional illustration over photography.

Style Direction

Precise, unambiguous, jurisdiction-ready. For privacy policies, terms of service, legal notices, or compliance documentation where every word must be readable and archived.

Layout Guidance

Dense hierarchical numbered sections, cross-reference links, definition callouts, effective date prominent. Print stylesheet essential.

Image Pairing

Minimal — jurisdiction flags, certification logos, signature fields. No decorative imagery.

Style Direction

Community-building, conference-talk energy, hackathon-inviting. For devrel sites, community hubs, or developer advocate content where building belonging is as important as shipping code.

Layout Guidance

Events calendar, community showcase, tutorial grid, forum activity feed. Discord/Slack join CTA prominent.

Image Pairing

Conference photos, hackathon energy shots, diverse developer portraits. Community-generated.

Style Direction

Trust-through-clarity, incident-professional, SLA-focused. For service status pages, incident communication, or uptime displays where honest, clear communication is the entire product.

Layout Guidance

System health grid at top, active incidents below, historical uptime chart, subscription widget. Auto-refresh.

Image Pairing

Uptime graphs, incident timeline visualizations. Color-coded status indicators. No decorative imagery.

Style Direction

GitHub-adjacent, star-worthy, quick-start-focused. For open-source project landing pages where the goal is stars, installs, and contributors — in that order.

Layout Guidance

npm install command above fold, feature grid, code example, GitHub stats. Contributor wall. MIT badge visible.

Image Pairing

GitHub contribution graphs, CLI terminal recordings, architecture diagrams. Dark native.

Style Direction

Systematic, accessible, platform-native on Windows. Segoe UI Variable was designed for the full range of Windows UI density levels.

Layout Guidance

Fluent's 8px grid, 600px max content width, compact density option. NavigationView + content pattern.

Image Pairing

Fluent icons (outlined, 24px default), Azure/Office brand illustrations. Clean, functional iconography.

Style Direction

Systematic, elevation-aware, responsive. Material's type scale uses display/headline/title/body/label roles. Color and elevation reinforce hierarchy.

Layout Guidance

Material 3 layout grid (compact/medium/expanded). Surface elevation hierarchy. FAB, bottom sheets, cards as containers.

Image Pairing

Material Symbols icons, tonal color system illustrations. Geometric shapes, layered surfaces.

Style Direction

Corporate, systematic, information-rich. Carbon's larger scale ratio creates stronger visual hierarchy. 2rem grid, productive vs. expressive modes.

Layout Guidance

Carbon's 16-column grid, left-aligned content, data table-heavy. Breadcrumb navigation, tag-based filtering.

Image Pairing

IBM Pictograms, carbon icons. Data visualization with Carbon Charts. Enterprise photography guidelines.

Style Direction

Creative-professional, tool-focused. Spectrum balances creative expression with tool UI density. Dark mode is first-class.

Layout Guidance

Spectrum's responsive grid, left rail navigation, panel-based workspace. Detail overlays, inline editing.

Image Pairing

Spectrum icons (workflow + UI), creative tool screenshots. Dark surfaces with accent color pops.

Style Direction

Minimal, composable, developer-friendly. Radix's philosophy: no opinions on aesthetics, maximum flexibility. Type scale is a starting point, not a rule.

Layout Guidance

Component-driven: dialogs, popovers, dropdown menus. Content-first, chrome-minimal. Radix Themes for opinionated defaults.

Image Pairing

Component examples, accessibility-focused UI patterns. Minimal decoration, maximum functionality.

Style Direction

Platform-native for iOS/macOS. For apps targeting Apple platforms, design system documentation, or Figma libraries where iOS Human Interface Guidelines are the reference.

Layout Guidance

iOS layout conventions: large titles in navigation, grouped list forms, bottom sheet modals. 8pt grid. SF Symbols for iconography.

Image Pairing

iOS UI screenshots, SF Symbol usage examples, device mockups. Platform-native aesthetic.

Style Direction

Enterprise-grade, east-west bridging, table-heavy. For admin systems, enterprise dashboards, or B2B platforms where Ant Design components are the implementation foundation.

Layout Guidance

Ant's 24-column grid, left-fixed menu, breadcrumb header. Dense form layouts, complex data tables, modal confirmation flows.

Image Pairing

Ant Design illustrations, enterprise workflow diagrams, data table examples.

Style Direction

Accessible-first, React-native, composable. For projects using Chakra UI as the component foundation where the theme customization starts from a warm, accessible baseline.

Layout Guidance

Chakra's responsive container system, stack/grid/flex primitives. Dark mode built-in. Consistent focus ring visible throughout.

Image Pairing

Component playground screenshots, accessibility audit results, dark/light mode toggles.

Style Direction

Merchant-focused, e-commerce-operational, admin-dense. For Shopify apps, Polaris-based admin extensions, or e-commerce management tools following Polaris guidelines.

Layout Guidance

Shopify admin frame, page-header with action groups, card-based page sections. Page + section + card hierarchy.

Image Pairing

Merchant dashboard screenshots, product catalog views, order management tables.

Style Direction

Utility-first, component-composable, rapid-prototyping-ready. For projects using Tailwind CSS where the design system is built via class composition. Heroicons for iconography.

Layout Guidance

Tailwind's default spacing scale, 8px baseline grid. Container classes, responsive breakpoint-driven layouts. Dark mode variant always prepared.

Image Pairing

Component screenshots at multiple breakpoints, dark/light mode comparison, composition examples.

Style Direction

Full-featured React components, TypeScript-first, Storybook-integrated. For projects using Mantine as the UI foundation where the design tokens need to be systematically defined.

Layout Guidance

Mantine's AppShell with Navbar/Header, responsive breakpoints, notification system. Drawer and modal management consistent.

Image Pairing

Component documentation screenshots, Mantine UI interactive examples, Storybook captures.

Style Direction

Copy-paste components, Radix primitive-based, full ownership model. For Next.js/Vercel-ecosystem projects using shadcn/ui where the typography token layer needs explicit definition.

Layout Guidance

shadcn's CSS variable token system, dark mode via class toggle, Radix accessibility primitives. Full TypeScript interface for all component props.

Image Pairing

Component code + preview split views, dark/light toggle, mobile/desktop comparison.

Style Direction

Token-taxonomy-first, W3C DTCG spec, multi-brand. For design token documentation, token-management tooling, or style dictionary documentation where the token structure is the product.

Layout Guidance

Token reference table (name / value / usage), category tree navigation, alias chain visualization. Export format tabs (CSS, JSON, Figma).

Image Pairing

Token hierarchy diagrams, alias chain visualizations, theme-switching previews.

Style Direction

Loud, grid-visible, raw HTML energy. Show the structure — borders, columns, gaps. Typography IS the design.

Layout Guidance

Visible grid lines, oversized type, clashing columns, raw borders. Content as texture. Break conventional alignment on purpose.

Image Pairing

Raw photography, ASCII art, pixel art, generated patterns. Anti-polish. The rougher the better.

Style Direction

Clean but expressive. Large headings, lots of whitespace, work samples dominate. Typography frames the portfolio pieces.

Layout Guidance

Full-bleed project images, minimal navigation, case study format. Large project titles, small descriptor text.

Image Pairing

Full-bleed project screenshots, process photos, before/after. The work IS the imagery.

Style Direction

Noir, theatrical, literary darkness. For creative journals, dark-mode publications, or premium media brands where the dark background is a brand statement, not a mode.

Layout Guidance

Full-bleed dark hero, tight heading leading (1.1), generous paragraph spacing. Light text on deep backgrounds throughout.

Image Pairing

Dark photography with dramatic lighting, noir illustration, high-contrast black and white.

Style Direction

Futuristic, high-contrast, neon-lit. For gaming brands, tech-forward startups, or creative agencies targeting audiences who identify with cyberpunk or sci-fi aesthetics.

Layout Guidance

Dark backgrounds, neon glow text effects (CSS), diagonal section breaks, grid overlays. Animation-forward.

Image Pairing

Neon-lit cityscapes, glitch art, holographic textures, sci-fi UI overlays.

Style Direction

Made-by-hand, small-batch, authentic origin. For artisan brands, craft breweries, handmade goods shops, or any business where the human behind the product is the differentiator.

Layout Guidance

Story-first layout, maker profile section, process photography integrated. Handwritten-style accent elements. Slow aesthetic — don't rush the scroll.

Image Pairing

Process photography, maker hands, texture close-ups, imperfect materials. Warm, natural light.

Style Direction

Immersive, lore-rich, achievement-driven. For game studio sites, game wikis, esports platforms, or gaming communities where the brand universe is as important as information.

Layout Guidance

Dark hero video background, lore/universe sections, character roster grid, news feed. Achievement badge display.

Image Pairing

Game artwork, cinematic screenshots, character renders, world maps. Immersive, high quality.

Style Direction

Agency-as-brand, work-showcase-first, client-courting. For creative agencies, design studios, or production companies where the site is both portfolio and pitch.

Layout Guidance

Award-type hero ("We made X for Y"), work grid full-bleed, client logo parade, capabilities list. One scroll-per-section.

Image Pairing

Campaign photography, award statues, client work crops. Bold, branded, impressive.

Style Direction

Sonic, rhythm-aware, genre-flexible. For music artists, record labels, or audio brands where the typography should carry the energy of the sound without overpowering it.

Layout Guidance

Album art full-bleed, tracklist as typographic element, tour dates calendar, merch grid. Streaming platform links.

Image Pairing

Album artwork, live performance photography, studio sessions, vinyl close-ups.

Style Direction

Cinematic, aspect-ratio-aware, auteur-adjacent. For film production companies, festival sites, or cinema brands where the theatrical tension of movie posters should translate to web.

Layout Guidance

Wide-aspect hero imagery, film poster-inspired type over image, screening schedule, press quotes prominent.

Image Pairing

Film stills, movie posters, behind-the-scenes photography. Cinematic aspect ratios, dramatic lighting.

Style Direction

Spatial, proportional, material-forward. For architecture firms, industrial designers, or built-environment brands where the typography should feel as considered as the structures.

Layout Guidance

Project image dominant, technical specification sidebar, awards list, material palette display. Portfolio-first navigation.

Image Pairing

Architectural photography, technical drawings, material samples, interior/exterior views.

Style Direction

Disruptive, loud, market-taking. For startups that want to dominate their category from day one — typography as a confidence signal, not just a readability tool.

Layout Guidance

Oversized headline hero (hero font 5rem+), bold color blocking, high-contrast section transitions. Zero subtlety intended.

Image Pairing

Bold graphic design, product hero shots with motion blur, customer logos at scale.

Style Direction

Established, storied, weathered-by-time. For heritage brands, craft businesses, historical societies, or any product where age and tradition are the brand equity.

Layout Guidance

Aged texture backgrounds (CSS), ruled dividers, centered ornament elements, period-appropriate numbering.

Image Pairing

Archival photography, aged textures, letterpress-style printing, sepia tones.

Style Direction

Precise, numerical, annotation-heavy. Use tabular lining figures always. Axis labels, legends, and tooltips need distinct sizes.

Layout Guidance

Full-width charts, dashboard grid, KPI cards at top. Sortable tables. Filter bar or faceted search. Print-friendly.

Image Pairing

Charts, heatmaps, treemaps, sparklines. Data IS the visual. Use color systematically for categories.

Style Direction

Big, bold, distant-readable. Design for the person in the back row. One idea per slide. Minimal text, maximum impact.

Layout Guidance

Full-screen slides: one headline + one visual. Bullet points only when unavoidable. Dark backgrounds for projector rooms.

Image Pairing

Full-bleed photos, single icons, large numbers. One visual per slide. No clip art.

Style Direction

Publication-grade charts, peer-review ready, reproducible. For scientific papers with embedded interactive visualizations, research platforms, or data journalism with academic rigor.

Layout Guidance

Figure with caption below (APA/MLA format), methodology panel, data source attribution. Export to PDF must match web layout.

Image Pairing

Scientific charts (scatter, violin, heatmap), anatomical/geological diagrams, microscopy.

Style Direction

Map-first, layer-aware, coordinate-precise. For GIS platforms, mapping tools, location analytics, or geographic data products where the map canvas dominates and UI is secondary.

Layout Guidance

Full-viewport map, floating control panels, bottom sheet for feature details, mini-map for context. Legend absolutely positioned.

Image Pairing

Map tiles, satellite imagery, choropleth visualizations, geographic heat maps.

Style Direction

Radiological precision, annotation-accurate, DICOM-adjacent. For medical imaging platforms, PACS viewers, or clinical diagnostic tools where image annotations are safety-critical.

Layout Guidance

Dark viewport for imaging, floating measurement tools, annotation overlays, series navigator. High-contrast mode essential.

Image Pairing

Medical imaging renders, annotation callouts, measurement overlays. Clinical, not decorative.

Style Direction

Annual-report-grade, investor-relations-ready, SEC-compliant. For financial reports, earnings pages, or investor relations sites where international coverage and print fidelity are required.

Layout Guidance

Full-width financial tables, footnote system, exhibit labels, regulatory filing headers. Print CSS as important as screen.

Image Pairing

Financial charts, table-dominated layouts. Company logo and report cover as primary imagery.

Style Direction

Real-time updates, sensor-grid-dense, alert-state-aware. For IoT platforms, industrial monitoring, or smart building dashboards where hundreds of data points need simultaneous display.

Layout Guidance

Sensor grid tiles, real-time value refresh animation, threshold alert indicators, time-series sparklines.

Image Pairing

Sensor topology diagrams, floor plan overlays, real-time chart animations.

Style Direction

Operations-critical, barcode-adjacent, shift-worker-readable. For logistics platforms, warehouse management systems, or supply chain tools used in operational environments.

Layout Guidance

Order queue list, scan-to-confirm flows, route optimization maps, delivery status timeline.

Image Pairing

Route maps, package tracking visualizations, warehouse floor plans.

Style Direction

Clausular precision, legal-weight authority, redline-ready. For contract management tools, e-signature platforms, or legal research systems where document fidelity is the product.

Layout Guidance

Document viewer full-width, comment thread sidebar, redline diff display, version history panel.

Image Pairing

Document thumbnails, signature field indicators, version diff visualizations.