Amazon

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.