---
title: "Ameba design system"
variant: extended
source: https://www.ameba.ai/
captured_at: 2026-10-12
theme: light
industry: ai
generator: Design DNA (https://four.wiralomi.com/style/ameba-ai)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Ameba · Design System

> Quietly confident AI, framed in midnight blue.

**Theme:** light · **Industry:** ai · **Source:** https://www.ameba.ai/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Ameba pairs expansive midnight-blue storytelling with crisp white product sections to introduce its AI workforce for supply-chain teams. Restrained electric-blue CTAs, technical mono labels, and vivid workflow mockups make the page feel both operational and considered.

## North star

Alternate calm, high-contrast story bands with spacious white product walkthroughs, using blue only to signal action or emphasis.

## Overview

The visual system alternates deep navy storytelling bands with generous white product-explanation sections, giving the long homepage a steady, legible rhythm. Midnight Ink (#00052e) carries the hero, security, and closing CTA; White Canvas (#ffffff) gives process and FAQ content room to breathe. Electric Blue (#0428cb) is reserved for primary actions, links, and selected workflow states rather than broad decoration. Pale Lavender (#efeff7) distinguishes the customer proof band and soft interface surfaces. F37 Bolton supplies the expressive, lightly tracked display headings, while Open Sauce Sans keeps explanatory copy and controls practical. IBM Plex Mono marks navigation and small uppercase labels, adding an operational, systems-oriented tone. Product imagery is mostly composed interface mockups in rounded, colored frames, with a customer video adding a human moment. Spacious section gaps, centered dark-band copy, and alternating two-column feature layouts keep the complex product story approachable.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Midnight Ink | `#00052e` | `--color-midnight-ink` | brand | Dominant dark canvas for the hero, dark story bands, headings, and inverse text. |
| White Canvas | `#ffffff` | `--color-white-canvas` | surface | Main page canvas and clean surfaces for process content, FAQ, navigation, and footer. |
| Electric Blue | `#0428cb` | `--color-electric-blue` | accent | Primary demo buttons, active workflow cues, links, and keyboard focus emphasis. |
| Pale Lavender | `#efeff7` | `--color-pale-lavender` | surface | Customer testimonial band, soft cards, and subtle interface backgrounds and dividers. |
| Muted Slate | `#6b6b83` | `--color-muted-slate` | semantic | Quiet supporting copy, especially footer and secondary informational text. |
| Indigo Badge | `#2d3474` | `--color-indigo-badge` | accent | Small circular interface badges and occasional compact control details. |
| Soft Graphite | `#4f5166` | `--color-soft-graphite` | semantic | Secondary body copy, accordion content, and subdued icon or button text. |
| Blue Depth | `#06105a` | `--color-blue-depth` | brand | Inner glow in the dark radial hero gradient, not a general-purpose flat fill. |
| Lavender Hairline | `#e9e9f3` | `--color-lavender-hairline` | neutral | Fine borders around controls, cards, and footer details. |
| Silver Mist | `#b2b3c0` | `--color-silver-mist` | neutral | Low-emphasis small text and secondary details within interface content. |
| Pale Pewter | `#cccdd5` | `--color-pale-pewter` | neutral | Subdued interface text and low-priority details on light surfaces. |
| Night Charcoal | `#171a2b` | `--color-night-charcoal` | neutral | Dark text inside input and product-interface mockup content. |
| Cool Gray | `#8c92a3` | `--color-cool-gray` | neutral | Secondary text and understated control labels. |
| Cloud Border | `#f8f8fb` | `--color-cloud-border` | surface | Very light card edging and quiet surface separation. |
| Slate Charcoal | `#3a3f4f` | `--color-slate-charcoal` | neutral | Muted text and secondary button details in interface areas. |
| Deep Indigo | `#0d1239` | `--color-deep-indigo` | brand | A secondary dark section surface, used for a compact transition band. |

### Semantic aliases

`--color-canvas` → `#ffffff` (White Canvas) · `--color-surface` → `#00052e` (Midnight Ink) · `--color-surface-2` → `#efeff7` (Pale Lavender) · `--color-surface-3` → `#0d1239` (Deep Indigo) · `--color-text` → `#00052e` (Midnight Ink) · `--color-text-muted` → `#6b6b83` (Muted Slate) · `--color-text-subtle` → `#4f5166` (Soft Graphite) · `--color-border` → `#efeff7` (Pale Lavender) · `--color-accent` → `#0428cb` (Electric Blue) · `--color-accent-2` → `#2d3474` (Indigo Badge) · `--color-on-accent` → `#ffffff` (White Canvas)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#00052e` | `#ffffff` | 19.79:1 | AAA |
| `#00052e` | `#efeff7` | 17.3:1 | AAA |
| `#00052e` | `#0d1239` | 1.1:1 | fail |
| `#6b6b83` | `#ffffff` | 5.18:1 | AA |
| `#6b6b83` | `#00052e` | 3.82:1 | AA-large |
| `#6b6b83` | `#efeff7` | 4.53:1 | AA |
| `#6b6b83` | `#0d1239` | 3.49:1 | AA-large |
| `#4f5166` | `#ffffff` | 7.77:1 | AAA |
| `#4f5166` | `#00052e` | 2.55:1 | fail |
| `#4f5166` | `#efeff7` | 6.8:1 | AA |

### Gradients

- `radial-gradient(closest-side, rgb(6, 16, 90) 0%, rgb(0, 5, 46) 85%)`
- `radial-gradient(110% 110% at 26% 14%, rgba(70, 110, 140, 0.35) 0%, rgba(18, 26, 40, 0) 52%), radial-gradient(120% 120% at 84% 92%, rgba(52, 252, 255, 0.08) 0%, rgba(10, 14, 22, 0) 55%), linear-gradient(150deg, rgb(16, 20`
- `radial-gradient(110% 110% at 26% 14%, rgba(58, 82, 190, 0.45) 0%, rgba(20, 34, 112, 0) 52%), radial-gradient(120% 120% at 84% 92%, rgba(52, 252, 255, 0.1) 0%, rgba(10, 22, 72, 0) 55%), linear-gradient(150deg, rgb(9, 21, `
- `radial-gradient(110% 110% at 26% 14%, rgba(46, 180, 120, 0.4) 0%, rgba(8, 60, 42, 0) 52%), radial-gradient(120% 120% at 84% 92%, rgba(52, 252, 200, 0.1) 0%, rgba(4, 30, 20, 0) 55%), linear-gradient(150deg, rgb(4, 22, 14)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Open Sauce Sans | `--font-body` | webfont | 400, 500, 600, 700 | Body copy, buttons, links, and most interface text. | Inter |
| F37 Bolton | `--font-display` | webfont | 400, 500, 600 | Display headings, including the hero and major section titles. | DM Sans |
| IBM Plex Mono | `--font-mono` | webfont | 500, 600 | Navigation, eyebrow labels, and compact technical status text. | IBM Plex Mono |

- **Open Sauce Sans:** Use regular body text and medium controls; keep copy open and readable without decorative tracking.
- **F37 Bolton:** Regular-weight display faces with a gentle negative tracking; use sentence case and clean line breaks.
- **IBM Plex Mono:** Uppercase with generous tracking; keep it small and use for labels, not paragraphs.

### Type scale — Augmented Fourth (ratio ≈ 1.401, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 54px | 400 | 1.3 | -0.008em | — | F37 Bolton | Centered hero headline with deliberate two-line composition. |
| h2 | 40px | 400 | 1.25 | -0.006em | — | F37 Bolton | Major section headlines and centered dark-band statements. |
| h3 | 33px | 400 | 1.3 | -0.006em | — | F37 Bolton | Feature-step titles and secondary product-story headings. |
| h4 | 27px | 400 | 1.35 | -0.004em | — | F37 Bolton | Smaller subsections and supporting interface headings. |
| body | 14px | 400 | 1.63 | 0 | — | Open Sauce Sans | Explanatory paragraphs, testimonial copy, and FAQ answers. |
| caption | 11.5px | 400 | 1.5 | 0 | — | Open Sauce Sans | Compact interface notes, attribution details, and supporting metadata. |
| button | 12px | 500 | 1.33 | 0 | — | Open Sauce Sans | Short CTA and control labels. |
| nav | 13px | 500 | 1.5 | 0.07em | uppercase | IBM Plex Mono | Uppercase primary navigation and compact menu items. |
| link | 14px | 400 | 1.43 | 0 | — | Open Sauce Sans | Inline links and supporting navigation links. |
| eyebrow | 10.5px | 500 | 1.5 | 0.07em | uppercase | IBM Plex Mono | Technical uppercase section labels above headings. |
| code | 10.5px | 500 | 1.5 | 0.07em | uppercase | IBM Plex Mono | Compact uppercase process and system labels. |

## Spacing & layout

- Base unit **8px**, density **spacious**.
- Scale (most used values): 4, 5, 6, 7, 8, 9, 12, 14, 15, 16, 20, 24, 32, 34, 40, 48 px.
- Section rhythm 96px · element gap 8px · card padding — · max content width 1216px.

Use a spacious single-page flow with a centered content width capped at the measured 1216px. The opening and closing dark bands center their copy; white product sections switch between left-aligned headings and alternating two-column text-plus-mockup rows. Keep section transitions generous, with the measured 96px section rhythm and compact 8px element rhythm as references. The page is intentionally low-density: let each workflow step and customer proof block read as its own moment, rather than compressing content into a dashboard-like grid.

## Shape & elevation

- Radius: button `9999px` · input `8px` · card `16px` · media `16px` · badge `50%` · xs `5px` · sm `6px` · md `7px` · lg `8px` · xl `13px` · 2xl `16px` · pill `9999px`
- Shadow `sm` (text): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2`
- Shadow `xl` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(233, 233, 243) 0px 0px 0px 1px, rgba(0, 0, 0, 0.25) 0px 25px 50px -12px`
- Shadow `xl-2` (card): `rgba(5, 12, 48, 0.14) 0px 2px 8px 0px, rgba(5, 12, 48, 0.42) 0px 26px 55px -18px`
- Shadow `hairline` (other): `rgba(20, 22, 50, 0.22) 0px 1px 2px 0px`
- Shadow `xl-3` (media): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.999994 0.0000455678 0.0000200868 / 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.25) 0px 25px 50px`
- Shadow `hairline-2` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(4, 40, 203, 0.12) 0px 0px 0px 4px`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

Most sections remain flat, with contrast and whitespace doing the structural work. Product mockups and selected white cards gain separation through subtle borders and deeper shadows; use rounded corners consistently. Keep controls and text surfaces clean, and avoid adding shadows to broad page bands or headings.

## Imagery

Lead with a dark, softly radial-lit hero and use large product-interface previews to make workflows tangible. Mockups sit in rounded frames that may use navy, green, or burgundy gradients; these frame colors belong to the illustrations, not the core brand palette. A customer testimonial combines a dark quote card with a real person on video. Favor crisp UI screenshots, restrained glow, and realistic human footage over decorative stock imagery.

## Components

### Primary demo CTA

Electric Blue (#0428cb) button with white text, rounded treatment, and concise Open Sauce Sans label; use as the main conversion action.

### Mono navigation

Compact uppercase IBM Plex Mono navigation with generous letter spacing, set directly against the dark header.

### Eyebrow label

Small uppercase IBM Plex Mono label above section headings, often used to identify product steps or compliance content.

### Workflow feature row

Alternating two-column white-section layout pairing concise explanatory copy with a rounded interface preview.

### Product mockup frame

Rounded colored frame around a clean white application panel; use subtle elevation and let the UI remain legible.

### Customer proof block

Pale Lavender (#efeff7) band with a dark quote card, customer video, attribution, and a centered demo action.

### FAQ accordion

White, restrained question list with fine lavender-gray separators, compact plus controls, and readable dark text.

### Measured component styles

- **Primary button** (“Book a demo”): background #0428cb · text #ffffff · radius 8px · padding 12px 32px · 500 16px Open Sauce Sans
- **Secondary button** (“Send reply”): background #2d3474 · text #ffffff · border 1px solid · radius 5.324px · padding 7.3px 11.6px · 600 10.648px Open Sauce Sans · shadow rgba(45, 52, 116, 0.24) 0px 4px 12px 0px
- **Link** (“Ameba raises $7.1M Seed to bolster globa”): transparent background · text #ffffff · radius 0px · padding 0px · 500 12px Open Sauce Sans
- **Input** (“Two weeks before the ex-factory date, ch”): background #fafbfd · text #171a2b · border 1px solid #ededef · radius 7.744px · padding 13.6px 14.5px · 400 11.374px Open Sauce Sans
- **Card** (“CONNECTING YOUR SYSTEMS ERP Email WhatsA”): background #efeff7 · text #00052e · radius 16px · padding 0px · 400 16px Open Sauce Sans · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Badge** (“LZ”): background #eef0f4 · text #6b7180 · radius 50% · padding 0px · 600 11.616px IBM Plex Mono
- **Navigation item** (“PRODUCT COMPANY BLOG SECURITY EN SIGN IN”): transparent background · text #ffffff · radius 0px · padding 0px · 400 16px Open Sauce Sans

## Do

- Alternate deep navy bands with clean white content sections.
- Reserve Electric Blue (#0428cb) for actions and focused states.
- Use mono uppercase labels to signal product and system context.
- Give feature rows generous breathing room and clear reading order.
- Show product workflows in realistic interface mockups.
- Keep headings composed and sentence case.

## Don't

- Do not turn every section into a dark panel.
- Do not use bright blue as a large decorative background.
- Do not crowd the page with dense cards or tiny copy.
- Do not mistake mockup frame gradients for core brand colors.
- Do not apply mono typography to body paragraphs.
- Do not add heavy shadows to broad section backgrounds.

## Agent prompt

Build a new Ameba page with the same calm, operational confidence: alternate Midnight Ink (#00052e) story bands with White Canvas (#ffffff) content sections, and reserve Electric Blue (#0428cb) for primary actions. Use Pale Lavender (#efeff7) for soft proof or interface surfaces and keep supporting text in muted slate tones. Set display headings in a Bolton-like sans, body copy in a clean sans, and small uppercase labels in IBM Plex Mono. Maintain a spacious centered content width, generous section breaks, and alternating two-column workflow rows. Illustrate the product with crisp UI mockups in rounded frames; treat frame gradients as illustration-only. Keep elevation selective, borders subtle, and the overall page easy to scan.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width midnight hero with centered text, top navigation, and a centered primary CTA. | Announcement link, Primary demo action, Concise product proposition | Dark radial gradient, Mono status eyebrow, Centered display heading, Electric-blue button |
| 2 | video | Dark single-column explainer with centered messaging and a wide video preview. | Quick explainer playback, Product context before interface detail | Midnight background, Wide video thumbnail, Compact play control |
| 3 | stats | Narrow dark transition band with a horizontal run of figures and a small press strip. | Proof through operating metrics, Press recognition | Deep indigo band, Evenly spaced figures, Fine separator |
| 4 | how-it-works | Long white section with an intro, process navigation, and alternating two-column feature rows. | Connect-to-run process sequence, Step-by-step product explanation | White canvas, Mono eyebrow, Workflow tabs, Rounded UI mockups |
| 5 | testimonials | Pale lavender two-column proof band with quote card, video, and centered CTA. | Customer outcome proof, Video testimonial, Demo conversion | Soft lavender background, Dark quote card, Customer portrait video, Blue CTA |
| 6 | other | Centered, compact dark section with heading, short copy, and trust links. | Security reassurance, Trust-center link | Midnight canvas, Mono eyebrow, Centered copy, Small compliance marks |
| 7 | faq | White two-column FAQ with introduction on the left and stacked questions on the right. | Accordion questions, Contact email, Copy email action | White canvas, Fine dividers, Plus indicators, Dark text |
| 8 | cta | Full-width dark closing band with centered headline, supporting line, and demo link. | Final conversion prompt, Book-a-demo action | Midnight background, Centered display type, Subtle glow |
| 9 | footer | White footer with brand and address column, grouped link columns, then a separated legal row. | Grouped site navigation, Social links, Legal and privacy links | White background, Muted text, Fine horizontal rule |

## Source CSS custom properties (selected)

```css
--accordion-radius: 0.75rem;
--accordion-duration: 150ms;
--accordion-ease: cubic-bezier(0.4, 0, 0.2, 1);
--accordion-background-color: #ffffff;
--accordion-background-color-dark: #ffffff;
--accordion-background-hover: #efeff7;
--accordion-background-hover-dark: #efeff7;
--accordion-border-color: #e9e9f3;
--accordion-border-color-dark: #e9e9f3;
--accordion-text-color: #00052e;
--accordion-text-color-dark: #00052e;
--accordion-icon-color: #4f5166;
--accordion-icon-color-dark: #4f5166;
--accordion-arrow-color: #4f5166;
--accordion-arrow-color-dark: #4f5166;
--accordion-content-color: #4f5166;
--accordion-content-color-dark: #4f5166;
--accordion-focus-shadow: 0 0 0 2px #0428cb;
--accordion-focus-shadow-dark: 0 0 0 2px #0428cb;
--button-primary: #0428cb;
--button-primary-dark: #0428cb;
--button-primary-hover: #031fa0;
--button-primary-hover-dark: #031fa0;
--button-text: #00052e;
--button-text-dark: #00052e;
--button-text-hover: #00052e;
--button-text-hover-dark: #00052e;
--button-background-color: #ffffff;
--button-background-color-dark: #ffffff;
--button-border: #e9e9f3;
--button-border-dark: #e9e9f3;
--button-primary-hover-tint: color-mix(in srgb, #0428cb 10%, transparent);
--button-font: "Open Sauce Sans", "Inter", sans-serif;
--button-border-width: 1px;
--button-border-style: solid;
--button-border-color: #e9e9f3;
--button-border-radius: 0.75rem;
--button-font-weight: 500;
--button-font-size: 0.875rem;
--button-hover-transition-color: background-color 80ms cubic-bezier(0.4, 0, 0.2, 1);
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/ameba-ai