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

# Adaptive ML · Design System

> Editorial restraint meets vivid AI product imagery

**Theme:** light · **Industry:** ai · **Source:** https://www.adaptive-ml.com/ · **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._

Adaptive ML pairs oversized editorial typography and generous white space with vivid, abstract product imagery. Its restrained neutral palette keeps the platform content legible while a violet announcement bar and colorful media provide targeted contrast.

## North star

Keep the page quiet and editorial in its structure, letting oversized type and vivid product media provide the contrast.

## Overview

The page is anchored by a white canvas, dark charcoal typography, and broad areas of open space. Large, tightly tracked serif display headlines lend an editorial character, while sans-serif body copy keeps product descriptions direct and readable. Small uppercase mono labels organize navigation, categories, and metadata. The layout alternates centered headline-led sections with left-aligned editorial blocks and two-column feature areas, using a spacious vertical rhythm rather than dense UI. Product cards and interface previews sit within thin pale borders, while colorful blurred gradients appear primarily inside product imagery and media—not as a replacement for the restrained site palette. A muted warm-gray content-feed band and dark charcoal information/footer bands create clear transitions. A violet announcement strip is a small, high-contrast brand cue. Overall, the page balances quiet typography and structure with vivid demonstrations of AI use cases.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main canvas, header, and most feature sections; also used for light buttons and media framing. |
| Warm Ink | `#272421` | `--color-warm-ink` | brand | Primary text and navigation, dark information and footer bands, and dark CTA backgrounds. |
| Oat Mist | `#edebe8` | `--color-oat-mist` | surface | Warm-gray blog/content-feed band and subdued text or controls on dark surfaces. |
| Soft Rule | `#e1e0e0` | `--color-soft-rule` | neutral | Fine card and section dividers on the light canvas. |
| Stone Text | `#7d7c7a` | `--color-stone-text` | semantic | Secondary text detected in small supporting copy. |
| Quiet Taupe | `#9e9b98` | `--color-quiet-taupe` | semantic | Muted link text; use sparingly for secondary link treatments. |
| Ash Copy | `#908d89` | `--color-ash-copy` | semantic | Low-emphasis supporting text. |
| Slate Taupe | `#767471` | `--color-slate-taupe` | semantic | Subdued small text in the measured palette. |
| Pale Greige | `#d2cfcc` | `--color-pale-greige` | neutral | Occasional light card border; secondary to the main hairline color. |
| Signal Violet | `#632ca6` | `--color-signal-violet` | accent | Small high-visibility announcement accent; keep limited rather than using as a broad section fill. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#272421` (Warm Ink) · `--color-surface-2` → `#edebe8` (Oat Mist) · `--color-text` → `#272421` (Warm Ink) · `--color-text-muted` → `#edebe8` (Oat Mist) · `--color-border` → `#e1e0e0` (Soft Rule) · `--color-accent` → `#632ca6` (Signal Violet)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#272421` | `#ffffff` | 15.43:1 | AAA |
| `#272421` | `#edebe8` | 12.97:1 | AAA |
| `#edebe8` | `#ffffff` | 1.19:1 | fail |
| `#edebe8` | `#272421` | 12.97:1 | AAA |
| `#632ca6` | `#ffffff` | 8.6:1 | AAA |
| `#632ca6` | `#272421` | 1.79:1 | fail |
| `#632ca6` | `#edebe8` | 7.23:1 | AAA |

### Gradients

