explainx.ainewsletter3.4k
Back to designs

DESIGN.md · explainx registry

Humane

Humane's design system is "The Invisible Interface." Designed for the AI Pin, it focuses on projection-based interactions, cosmic black foundations, and a "laser-sharp" visual language that prioritizes voice and gesture.

Design System#design#ui#ux#template
Get a custom design.md for your product
DESIGN.md (markdown body)
name
Humane
colors
background: "#000000" foreground: "#ffffff" brand: "#ffffff" muted: "#333333" border: "#1a1a1a" card: "#0a0a0a" accent: "#ff0000" # Laser Red dark: background: "#000000" foreground: "#ffffff" muted: "#444444" border: "#1a1a1a" card: "#0a0a0a" accent: "#ff0000"
typography
fontFamily: sans: "Inter, system-ui, -apple-system, sans-serif" body: fontSize: "14px" lineHeight: "1.4" heading: fontWeight: "600" letterSpacing: "0.05em" # Wide tracking for "cosmic" feel
rounded
default: "0px" # Humane hardware/UI is very sharp or uses perfect circles md: "4px" full: "9999px"

Design System: Humane

Overview

Humane's design system is "The Invisible Interface." Designed for the AI Pin, it focuses on projection-based interactions, cosmic black foundations, and a "laser-sharp" visual language that prioritizes voice and gesture.

Design Philosophy

  1. Presence over Screens: The UI is designed to exist in the real world (via projection) rather than on a traditional screen, requiring high-contrast, simple graphics.
  2. Cosmic Minimalism: Uses a "Void" black foundation and pure white elements to create a futuristic, "out-of-this-world" feel.
  3. Laser Precision: Employs "Laser Red" (#FF0000) sparingly as a signal for recording, focus, and critical status.
  4. Gesture-Friendly: Components are large, circular, or center-aligned to be easily readable and interactable via hand gestures.

Colors

  • Cosmic Black (#000000): The primary canvas, representing the "hidden" nature of the device.
  • Laser Red (#FF0000): The only high-saturation accent, used for the recording indicator and focus states.
  • Lunar White (#FFFFFF): Used for all primary text and iconography to ensure maximum visibility during projection.

Typography

  • Inter: A neutral, clean sans-serif that ensures clarity even when projected onto varying surfaces.
  • Wide Tracking: Uses generous letter-spacing in headers to create a "premium," futuristic voice.

Components

  • The Laser Canvas: A center-focused area for projected graphics, featuring large icons and minimal text.
  • The "Trust Light": A signature, multi-colored LED indicator on the hardware that is reflected in UI status bars.
  • Circular Menu: A gesture-based menu that appears as a ring of icons around the center of the palm.

Visual Effects

  • Glow & Diffraction: Projected elements often feature a subtle "diffraction" or "halo" effect to simulate light.
  • Slow Pulses: Uses calm, slow animations for "Processing" or "Thinking" to reduce user anxiety.
  • Stark Transitions: Interactions are binary and fast—elements either exist or they don't, mimicking the behavior of a laser.

Usage

  1. Copy DESIGN.md into your project or paste it into your IDE agent chat.
  2. Ask your assistant to follow the tokens for color, typography, spacing, and component styling.
  3. When collaborating, share the file directly—or tap “Copy page link” below so teammates open the same snapshot.

Common questions

What is Humane on explainx.ai?
Humane's design system is "The Invisible Interface." Designed for the AI Pin, it focuses on projection-based interactions, cosmic black foundations, and a "laser-sharp" visual language that prioritizes voice and gesture. Listed under category “Design System”. Explainx.ai mirrors the full DESIGN.md document so assistants can cite stable tokens and prose in one place.
What is DESIGN.md?
DESIGN.md blends YAML design tokens—colors, typography, spacing, radii—with markdown that explains intent. Google documents this pattern for agent-driven UI work under Stitch (stitch.withgoogle.com).
How do I use this with ChatGPT, Cursor, Claude Code, or another IDE agent?
Paste the DESIGN.md into your repo root or attach it to the agent conversation, then ask explicitly for layouts, spacing, palette, type scale, and component tone that follow the document. Refresh from this listing when upstream authors publish changes.
Where is the source repo?
Maintainers link to github.com/whyashthakker/design-md-templates-skills. Community listings on explainx.ai may reference popular aesthetic names for inspiration; that does not imply official endorsement by any trademark holder.
How current is this DESIGN.md?
Explainx snapshots the file at import time. Recorded last update on this listing: May 8, 2026.
Need a fresh DESIGN.md from scratch?
Use the ExplainX DESIGN.md generator to describe your product and audience; it returns Stitch-style YAML plus narrative guidance you can publish or submit to the registry afterward.

Still exploring the format? Browse the full DESIGN.md registry or draft a new system with our DESIGN.md generator.

Community listing for AI design workflows—not necessarily affiliated with any brand referenced in the name or summary. For context on the format, see Google Stitch.

Reference →DESIGN.md generator →Skills registry →

List Your Design.md

Share your design system with AI agents worldwide

GET_STARTED →