Skip to Content
DesignDesignOpsHomepage Design System

Homepage Design System

Visual language & components of the Studio of Two site

Homepage Design System

This page documents the visual identity, design tokens, and custom components used across the Studio of Two website. By combining Human-Centered typography with Machine-First layouts, this design system establishes a consistent documentation language.

Layout Framework (Nextra & Tailwind)

The layout of this site is built upon a hybrid framework:

  • Nextra 4 (Docs Theme): Nextra serves as the content router and layout organizer. It provides out-of-the-box support for directory-based routing (pages are defined by .md and .mdx files) and compiles them into statically optimized React pages. Custom layout structures, sidebar links, and active page styles are configured using _meta.js configuration files.
  • Tailwind CSS 3: All presentation, responsive spacing, layouts, and interactive feedback are built using Tailwind utility classes. The core design tokens are integrated directly as Tailwind classes, keeping styling declarative. Custom overrides are stored in styles/globals.css using Tailwind’s @apply directive.

Atomic Tokens

1. Color System

We use tailored, high-contrast HSL values that adapt automatically between light and dark modes to maintain full WCAG compliance.

Primary Accent

#6366f1 / HSL(237, 84%, 45%/67%)

Brand Gradient

from-purple to-blue

Surface Base

bg-white / bg-gray-900/40

Nextra Theme Color Token

The core HSL accent maps directly into the Nextra <Head> token in app/layout.tsx:

color={{
  hue: 237,
  saturation: 84,
  lightness: { light: 45, dark: 67 }
}}

2. Geometry & Spacing

  • Container Radii: rounded-2xl (16px) for major outer containers, boxes, and grids.
  • Inner Elements: rounded-xl (12px) for buttons, badges, inputs, and media assets.
  • Separators: border-gray-200 dark:border-gray-800 (1px static).
  • Elevations: shadow-sm base transitioning to hover:shadow-md via transition-all duration-200.
Radii (Outer)rounded-2xl

rounded-xl (Inner)

Elevationshadow-sm / hover:shadow-md

3. Interactive Transitions

  • Scale Feedback: hover:scale-[1.02] active:scale-[0.98]
  • Duration: transition-all duration-200 ease-in-out for smooth click/hover reactions.

4. Layout Sizing & Grids

  • Article Width: max-w-4xl for centralized reading content.
  • Dashboard Width: max-w-7xl for grid displays.
  • Grid Gaps: gap-4 or gap-6 for card listings.

Font Stack & Typography

We rely on Next.js default font configurations combined with standard fallback systems for optimal reading performance:

  • Sans-Serif Font Stack (font-sans): Defaults to Inter combined with the system font stack (system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif). Used for all standard paragraphs, callouts, and interface buttons.
  • Monospace Font Stack (font-mono): Defaults to SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace. Used for badges, identifiers, code tags, and metrics counters.
  • Typography Classes: Defined globally in styles/globals.css (such as .t1, .t2, .t3, .p1, .p2) to style headers and paragraphs consistently.
Sans-Serif (font-sans)

Inter & System Font Stack

system-ui, -apple-system, sans-serif

Monospace (font-mono)

SFMono-Regular & Code Stack

SFMono-Regular, Menlo, Monaco, Consolas

Illustrations & Icon Assets

