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

# AIUC · Design System

> Quiet editorial clarity for AI assurance

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

AIUC uses a restrained editorial layout to present AI agent standards, auditing, and insurance. White space, fine dividers, and compact navigation give the page a calm institutional character, with warm cream and dark blue imagery as selective accents.

## North star

Build a calm, editorial standards site where precise typography and generous white space lead, and color or imagery appears only as a deliberate accent.

## Overview

The visual strategy is intentionally quiet and institutional: a white canvas carries most of the page, with dark text and fine rules providing structure rather than decorative framing. Warm pale gold appears in the top announcement band and small campaign accents, while a deep blue landscape image creates the strongest visual interruption. Typography combines lightweight Almarai headings with readable ABC Diatype body copy; compact monospaced navigation and links add a technical, standards-oriented note. The layout is editorial rather than dashboard-like: a narrow left-side navigation sits apart from a centered content area, where a large heading, divider, and multi-column text establish hierarchy. Partner marks and update cards form orderly bands, while the footer returns to an open, pale field. Keep color sparse, align content carefully, and let imagery carry the page’s most dramatic contrast.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Dominant page canvas and text color; keeps the content field bright, open, and uncluttered. |
| Graphite Text | `#323232` | `--color-graphite-text` | semantic | Primary muted text and navigation/link color, supporting a softer contrast than the darkest headings. |
| Carbon Ink | `#1a1a1a` | `--color-carbon-ink` | brand | Strong heading and button color, including the dark Explore AIUC-1 call to action. |
| Quiet Gray | `#979595` | `--color-quiet-gray` | neutral | Sparse secondary text tone; use only for low-emphasis copy where a muted hierarchy is needed. |
| Pure Black | `#000000` | `--color-pure-black` | semantic | Minor measured text color, including some logo/card content; not a defining canvas or brand color. |
| Pale Saffron | `#eddfab` | `--color-pale-saffron` | accent | Warm announcement strip and small accent surfaces; use sparingly rather than as a large page fill. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#eddfab` (Pale Saffron) · `--color-text` → `#1a1a1a` (Carbon Ink) · `--color-text-muted` → `#323232` (Graphite Text) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-accent` → `#eddfab` (Pale Saffron)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#1a1a1a` | `#ffffff` | 17.4:1 | AAA |
| `#1a1a1a` | `#eddfab` | 13.05:1 | AAA |
| `#323232` | `#ffffff` | 12.82:1 | AAA |
| `#323232` | `#eddfab` | 9.61:1 | AAA |
| `#ffffff` | `#eddfab` | 1.33:1 | fail |
| `#eddfab` | `#ffffff` | 1.33:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| ABC Diatype Regular | `--font-body` | webfont | 400 | Main body copy, captions, and editorial descriptions | Inter |
| Almarai | `--font-display` | webfont | 300 | Lightweight page and section headings | Manrope |
| ABC Diatype Semi-Mono Regular | `--font-mono` | webfont | 400 | Compact navigation labels, links, and code-like details | IBM Plex Mono |

- **ABC Diatype Regular:** Regular-weight sans with clear, compact forms; use sentence case and comfortable line spacing.
- **Almarai:** Measured at light weight; headings are clean and understated, with the main heading slightly tightened.
- **ABC Diatype Semi-Mono Regular:** Regular monospaced treatment for small interface labels; keep case natural and avoid decorative styling.

### Type scale — Perfect Fifth (ratio ≈ 1.491, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 40px | 300 | 1.3 | -0.02em | — | Almarai | Primary editorial page heading introducing the audit and insurance proposition. |
| h2 | 24px | 300 | 1.2 | 0 | — | Almarai | Section titles such as Updates and the AIUC-1 standard feature heading. |
| body | 18px | 400 | 1.5 | 0 | — | ABC Diatype Regular | Main explanatory paragraphs in the introduction and news content. |
| caption | 16px | 400 | 1.5 | 0 | — | ABC Diatype Regular | Supporting short descriptions, partner labels, and secondary content. |
| link | 14px | 400 | 1.3 | 0 | — | ABC Diatype Semi-Mono Regular | Small navigation and inline text links, often in a technical mono style. |
| code | 14px | 400 | 1.3 | 0 | — | ABC Diatype Semi-Mono Regular | Compact technical labels or code-like interface details; use sparingly. |

