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.ai 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.

explainx.ainewsletter3.5k

workshops ↗

Tata 1mg — DESIGN.md | explainx.ai | explainx.ai

DESIGN.md (markdown body)

name	Tata 1mg
colors	background: "#ffffff" foreground: "#212121" brand: "#ff6f61" # 1mg Orange muted: "#7c7c7c" border: "#f0f0f0" card: "#ffffff" accent: "#486aae" # Tata Blue secondary: "#10b190" # Healthcare Teal dark: background: "#0a0a0a" foreground: "#f5f5f5" muted: "#a1a1a1" border: "#2d2d2d" card: "#1a1a1a" accent: "#ff6f61"
typography	fontFamily: sans: "Inter, system-ui, -apple-system, sans-serif" body: fontSize: "14px" lineHeight: "1.5" heading: fontWeight: "600"
rounded	default: "4px" md: "8px" lg: "12px"

Design System: Tata 1mg

Overview

Tata 1mg's design system is "Reliable Health Care." It combines the trustworthy "Tata Blue" with its original healthcare-vibrant orange to create a safe, professional environment for medical needs.

Design Philosophy

Safety & Trust: Uses a professional palette to establish its status as a reliable provider of medicines and lab tests.
Clarity under Pressure: Designed for situations where users might be anxious, prioritizing clear labels, simple navigation, and absolute accuracy.
The "Care" Accent: Uses healthcare-teal (#10B190) and wordmark-orange (#FF6F61) to provide a sense of optimism and healing.
Structured Information: Prioritizes medicine names, dosages, and prices with high-contrast typography.

Colors

1mg Orange (#FF6F61): The signature brand color used for primary actions and wordmarks, representing vitality.
Tata Blue (#486AAE): Introduced after the Tata acquisition to establish a layer of corporate trust and stability.
Healthcare Teal (#10B190): Used for sub-categories, laboratory services, and healthy-living icons.

Typography

Inter: Provides the necessary precision for reading complex medicine names and reports.
Visual Hierarchy: Uses bold weights for prices and primary medicine names to ensure fast verification.

Components

Medicine Search: A prominent white bar with integrated category filters for quick access to prescriptions.
Lab Test Cards: Structured units with integrated "Health Check" badges and clear booking actions.
The "Safety" Badge: A small, green-themed icon used to certify the authenticity of medicines.

Visual Effects

Clean Grids: Organizes thousands of medical products into a highly structured, sterile-feeling grid.
Subtle Highlights: Uses light-orange or light-blue backgrounds for special offers and health tips.
Fast Upload States: A clear, responsive interaction for uploading prescriptions.

Usage

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

Common questions

What is Tata 1mg on explainx.ai?: Tata 1mg's design system is "Reliable Health Care." It combines the trustworthy "Tata Blue" with its original healthcare-vibrant orange to create a safe, professional environment for medical needs. 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.ai 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 →