A high-density, grid-based system designed for professional procurement with a focus on scannability and a corporate aesthetic.
Real data. Real impact.
Emerging
Developers
Source: https://github.com/Amazon/business-system?ref=explainxPer week
Excellent
Skills give you superpowers. Install in 30 seconds.
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"
A high-density, grid-based system designed for professional procurement. The design prioritizes scannability, multi-column layouts, and a "no-gimmick" corporate aesthetic.
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.
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.
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.
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: 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.
proprietary
4,600+ AI skills, agents & workflows. Install in 60 seconds. Part of the Torly.ai family.
© 2026 Torly.ai. All rights reserved.