# AWS Builder Center — Design System
> A community platform for AWS builders to share solutions, access tools, and connect with product teams.
- **Canonical:** https://uiuxskills.com/library/aws-builder-center
- **Source:** https://builder.aws.com/
- **Category:** Developer Tools & IDEs
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 80%
- **License:** MIT
- **Last updated:** 2026-09-30T04:59:20.670Z

---

---
version: alpha
name: AWS Builder Center
tagline: Your community starts here.
description: >-
  A community platform for AWS builders to share solutions, access tools, and connect with product
  teams.
tone: professional, technical, community-driven
color-scheme: light
colors:
  primary: "#C95100"
  secondary: "#161D26"
  accent: "#A855F7"
  background: "#FFFFFF"
  surface: "#F8F9FA"
  surface-container: "#F3F4F6"
  on-primary: "#FFFFFF"
  on-surface: "#0F141A"
  outline: "#E5E7EB"
  link: "#0073BB"
  error: "#DC2626"
typography:
  display-lg:
    fontFamily: Amazon Ember
    fontSize: 40px
    fontWeight: 700
    lineHeight: "1.2"
    letterSpacing: "-0.02em"
  display-md:
    fontFamily: Amazon Ember
    fontSize: 32px
    fontWeight: 700
    lineHeight: "1.25"
    letterSpacing: "-0.01em"
  headline-lg:
    fontFamily: Amazon Ember
    fontSize: 24px
    fontWeight: 700
    lineHeight: "1.3"
    letterSpacing: 0em
  headline-md:
    fontFamily: Amazon Ember
    fontSize: 21px
    fontWeight: 700
    lineHeight: "1.35"
    letterSpacing: 0em
  headline-sm:
    fontFamily: Amazon Ember
    fontSize: 18px
    fontWeight: 600
    lineHeight: "1.4"
    letterSpacing: 0em
  body-md:
    fontFamily: Amazon Ember
    fontSize: 14px
    fontWeight: 400
    lineHeight: "1.5"
    letterSpacing: 0em
  body-sm:
    fontFamily: Amazon Ember
    fontSize: 12px
    fontWeight: 400
    lineHeight: "1.5"
    letterSpacing: 0em
  label-md:
    fontFamily: Amazon Ember
    fontSize: 14px
    fontWeight: 600
    lineHeight: "1.2"
    letterSpacing: 0.02em
  label-sm:
    fontFamily: Amazon Ember
    fontSize: 11px
    fontWeight: 600
    lineHeight: "1.2"
    letterSpacing: 0.05em
rounded:
  sm: 4px
  md: 8px
  lg: 12px
  xl: 16px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.sm}"
    padding: 8px 16px
  button-primary-hover:
    backgroundColor: "#232F3E"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.sm}"
    padding: 8px 16px
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.secondary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.sm}"
    borderColor: "{colors.outline}"
  card:
    backgroundColor: "{colors.background}"
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.background}"
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  input-field:
    backgroundColor: "{colors.background}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    borderColor: "#656871"
  input-field-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    borderColor: "{colors.link}"
  link:
    textColor: "{colors.link}"
    typography: "{typography.body-md}"
  link-hover:
    textColor: "#005A9C"
    typography: "{typography.body-md}"
  badge:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 2px 6px
  badge-new:
    textColor: "{colors.accent}"
    typography: "{typography.label-sm}"
  badge-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
  badge-error:
    backgroundColor: "{colors.error}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
  sidebar-item-active:
    backgroundColor: "#E9D5FF"
    textColor: "#6B21A8"
    typography: "{typography.label-md}"
    rounded: "{rounded.sm}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  card-default:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    padding: 16px
motion:
  duration-short: 200ms
  duration-medium: 300ms
  easing-standard: cubic-bezier(0.25, 0.1, 0.25, 1)
elevation:
  sm: 0 1px 2px rgba(0, 0, 0, 0.05)
  md: 0 4px 6px rgba(0, 0, 0, 0.05)
  lg: 0 10px 15px rgba(0, 0, 0, 0.05)