- `linear-gradient(270deg, rgba(255, 255, 255, 0), rgb(255, 255, 255))`
- `linear-gradient(90deg, rgba(255, 255, 255, 0), rgb(255, 255, 255))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Diatype | `--font-body` | webfont | 400, 500, 700 | Navigation, body copy, links, and sans-serif headings | Inter |
| Egyptienne F LT | `--font-display` | webfont | 400, 500 | Display and main editorial headlines | Roboto Slab |
| Diatype Mono | `--font-mono` | webfont | 400 | Navigation, eyebrows, captions, and metadata | IBM Plex Mono |

- **Diatype:** Use regular to medium weights; headings use tight negative tracking, while body copy stays neutral and readable.
- **Egyptienne F LT:** Medium-weight serif display with tight negative tracking and compact leading; reserve for prominent headline moments.
- **Diatype Mono:** Small uppercase labels with positive tracking and compact line-height.

### Type scale — Augmented Fourth (ratio ≈ 1.392, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 94px | 500 | 0.9 | -0.028em | — | Egyptienne F LT | Oversized serif headline in the homepage hero and editorial moments. |
| h1 | 77px | 500 | 1 | -0.028em | — | Egyptienne F LT | Primary hero headline and main page-level statement. |
| h2 | 72px | 500 | 1 | -0.03em | — | Diatype | Major platform and section headlines. |
| h3 | 48px | 500 | 1 | -0.03em | — | Diatype | Feature titles and prominent content headings. |
| h4 | 32px | 400 | 1.2 | -0.03em | — | Diatype | Card titles and supporting feature headings. |
| body | 18px | 400 | 1.3 | 0 | — | Diatype | Product descriptions and explanatory paragraphs. |
| caption | 13px | 400 | 1 | 0.03em | uppercase | Diatype Mono | Compact uppercase metadata and category labels. |
| nav | 13px | 400 | 1 | 0.03em | uppercase | Diatype Mono | Small uppercase primary navigation labels. |
| link | 15px | 400 | 1.4 | 0 | — | Diatype | Inline calls to action and content links. |
| eyebrow | 13px | 400 | 1 | 0.03em | uppercase | Diatype Mono | Short uppercase labels introducing sections or features. |
| code | 13px | 400 | 1 | 0.03em | uppercase | Diatype Mono | Mono-styled technical or compact metadata labels. |

OpenType features in use: `"liga"`.

## Spacing & layout

- Base unit **8px**, density **spacious**.
- Scale (most used values): 4, 6, 8, 9, 10, 12, 16, 20, 24, 32, 56, 64, 80, 136 px.
- Section rhythm 136px · element gap 24px · card padding — · max content width 1380px.

Use a spacious, centered page structure with a measured maximum width of 1380px. The homepage mixes centered headline-led sections with asymmetric two-column feature blocks, a multi-column product showcase, and compact editorial content. Keep generous vertical separation between major sections, with a measured section gap of 136px and element gap of 24px. White dominates the opening sections; warm gray and charcoal bands distinguish the lower content. Maintain low density and let product media occupy broad visual areas.

## Shape & elevation

- Radius: button `9px` · card `9px` · nav `9px` · link `9px` · xs `9px` · pill `9999px`
- Shadow `md` (card): `rgba(39, 36, 33, 0.1) 0px 4px 12px 0px`
- Motion: standard transition `0.25s ease` on interactive elements.

The interface is mostly flat: rely on white space, section background changes, and thin pale borders to establish structure. Product cards use subtle rounding and may carry a restrained soft shadow. Avoid stacked card effects or prominent drop shadows; dark footer bands and the warm-gray feed band provide the strongest depth cues.

## Imagery

Use product UI previews, interface cards, and abstract gradient artwork as the main visual material. The gradients are vivid and often blurred, but belong inside product mockups and media rather than the page-wide interface palette. Frame product content cleanly against white, with rounded card edges and ample surrounding space. Treat the logo cloud and product diagrams as supporting elements, not decorative clutter.

## Components

### Announcement strip

A narrow violet band at the top with a centered, underlined acquisition announcement.

### Primary navigation

Brand mark on the left, compact uppercase mono navigation near center, and a dark rounded contact button on the right.

### Product showcase

Broad product interface preview surrounded by vivid gradient imagery, with a compact row of pill-like category controls below.

### Feature card

Light card with a thin #e1e0e0 border, approximately 9px rounding, dark text, and restrained soft shadow where needed.

### Use-case split

Editorial heading and stacked use-case descriptions paired with a colorful product metric visual.

### Content feed

Warm-gray band with a section heading, image-led lead story, and compact linked article list.

### Dark information footer

Charcoal bands with light copy, a centered brand mark, and a multi-column sitemap.

### Measured component styles

- **Primary button** (“PRODUCT”): transparent background · text #272421 · border 1px solid #ffffff · radius 8.96px · padding 8px 10px 6px 10px · 400 14px Diatype
- **Link** (“Adaptive Engine”): transparent background · text #edebe8 · radius 0px · padding 0px · 400 15px Diatype
- **Card** (“001 ADAPT Bootstrap with Reinforcement L”): transparent background · text #272421 · border 1px solid #e1e0e0 · radius 8.96px · padding 0px · 400 18px Diatype · shadow rgba(39, 36, 33, 0.1) 0px 4px 12px 0px
- **Navigation item** (“PRODUCT USE CASES TECHNOLOGY COMPANY Con”): transparent background · text #272421 · radius 0px · padding 0px · 400 18px Diatype

## Do

- Keep the main canvas white and uncluttered.
- Use serif display type for the largest editorial headlines.
- Use uppercase mono labels for navigation and metadata.
- Give major sections generous vertical breathing room.
- Use vivid gradients within product imagery, not as generic page decoration.
- Use thin pale borders and restrained card elevation.
- Reserve violet for a small, high-visibility announcement accent.

## Don't

- Do not make every section a card or boxed panel.
- Do not spread gradient fills across the white page canvas.
- Do not use oversized body copy in place of display headlines.
- Do not crowd navigation, cards, or section transitions.
- Do not replace the dark footer with a bright accent band.
- Do not use heavy shadows or strong outlines as the primary structure.

## Agent prompt

Build a new Adaptive ML page with an editorial, spacious AI-platform aesthetic. Use Gallery White (#ffffff) as the dominant canvas and Warm Ink (#272421) for primary text, navigation, and dark information bands. Use Oat Mist (#edebe8) for a restrained content-feed section, Soft Rule (#e1e0e0) for fine card borders, and Signal Violet (#632ca6) only for a small announcement accent. Set prominent headlines in a tightly tracked serif similar to Roboto Slab; use an Inter-like sans for body and feature copy, and IBM Plex Mono-like uppercase labels for navigation and metadata. Alternate centered headline sections with two-column feature layouts. Showcase colorful, blurred gradients inside product visuals, leaving the surrounding interface clean. Keep cards lightly rounded, mostly flat, and separated by generous whitespace.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | White opening with centered editorial headline, supporting copy, CTA, and a broad product visual. | announcement link, primary demo CTA, product category controls | serif headline, violet announcement strip, wide product preview, dark rounded button |
| 2 | logo-cloud | A horizontal client-logo strip between the hero and platform introduction. | customer credibility | grayscale logo row, wide whitespace |
| 3 | product-showcase | Centered platform headline above a horizontally arranged set of product cards. | feature exploration, learn-more CTA | serif section title, light cards, product diagrams, compact action button |
| 4 | feature-split | Centered heading above a two-column use-case and product-metric composition. | use-case discovery, explore links | stacked feature links, colorful metric visual, open white layout |
| 5 | feature-split | Two-column service block pairing a product image with a large copy-led statement. | expert contact CTA | image-led panel, oversized sans copy, dark rounded button |
| 6 | content-feed | Warm-gray editorial band with a heading, lead story image, and a short linked story list. | browse blog, open article | #edebe8 section band, image-led feature story, compact metadata |
| 7 | feature-grid | Charcoal section with a heading and three evenly arranged information columns. | read technical summaries, follow inline links | dark background, light text, three-column grid |
| 8 | footer | Charcoal footer with centered brand mark and four compact navigation columns. | navigate product and company, visit social links | centered logo, multi-column sitemap, light text |
| 9 | other | Full-bleed abstract gradient image with small centered legal text. | privacy policy link | gradient media background, compact centered legal copy |

## Source CSS custom properties (selected)

```css
--theme--background: white;
--text-main--font-family: Diatype, Arial, sans-serif;
--theme--text: #272421;
--text-main--font-size: 1.125rem;
--text-main--line-height: 1.3;
--text-main--font-weight: 400;
--text-main--letter-spacing: 0em;
--h1--font-family: Diatype, Arial, sans-serif;
--h1--font-size: clamp(3.25rem, 2.608rem + 3.21vw, 5.5rem);
--h1--font-weight: 500;
--h1--letter-spacing: -.03em;
--h2--font-family: Diatype, Arial, sans-serif;
--h2--font-size: clamp(2.75rem, 2.25rem + 2.5vw, 4.5rem);
--h2--font-weight: 500;
--h2--letter-spacing: -.03em;
--h3--font-family: Diatype, Arial, sans-serif;
--h3--font-size: clamp(2.25rem, 2.036rem + 1.07vw, 3rem);
--h3--font-weight: 500;
--h3--letter-spacing: -.03em;
--h4--font-family: Diatype, Arial, sans-serif;
--h4--font-size: clamp(1.75rem, 1.678rem + 0.36vw, 2rem);
--h4--font-weight: 400;
--h4--letter-spacing: -.03em;
--h5--font-family: Diatype, Arial, sans-serif;
--h5--font-size: 1.5rem;
--h5--font-weight: 500;
--h5--letter-spacing: 0em;
--h6--font-family: "Diatype Mono", Arial, sans-serif;
--h6--font-size: .813rem;
--h6--font-weight: 400;
--h6--letter-spacing: .09em;
--text-main--margin-bottom: .5rem;
--font--secondary-family: "Egyptienne F LT", Georgia, sans-serif;
--font--font-family: "Diatype Mono", Arial, sans-serif;
--space--5: 1.25rem;
--display--font-family: Diatype, Arial, sans-serif;
--display--font-size: clamp(5rem, 3.858rem + 5.71vw, 9rem);
--display--font-weight: 500;
--display--letter-spacing: -.05em;
--text-large--font-size: 1.375rem;
```

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