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

# AgentQL · Design System

> Dark canvas, luminous code, practical AI tooling.

**Theme:** dark · **Industry:** ai · **Source:** https://www.agentql.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._

AgentQL’s homepage pairs a near-black canvas with crisp typography and blue-lit product demonstrations. Compact, centered sections move from the hero through integrations, features, plans, testimonials, and a restrained closing call to action.

## North star

Keep the page nearly black and let precise typography and luminous product UI—not decorative colour—create the focus.

## Overview

The page is anchored by a near-black canvas (#0a0b0c), with restrained dark surfaces that let product imagery and code samples carry the colour. White headings establish clear hierarchy; two muted grey tones handle supporting copy and navigation. Blue shades appear primarily in interface demonstrations, badges, and subtle atmospheric glows, rather than as broad, saturated section fills. Figtree gives display headings a clean, slightly condensed feel through medium weights and tight tracking; Inter handles most interface and body text, while IBM Plex Mono signals code and small technical labels. The layout uses a centered content frame and switches between split product storytelling, card grids, and centered section introductions. Generous dark intervals keep the long page from feeling crowded, despite its compact text and multiple demonstrations. Cards rely on dark fills, fine blue-toned borders, and layered shadows; rounded corners are present but avoid a soft, consumer-app feel.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Obsidian Canvas | `#0a0b0c` | `--color-obsidian-canvas` | brand | Dominant page canvas and footer background; preserves strong contrast around content and product imagery. |
| Slate Mist | `#abaebb` | `--color-slate-mist` | neutral | Muted navigation, links, and supporting text across the page. |
| Pale Graphite | `#c7c9d1` | `--color-pale-graphite` | neutral | Secondary muted body and link text where a lighter reading tone is needed. |
| Night Panel | `#101219` | `--color-night-panel` | surface | Common dark card and button surface, especially feature cards. |
| Code Badge Blue | `#3061c2` | `--color-code-badge-blue` | accent | Small blue label backgrounds inside technical product examples, not a broad page colour. |
| Clean White | `#ffffff` | `--color-clean-white` | neutral | Primary headings, navigation, button labels, and selected high-contrast text. |
| Deep Interface Navy | `#12244f` | `--color-deep-interface-navy` | surface | Dark blue surfaces within product demonstrations and interface imagery. |
| Midnight Border | `#151e32` | `--color-midnight-border` | surface | Subtle card and footer edging, plus dark gradient transitions. |
| Blue Graphite Line | `#172540` | `--color-blue-graphite-line` | surface | Fine borders around dark cards and code-oriented buttons. |
| Electric Navy | `#1b346e` | `--color-electric-navy` | accent | Blue product-interface surfaces and local luminous accents. |
| Soft Signal Blue | `#85a6e9` | `--color-soft-signal-blue` | accent | Light blue glow and interface highlight within product visuals. |
| Deep Ink Blue | `#0d172b` | `--color-deep-ink-blue` | surface | Recessed dark areas and gradients in code cards and product imagery. |
| Carbon Button | `#15161a` | `--color-carbon-button` | surface | Near-black pill badge and occasional button or footer detail. |
| Muted Control Grey | `#777a88` | `--color-muted-control-grey` | semantic | Low-emphasis button text or control detail; use sparingly. |
| Slate Interface Edge | `#1e2b48` | `--color-slate-interface-edge` | surface | Dark blue card boundary and interface detail. |
| Steel Blue Edge | `#24375a` | `--color-steel-blue-edge` | surface | Subtle blue-toned borders in interface and card regions. |
| Signal Blue | `#2862d7` | `--color-signal-blue` | accent | Small, vivid blue accent in interface and product-related details. |

### Semantic aliases

`--color-canvas` → `#0a0b0c` (Obsidian Canvas) · `--color-surface` → `#101219` (Night Panel) · `--color-surface-2` → `#12244f` (Deep Interface Navy) · `--color-surface-3` → `#1b346e` (Electric Navy) · `--color-surface-4` → `#85a6e9` (Soft Signal Blue) · `--color-text` → `#ffffff` (Clean White) · `--color-text-muted` → `#abaebb` (Slate Mist) · `--color-text-subtle` → `#c7c9d1` (Pale Graphite) · `--color-border` → `#172540` (Blue Graphite Line) · `--color-accent` → `#1b346e` (Electric Navy) · `--color-accent-2` → `#85a6e9` (Soft Signal Blue) · `--color-accent-3` → `#2862d7` (Signal Blue)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#0a0b0c` | 19.7:1 | AAA |
| `#ffffff` | `#101219` | 18.71:1 | AAA |
| `#ffffff` | `#12244f` | 15.1:1 | AAA |
| `#ffffff` | `#1b346e` | 11.91:1 | AAA |
| `#abaebb` | `#0a0b0c` | 8.91:1 | AAA |
| `#abaebb` | `#101219` | 8.47:1 | AAA |
| `#abaebb` | `#12244f` | 6.83:1 | AA |
| `#abaebb` | `#1b346e` | 5.39:1 | AA |
| `#c7c9d1` | `#0a0b0c` | 11.92:1 | AAA |
| `#c7c9d1` | `#101219` | 11.32:1 | AAA |

### Gradients

- `radial-gradient(50% 50%, rgba(30, 31, 54, 0.8) 35%, rgba(0, 0, 0, 0))`
- `radial-gradient(50% 50%, rgb(16, 21, 40) 39%, rgba(0, 0, 0, 0))`
- `radial-gradient(50% 50%, rgba(30, 31, 37, 0.5) 42%, rgba(0, 0, 0, 0))`
- `linear-gradient(rgb(209, 211, 255) 35%, rgba(153, 157, 255, 0.1))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 300, 400, 500, 600 | Body copy, navigation, links, buttons, and interface labels. | Inter |
| IBM Plex Mono | `--font-mono` | webfont | 400 | Code samples, technical captions, and compact monospace labels. | IBM Plex Mono |
| Figtree | `--font-display` | webfont | 500, 600 | Display headings and prominent section titles. | Inter |

- **Inter:** Mostly light body text and regular UI; compact tracking, restrained weights, sentence case.
- **IBM Plex Mono:** Regular weight; preserve code-like alignment and avoid using for long prose.
- **Figtree:** Medium-weight display treatment with tight negative tracking; sentence case, no forced uppercase.

### Type scale — Perfect Fourth (ratio ≈ 1.355, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 64px | 500 | 1 | -0.02em | — | Figtree | Large lead headlines, including the hero statement. |
| h1 | 48px | 500 | 1 | -0.02em | — | Figtree | Primary page or major section headline. |
| h2 | 44px | 500 | 1.13 | -0.02em | — | Figtree | Section titles above feature, pricing, and testimonial content. |
| h3 | 36px | 500 | 1.13 | -0.02em | — | Figtree | Feature and product-card headings. |
| h4 | 28px | 500 | 1.13 | -0.02em | — | Inter | Smaller card or subsection headings. |
| body | 14px | 300 | 1.38 | -0.02em | — | Inter | Explanatory copy, supporting descriptions, and card text. |
| caption | 13px | 400 | 1.25 | 0 | — | IBM Plex Mono | Compact technical captions and interface annotations. |
| button | 20px | 400 | 1.25 | -0.02em | — | Inter | Prominent primary action labels. |
| nav | 14px | 400 | 1 | -0.02em | — | Inter | Top-level navigation and utility links. |
| link | 16px | 400 | 1.5 | 0 | — | Inter | Inline documentation and supporting links. |
| code | 13px | 400 | 1.25 | 0 | — | IBM Plex Mono | Code snippets and monospace interface samples. |

## Spacing & layout

- Base unit **4px**, density **compact**.
- Scale (most used values): 1, 2, 4, 6, 8, 10, 12, 16, 18, 20, 24, 26, 28, 32, 40 px.
- Section rhythm 32px · element gap 6px · card padding — · max content width 1152px.

Use a centered content frame capped at the measured 1152px maximum width. The page alternates between a two-column hero and feature split, a one-column integration banner, multi-column feature and pricing cards, and centered section introductions. Keep alignment intentional: hero copy begins at the left, while feature, pricing, testimonial, and closing sections center their titles. Section spacing follows the measured 32px rhythm, with compact internal gaps and ample dark negative space around visual showcases. The overall density is compact rather than sparse.

## Shape & elevation

- Radius: button `4px` · card `12px` · media `50%` · badge `2px` · nav `9999px` · link `8px` · xs `2px` · sm `4px` · md `6px` · lg `8px` · xl `12px` · pill `9999px`
- Shadow `md` (link): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.2) 0px 3px 16px 0px`
- Shadow `lg` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.5) 0px 4px 30px 0px`
- Shadow `lg-2` (card, media): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.34) 0px 20px 35px 0px, rgba(0, 0, 0, 0.25) 0px 4px 13px 0px`
- Shadow `md-2` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 255, 255, 0.35) 0px 2px 14px 0px`
- Shadow `lg-3` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.35) 0px 20px 34px 0px`
- Shadow `hairline` (button): `rgba(0, 0, 0, 0.15) 0px 0px 0px 1px`
- Motion: standard transition `0.2s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

Most content sits flat against the dark canvas, with fine blue-charcoal borders separating cards and controls. Product screenshots gain depth from layered panels and broad, dark shadows; keep shadows subtle outside these showcases. Reserve stronger glow and overlap for interface imagery, avoiding raised surfaces on every content block.

## Imagery

Prioritize product UI over lifestyle photography: code editors, structured data, browser results, integrations, and developer-tool illustrations. Frame these as layered dark interface panels with blue and cyan light around edges or behind the panels. Use small logos and icon-led diagrams in feature cards; keep human photography limited to testimonial portraits. Glows and gradients belong to the visual demonstrations, not as replacements for the dark canvas.

## Components

### Top navigation

White brand mark and compact Inter links on the dark canvas, with utility links and a pale, rounded Get API key action.

### Hero action pair

Prominent light primary action beside a dark outlined secondary button; keep labels concise and high-contrast.

### Product interface showcase

Layer overlapping dark code and result panels with blue interface highlights and soft surrounding glow.

### Integration banner

Wide dark panel with left-aligned title and copy, action button, and a compact grid of integration marks.

### Feature cards

Dark rounded cards combine a product illustration, concise heading, and muted descriptive copy.

### Pricing cards

Three dark plan panels with clear price hierarchy, short feature lists, and light CTA buttons.

### Testimonial cards

Compact quote panels use muted copy, small author portraits, and subtle blue or violet visual accents.

### Measured component styles

- **Primary button** (“Copy code”): background #0f1b34 · text #8798c1 · border 1px solid #172541 · radius 4px · padding 0px · 400 13px Inter
- **Secondary button** (“E-commerce”): background #15171a · text #ffffff · radius 9999px · padding 8px 12px · 400 13px Inter
- **Link** (“Python”): transparent background · text #abaebb · radius 0px · padding 0px 0px 1px 0px · 400 16px Inter
- **Card** (“Versatile SDK Interact with web page ele”): background #101219 · text #ffffff · radius 12px · padding 0px · 400 16px Inter
- **Badge** (“product_name”): background #3061c2 · text #ffffff · radius 2px · padding 0px 1px · 400 13px IBM Plex Mono
- **Navigation item** (“AgentQL by TinyFish Docs Pricing Quick S”): transparent background · text #ffffff · radius 0px · padding 0px · 400 16px Inter

## Do

- Keep the page canvas near-black using #0a0b0c.
- Use white for prominent headings and primary control labels.
- Set supporting navigation and copy in muted grey.
- Use blue as a product-interface accent, not a dominant page fill.
- Use Figtree for large headings and Inter for interface text.
- Reserve IBM Plex Mono for code and technical annotations.

## Don't

- Do not introduce bright full-width colour bands.
- Do not turn product imagery into lifestyle photography.
- Do not use blue accents as the default text colour.
- Do not make every card visibly elevated.
- Do not use oversized, decorative display typography throughout.
- Do not crowd dark sections with dense copy or excessive ornament.

## Agent prompt

Build a new AgentQL-style page on a near-black #0a0b0c canvas. Use #ffffff for clear headings and key actions, with #abaebb and #c7c9d1 for secondary navigation and explanatory text. Keep blue tones such as #12244f, #1b346e, #85a6e9, and #2862d7 concentrated in product UI, code highlights, and soft local glows. Set prominent headings in medium Figtree with tight tracking; use Inter for body copy and controls, and IBM Plex Mono for code. Organize content in a centered frame, alternating split showcases with compact card grids and centered section headings. Use dark surfaces, fine blue-charcoal borders, restrained shadows, and rounded panels. Make the product itself the visual focus; avoid decorative colour bands and lifestyle imagery.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Two-column hero: left copy and actions, right layered product interface showcase. | primary and secondary actions, switchable example categories, proof badges | large white headline, dark code panels, blue interface glow, light primary button |
| 2 | integrations | Wide banner with copy and action on the left and integration marks grouped at right. | documentation pathway, integration discovery | dark framed panel, soft gradient glow, logo tiles |
| 3 | feature-grid | Centered section introduction followed by a three-column arrangement of feature showcase cards. | feature exploration, documentation links | dark rounded cards, product illustrations, code examples |
| 4 | feature-grid | Centered heading above four compact benefit columns. | scannable benefit list | small line icons, short headings, muted supporting copy |
| 5 | feature-split | Split layout with explanatory copy and stacked points at left, luminous product visual at right. | progressive feature explanation, emphasized key benefit | large heading, short feature list, code-interface imagery |
| 6 | pricing | Centered pricing heading, free trial panel, then three plan cards in a row. | free trial entry, plan comparison, direct signup actions | dark pricing panels, prominent prices, light action buttons |
| 7 | testimonials | Centered section heading above a row of quote cards. | social proof, testimonial carousel affordance | compact quote panels, author portraits, subtle coloured glows |
| 8 | cta | Centered closing message and two links over a full-bleed dark blue glow. | documentation route, sample discovery | centered heading, minimal supporting copy, paired light actions |
| 9 | footer | Full-width footer with brand at left, grouped link columns, and a lower utility row. | grouped site navigation, social links | dark footer band, small muted links, brand mark |

## Source CSS custom properties (selected)

```css
--shiki-color-text: #ffffff;
--shiki-color-background: transparent;
--tw-text-opacity: 1;
--tw-border-opacity: 1;
--tw-bg-opacity: 1;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--rt-color-white: #fff;
--rt-color-dark: #222;
--rt-color-success: #8dc572;
--rt-color-error: #be6464;
--rt-color-warning: #f0ad4e;
--rt-color-info: #337ab7;
```

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