---

## Overview

AWS Builder Center is a structured, developer-focused community platform designed for technical professionals to collaborate, share solutions, and engage with product teams. The visual language balances a highly functional, information-dense layout with subtle developer-centric accents like code-inspired typography and vibrant highlights. The aesthetic is clean, technical, and highly organized to facilitate rapid scanning and technical utility.

## Colors

The color strategy relies on a clean, light-themed foundation with high-contrast functional elements and targeted brand accents. A dark slate tone anchors primary actions, while the canonical AWS orange and a vibrant purple are applied sparingly to draw attention to brand identity and active states.

*   **Primary (`{colors.primary}`) (#C95100)**: AWS Orange, used sparingly as a brand identifier and primary accent.
*   **Secondary (`{colors.secondary}`) (#161D26)**: Dark Slate/Navy used for primary buttons, active toggles, and high-contrast interface elements.
*   **Accent (inferred) (`{colors.accent}`) (#A855F7)**: Vibrant purple used for code syntax highlights, active navigation states, and "New" badges.
*   **Background (`{colors.background}`) (#FFFFFF)**: Clean white background for the main content area and primary surfaces.
*   **Surface (inferred) (`{colors.surface}`) (#F8F9FA)**: Very light gray used for secondary container backgrounds and sidebars.
*   **Surface-container (inferred) (`{colors.surface-container}`) (#F3F4F6)**: Light gray used for badges, inactive toggles, and subtle component backgrounds.
*   **On-primary (`{colors.on-primary}`) (#FFFFFF)**: White text used on primary orange and secondary dark slate backgrounds.
*   **On-surface (`{colors.on-surface}`) (#0F141A)**: Dark charcoal text used for primary body copy and headings to ensure high readability.
*   **Outline (inferred) (`{colors.outline}`) (#E5E7EB)**: Light gray border color used to separate sections, cards, and sidebar items.
*   **Link (`{colors.link}`) (#0073BB)**: AWS Blue used for inline hyperlinks and interactive text elements.
*   **Error (inferred) (`{colors.error}`) (#DC2626)**: Standard red used for error states and destructive actions.

## Typography

The typography system uses the Amazon Ember font family exclusively to maintain brand consistency across all technical and community contexts. It establishes a clear hierarchy ranging from code-like display styles to highly readable body copy.

*   **display-lg (`{typography.display-lg}`)**: Amazon Ember, bold. Used for the main hero headline with code-like syntax styling.
*   **display-md (inferred) (`{typography.display-md}`)**: Amazon Ember, bold. Used for secondary display titles and major section headers.
*   **headline-lg (inferred) (`{typography.headline-lg}`)**: Amazon Ember, bold. Used for primary section titles like 'Spotlight' and 'Explore'.
*   **headline-md (`{typography.headline-md}`)**: Amazon Ember, bold. Used for article titles and card headings.
*   **headline-sm (inferred) (`{typography.headline-sm}`)**: Amazon Ember, semi-bold. Used for smaller card titles and sidebar section headers.
*   **body-md (`{typography.body-md}`)**: Amazon Ember, regular. The default body text size used for descriptions, posts, and general copy.
*   **body-sm (inferred) (`{typography.body-sm}`)**: Amazon Ember, regular. Used for secondary metadata, timestamps, and helper text.
*   **label-md (inferred) (`{typography.label-md}`)**: Amazon Ember, semi-bold. Used for button labels, navigation links, and active states.
*   **label-sm (inferred) (`{typography.label-sm}`)**: Amazon Ember, semi-bold. Used for small badges, tags, and micro-labels.

## Layout

The layout is built on a multi-column grid system featuring a fixed left navigation sidebar, a central main content feed, and a right-hand sidebar for community spaces and highlights. Spacing relies on a 4px base unit (ranging from `{spacing.xs}` to `{spacing.2xl}`) to maintain a tight, information-dense alignment. The observed section order from top to bottom is nav, hero, spotlight, explore, and footer. The hero composition pattern features a left-aligned, code-like headline using `{typography.display-lg}`, a brief description, and a single primary CTA button set against a clean `{colors.background}`. For responsive behavior, the left navigation collapses into a hamburger menu, and the multi-column grid stacks vertically on smaller viewports.

## Elevation & Depth

Depth is kept minimal, relying primarily on flat borders and subtle background color shifts to separate sections.
*   `elevation.sm` (inferred) — Used for subtle card lift and minor interactive elements.
*   `elevation.md` (inferred) — Applied to dropdown menus, popovers, and standard elevated cards.
*   `elevation.lg` (inferred) — Reserved for modals, drawer overlays, or high-priority floating containers.
Flat borders using `{colors.outline}` and container background shifts using `{colors.surface}` are preferred over heavy shadows to maintain a clean interface.

## Shapes

The design utilizes a deliberate mix of sharp and slightly rounded corners to balance technical precision with usability. Small interactive elements like buttons and badges use a tight 4px radius (`{rounded.sm}`) to maintain a crisp, technical appearance. Larger containers, such as input fields, cards, and spotlight images, employ a softer 8px (`{rounded.md}`) to 12px (`{rounded.lg}`) radius to create a professional yet approachable feel. Fully rounded shapes (`{rounded.full}`) are strictly reserved for user avatars and pill-style toggles.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`

### button-primary
The primary action button uses `{colors.secondary}` as its background with `{colors.on-primary}` text. It is styled with `{typography.label-md}` and a tight `{rounded.sm}` corner radius. Use this for the main call-to-action in any section, such as joining the community or submitting a form.

### button-secondary
The secondary button features a transparent background with `{colors.secondary}` text and a border defined by `{colors.outline}`. It shares the `{typography.label-md}` and `{rounded.sm}` properties of the primary button. Use this for secondary or alternative actions within a group.

### card
The standard card container uses `{colors.background}` with a border of `{colors.outline}` and a corner radius of `{rounded.md}`. It provides a structured container for feed items, articles, and spotlight features.

### input-field
Input fields use `{colors.background}` with a border color of `#656871` and a corner radius of `{rounded.md}`. When focused, the border transitions to `{colors.link}` to provide clear interactive feedback. Use this for search inputs, form fields, and text areas.

### badge
Badges are small metadata labels using `{colors.surface-container}` as a background and `{colors.on-surface}` for text. They feature a `{rounded.sm}` radius and tight padding. Use these to display category tags, content types, or status indicators.

### sidebar-item-active
Active items in the navigation sidebar use a soft purple background (`#E9D5FF`) with dark purple text (`#6B21A8`) and a `{rounded.sm}` radius. Use this component exclusively to indicate the currently active section in the sidebar navigation.

### divider
The divider is a 1px high line colored with `{colors.outline}`. Use this component to separate feed items, sidebar sections, and distinct content groups within a page.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.secondary}` for primary actions like the `{components.button-primary}`. | Do not use bright primary colors like `{colors.primary}` for body text; reserve it for brand accents. |
| Apply `{colors.accent}` sparingly for code-like syntax highlights and active states like `{components.sidebar-item-active}`. | Avoid using `{colors.accent}` as a background color for large text blocks to prevent contrast issues. |
| Ensure all text elements use `{typography.display-lg}` or other levels of the Amazon Ember font family for brand consistency. | Never mix font families; always default to Amazon Ember. |
| Use `{rounded.sm}` for buttons and small badges to maintain a crisp, technical appearance. | Do not use `{rounded.full}` on standard buttons; reserve it strictly for avatars or pill toggles. |
| Separate feed items and sidebar sections using a `{components.divider}` with `{colors.outline}`. | Avoid applying heavy shadows; stick to `{elevation.sm}` or flat borders for standard cards. |
| Use `{colors.link}` for inline hyperlinks and interactive text elements. | Do not exceed `{spacing.lg}` for internal card padding to maintain high information density. |
| Style active sidebar navigation items using `{components.sidebar-item-active}` to provide clear visual feedback. | Do not use `{colors.primary}` for active sidebar states; reserve it for brand-level highlights. |
| Apply `{rounded.md}` or `{rounded.lg}` to `{components.card}` components to soften the layout. | Do not use sharp corners (`0px` or `{rounded.sm}`) on large content containers like `{components.card}`. |

## Content Style

CTA labels must be imperative, action-oriented, and direct. They should ideally be short, often limited to two words (e.g., "Join now", "Sign in"), and styled using `{typography.label-md}` to prompt immediate user engagement.

Headings must maintain a technical, welcoming, and developer-centric tone. The platform frequently employs code syntax metaphors in its main headlines (e.g., "if building: start_here()") using `{typography.display-lg}` to resonate with the engineering community.

Copy density is moderate to high. Technical information, articles, and community posts are structured with clear headings, metadata, and tags to facilitate quick scanning. Paragraphs are kept concise, separated by `{spacing.md}` to maintain readability without sacrificing information density.

## Imagery & Icons

The imagery style is mixed, combining pixel art, technical diagrams, terminal screenshots, and vibrant gradient graphics to appeal to a developer audience. Icons are clean, stroke-based, and highly functional, aligning with the technical aesthetic. Spotlight images and illustrations employ a softer radius of `{rounded.md}` or `{rounded.lg}` to integrate smoothly with the card layouts.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for AWS Builder Center, a professional, technical, and community-driven developer platform. Match its minimal, information-dense, accessible aesthetic. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every visual value by token name — `{colors.primary}`, `{typography.body-md}`, `{rounded.sm}` — never hardcode hex values, pixel sizes, or font names.
2. Render only the components listed under `components:` (`button-primary`, `card`, `badge-new`, `sidebar-item-active`, etc.). Do not invent variants the spec does not define.
3. Follow the Layout notes: three-column structure (fixed left sidebar, center feed, right sidebar) using the 4px base spacing scale `{spacing.xs}` through `{spacing.2xl}`. Internal card padding must not exceed `{spacing.lg}`.
4. Apply shape rules from the Shapes notes: `{rounded.sm}` for buttons and badges; `{rounded.md}` to `{rounded.lg}` for cards, inputs, and spotlight images. Never apply `{rounded.full}` to standard buttons.
5. Treat the Do's and Don'ts as authoritative. If a user request conflicts with them, surface the conflict explicitly before proceeding.

## Output contract

**Must:**
- Use tokens by name for every color, type scale, radius, and spacing value.
- Cover hover, focus, and disabled states for any interactive component the spec defines (e.g., `button-primary-hover`, `input-field-focus`, `link-hover`).
- Apply `{colors.secondary}` as the background for primary actions; `{colors.accent}` only for code highlights, active nav states, and `badge-new`.
- Maintain contrast ≥ 4.5:1 for all body text using `{colors.on-surface}` on `{colors.background}` or `{colors.surface}`.
- Write CTAs in the imperative two-word style defined in Voice and Content (e.g., "Join now"). Do not expand or alter existing copy.

**Must NOT:**
- Invent colors, fonts, radii, or spacing values outside the spec.
- Use `{colors.accent}` as a large block background color.
- Apply `{colors.primary}` to body text.
- Mix in any font family other than Amazon Ember.
- Add heavy shadows; use flat `{colors.outline}` borders or `{components.divider}` for separation.
- Rewrite page copy, alter navigation items, or change information hierarchy as a side effect of applying tokens.

## When in doubt
- If a required value is absent from the spec, ask the user before inventing one.
- For ambiguous backgrounds, default to `{colors.surface}` for containers and `{colors.background}` for primary content areas.
- Compose new UI from existing listed components before introducing any new token or pattern.
- For unspecified breakpoints, use mobile-first with a single breakpoint at 768px; apply the three-column layout above 1024px per the Layout notes.
- Tokens noted as inferred from a visual render are approximations; if an authoritative theme file or Storybook source exists, those values take precedence.