To preserve the premium brand aesthetic, all illustration assets and icons must follow these rules:

  • Storyset Illustrations:
    • Style: Strictly use the Rafiki style from Storyset.
    • Colors: Set the primary illustration color to Indigo-500 (#6366f1) to align with the accent theme.
    • Automation URL: SVG downloads should be configured using the following URL query pattern to automate color replacements: https://storyset.com/download?filename=[SLUG]-rafiki.svg&color=6366F1
  • Icon tokens:
    • Style constraint: Use Material UI Rounded (@mui/icons-material/...Rounded). No other icon families (FontAwesome, Lucide, etc.) or raw emojis are allowed in layouts.
    • Color styling: Standard icons are styled with the utility class text-indigo-500/50. Accent or interactive icons use text-indigo-500.
    • Heading constraint: Never add icons or emojis to titles and markdown headers. Emojis and icons must only be used in custom callouts, badges, or inline indicators.
GitHub
Terminal
Arrow
AutoFix

Accessibility & WCAG Standards

We build with accessibility in mind, targeting compliance with WCAG 2.1 AA guidelines:

  • Color Contrast: Our primary accent color, Indigo-500 (#6366f1), has a verified contrast ratio of 4.56:1 against the light-mode surface and 6.2:1 against the dark-mode surface. This ensures it meets the standard contrast requirement (minimum 4.5:1) for normal size text.
  • Anti-Aliased Typography: Lightweight font styles (font-light) are only used at text sizes of text-base (16px) or larger. For smaller text sizes (e.g. text-xs or text-sm), regular or medium weights are utilized to ensure anti-aliased font rendering remains readable against the background.
  • Semantic Structure: The site utilizes standard HTML5 landmark tags (<main>, <article>, <nav>, <header>, <footer>, <section>). Headers are nested in a logical sequence (h1 through h4) to ensure smooth navigation for users using assistive technologies.
  • Keyboard Navigation & Focus: Custom focus indicators are configured with focus:ring-2 focus:ring-indigo-500 focus:outline-none. Keyboard users can navigate all interactive pages sequentially.
Light Mode Contrast
4.56:1AA Pass
Dark Mode Contrast
6.2:1AA Pass

Content Architecture (MD, MDX & Frontmatter)

This project manages content as a first-class citizen using structured Markdown formats:

  • Markdown (MD): Used for writing linear documentation and simple text.
  • MDX (Markdown with JSX): Extends standard markdown, enabling the importing and rendering of interactive React components directly in the document context.
  • Frontmatter: The YAML block defined at the beginning of each page. It supplies key metadata parsed at compile-time: 
    ---
searchable: true
title: Page Title
subtitle: Description line shown under title
description: SEO Meta description tag
date: "YYYY.MM.DD"
---
    • searchable: Determines if the page should be crawled and indexed by the Pagefind search engine.
    • title & subtitle: Custom headings injected into the layout header and sidebar list.
    • description: Configures the <meta name="description"> header tag for SEO.
    • date: Publishes publication date, formatting the index order.

Typography Classes

These global CSS utility classes are defined in styles/globals.css and can be applied directly to HTML elements:

Heading 1 (.t1)

Luis Kobayashi

Heading 2 (.t2)

Selected Readings

Subheading (.t3)

Exploring the intersection of design systems and agentic code.

Body Text (.p1)

This is the standard reading style for text elements. It uses a light-weight gray text to ensure high readability without visual strain.

Lead Text (.p2)

This is the lead reading style, perfect for introductions and callout headings.

Secure Media & Asset Tokens

Confidential assets such as custom case study graphics, interactive 3D panels, or private videos are locked using HMAC signing tokens:

  • Secure Wrapper Components: All secure media must render using <SignedImage />, <SignedVideo />, or <SignedPanoramaViewer />.
  • HMAC URL Signing API: These components interact with /api/sign-url to obtain authenticated, timed links verified by server-side secrets. This prevents unauthorized direct access and external hotlinking of portfolio media.

Component Patterns

This section displays live interactive instances of the site’s custom components:

Used for showcasing case studies and core projects.

Vertical Card (horizontal={false})

<FeaturedTopic
  title="Global Design Maturity"
  subtitle="Scaling the Dometic Design System across Americas, EMEA & APAC"
  body={<p>Unifying web, mobile, embedded, and physical interfaces under a single visual and code architecture.</p>}
  media={[{ src: context_pipe, alt: "Design System Pipeline" }]}
  href="/design/design-ops/dometic-design-system"
  horizontal={false}
/>
Design System Pipeline

Global Design Maturity

Design / Leadership

Scaling the Dometic Design System across Americas, EMEA & APAC

Unifying web, mobile, embedded, and physical interfaces under a single visual and code architecture.

Read more

Horizontal Card (horizontal={true})

<FeaturedTopic
  title="The Studio of Two"
  subtitle="R&D Lab on human-agent symbiosis"
  body={<p>Exploring how structured context pipelines can optimize code translation and prevent hallucinations in agentic design.</p>}
  media={[{ src: studio_icon, alt: "Studio of Two logo" }]}
  href="/studio/studio-of-two"
  horizontal={true}
/>
Studio of Two logo

The Studio of Two

Studio

R&D Lab on human-agent symbiosis

Exploring how structured context pipelines can optimize code translation and prevent hallucinations in agentic design.

Read more

2. Inline Callout (InlineCallout)

Used to link to related articles, case studies, or external resources with appropriate semantic icons.

<InlineCallout href="/design/leadership" type="article"><strong>Design Leadership</strong>: Our roadmap for high-maturity design operations.</InlineCallout>
<InlineCallout href="/notions/2026-05-15-context-design" type="concept"><strong>Context Design</strong>: Structuring data pipelines for AI.</InlineCallout>
<InlineCallout href="/studio/studio-of-two" type="system"><strong>The Studio of Two</strong>: Manifesto on cognitive partnership.</InlineCallout>
<InlineCallout href="/studio/studio-of-two/studio_setup" type="setup"><strong>Studio Setup</strong>: Configurations and templates.</InlineCallout>
Design Leadership: Our roadmap for high-maturity design operations.
Context Design: Structuring data pipelines for AI.
The Studio of Two: Manifesto on cognitive partnership.
Studio Setup: Configurations and templates.

3. Glassmorphic R&D Callout Box

Used to call out code examples or technical highlights in case studies.

<div className="p-5 my-6 rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/40">
  <p className="text-sm font-semibold text-indigo-600 dark:text-indigo-400 mb-2 uppercase tracking-wider">Aria-Live Announcement</p>
  <p className="text-sm text-gray-600 dark:text-gray-300">This container has high contrast (5.8:1 in light mode, 6.2:1 in dark mode) and is fully accessible to all users.</p>
</div>

Aria-Live Announcement

This container has high contrast (5.8:1 in light mode, 6.2:1 in dark mode) and is fully accessible to all users.

4. Repository References (SourceCallout)

Used for displaying code repositories or package dependencies.

<SourceCallout 
  type="github" 
  label="luismichio/homepage" 
  href="https://github.com/luismichio/homepage"
/>
githubluismichio/homepage

5. Telemetry Stats Counter (IncinerationCounter)

Used to pull and display real-time sifting compression stats from the /api/sift endpoint.

<IncinerationCounter mode="header" />

Used to render cross-fade image carousels with custom animated transition values.

<SlideShow
  configComp="w-full h-190 rounded-xl overflow-hidden relative bg-gray-100 dark:bg-gray-800"
  gallery={[
    { alt: "Design System", image: context_pipe, css: { reset: "opacity-0 scale-95 duration-1000", target: "opacity-100 scale-100 duration-1000" } },
    { alt: "Studio of Two", image: studio_icon, css: { reset: "opacity-0 scale-95 duration-1000", target: "opacity-100 scale-100 duration-1000" } }
  ]}
  duration={3000}
  effect="object-cover w-full h-full"
  duraAnima="transition-all duration-1000 ease-in-out"
/>
Design System

7. 3D Panorama Viewer (PanoramaViewer and SignedPanoramaViewer)

Used for rendering interactive 3D equirectangular panorama graphics using Three.js.

<SignedPanoramaViewer path="/pa/misc/UE4_Demo_360.png" height={600} />