## Spacing & layout

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

Use a restrained editorial grid with a compact navigation column near the upper left and the main content set in a centered, wide-but-contained field. Headings align to the content edge and are followed by thin horizontal rules. Introductory copy divides into an understated lead and denser text columns. Continue with horizontal logo bands, a wide image-led feature, and evenly aligned update cards. Preserve generous blank intervals between sections and avoid filling the canvas with controls or decoration.

## Shape & elevation

- Radius: button `3px` · media `4px` · link `3px` · xs `3px` · sm `4px`
- No box shadows measured: the page is flat.

The interface is predominantly flat, with no measured shadow language. Fine horizontal rules and pale section bands separate content instead of raised cards. Preserve the simple, low-profile treatment; the few media corners are subtly rounded, while most structural surfaces remain square and unlayered.

## Imagery

The page combines partner and customer wordmarks, restrained editorial card artwork, and one wide, dark blue landscape visual for the AIUC-1 feature. The feature image is panoramic and atmospheric rather than literal product photography. Keep artwork clean and subdued, with logos treated as content marks; do not mistake colors embedded in illustrations or card art for the core palette.

## Components

### Announcement bar

A narrow pale saffron band across the top pairs a centered funding message and arrow with a dark compact CTA at the right.

### Compact navigation

Small, vertically stacked page links sit below the brand mark at the left; active and secondary links use restrained text contrast.

### Editorial introduction

A large lightweight heading and thin rule introduce a lead statement beside dense explanatory text columns.

### Logo bands

Customer and featured-in marks sit in horizontal, pale bands with generous separation and minimal framing.

### AIUC-1 feature banner

A broad dark blue landscape image carries a light heading, short supporting copy, and a small light CTA.

### Updates feed

A ruled section heading leads into aligned article cards with image artwork, small category labels, brief summaries, and read links.

### Open footer

A spacious pale closing area balances a short brand statement and URL with the company mark and compact utility links.

### Measured component styles

- **Primary button** (“Explore AIUC-1”): background #1a1a1a · text #0000ee · radius 3px · padding 6px 16px · 400 12px sans-serif
- **Link** (“Home”): transparent background · text #0000ee · radius 0px · padding 0px · 400 12px sans-serif
- **Card** (“Customers”): background #fafafa · text #000000 · radius 0px · padding 0px · 400 12px sans-serif

## Do

- Keep the white canvas dominant.
- Use Pale Saffron only for selective announcements and accents.
- Set headings in a light, uncluttered sans style.
- Use fine rules to mark editorial section boundaries.
- Keep navigation compact and visually subordinate.
- Give logo bands and article cards consistent alignment.

## Don't

- Do not turn the page into a dense dashboard.
- Do not introduce unmeasured colors as brand palette values.
- Do not add heavy shadows or layered card effects.
- Do not use large blocks of warm gold.
- Do not let the dark feature image overwhelm the full page.
- Do not make headings bold or overly decorative.

## Agent prompt

Create a new page in AIUC’s calm editorial style. Use Gallery White (#ffffff) as the dominant canvas, Carbon Ink (#1a1a1a) for strong headings and dark calls to action, Graphite Text (#323232) for readable body and navigation, and Pale Saffron (#eddfab) only as a small announcement accent. Set light, clean sans headings against regular sans body copy; reserve monospaced styling for compact links and labels. Organize content in a centered editorial field with a small side navigation, clear column alignment, generous open intervals, and thin horizontal dividers. Use horizontal partner or proof bands and, if needed, one wide atmospheric image as a focused feature. Keep surfaces flat, avoid decorative shadows, and prioritize clear reading order over interface density.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | other | Single-column section on a pale background, following the page’s wide editorial content field. | Quiet continuation, Low visual interruption | Pale gray surface, Open spacing |

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