explainx.ainewsletter3.4k
Back to designs

DESIGN.md · explainx registry

Amazon

Amazon Business System

A high-density, grid-based system designed for professional procurement with a focus on scannability and a corporate aesthetic.

Design System#design#system#corporate#typography#components#grid
Get a custom design.md for your product
DESIGN.md (markdown body)
name
Amazon Business System
version
2.1.0
colors
primary: "#2162a1" # Corporate Ocean Blue (Buttons/Links) secondary: "#084a7e" # Deep Navy (Active/Hover states) accent: "#e55d16" # Action Orange (Highlights/Nudges) status-success: "#0b7b3c" # Dark Green status-danger: "#d6001b" # Deep Red surface-light: "#f6f6f9" # Section background border-main: "#c6c6cf" # Default borders
typography
fontFamily: "Amazon Ember, Arial, sans-serif" baseSize: "16px" display: fontFamily: "Ember Modern Display Standard" weight: 700
rounded
input: "4px" button: "100px" # Pill-shaped utility buttons card: "8px"

Design System: Enterprise Utility

Overview

A high-density, grid-based system designed for professional procurement. The design prioritizes scannability, multi-column layouts, and a "no-gimmick" corporate aesthetic.

Colors

  • The Blue Scale: Primary blue (#2162a1) is for action. Secondary blue (#084a7e) provides depth for hovering or secondary navigation.
  • Business Neutral: Extensive use of #f6f6f9 (Cloud) and #e8eaeb (Tin) for background layering to separate dense data fields without using heavy lines.
  • Alert Tones: Status colors are saturated and deep (not neon) to maintain a professional "industrial" feel.

Typography

  • Primary Brand Font: Amazon Ember.
  • Display Font: Ember Modern Display Standard is used strictly for hero headings and major category titles.
  • Information Density:
    • Body text is 14px-16px.
    • Data labels and metadata use 12px (Small).
    • Line height is fixed at 1.5rem to ensure readability in dense lists.

Components

  • Buttons:
    • Primary: Pill-shaped (border-radius: 100px), blue background, white text.
    • Secondary: Pill-shaped, white background with #92929d border.
  • Quadrants & Cards:
    • Hero sections use a 4-tile quadrant grid.
    • Cards have a subtle 1px border (#c6c6cf) and no elevation (flat design).
  • Navigation (Belt & Rail):
    • Persistent top "Belt" with a dark corporate background.
    • Use of the "Hamburger" icon for deep category hierarchy.

Layout & Spacing

  • Grid: 12-column fluid grid.
  • Container: Max-width of 1400px for large desktop screens to accommodate enterprise dashboards.
  • Vertical Rhythm: 20px standard spacing between cards and components to maintain a tight, efficient UI.

Do's and Don'ts

  • DO: Use "Sunken" text (line-clamp) for long product titles to keep grid rows even.
  • DO: Rely on geometric SVG icons (24px) for category identification.
  • DON'T: Use soft shadows or blurred gradients.
  • DON'T: Use aggressive "retail" bright oranges; stick to the muted blaze orange (#e55d16) for business utility.

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 Amazon on explainx.ai?
A high-density, grid-based system designed for professional procurement with a focus on scannability and a corporate aesthetic. 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/Amazon/business-system. 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.

DESIGN.md generator →Skills registry →

List Your Design.md

Share your design system with AI agents worldwide

GET_STARTED →