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

# General Intelligence Company · Design System

> A cinematic landscape for ambitious AI

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

A spacious editorial homepage pairs refined serif headlines with cinematic, illustrated scenes to present an applied AI lab. Clean white storytelling sections give way to a vivid blue product feature and a restrained article feed.

## North star

Let expansive illustrated scenes create the emotion, then return to quiet white space and precise editorial typography.

## Overview

The visual strategy contrasts a quiet editorial canvas with immersive, story-like imagery. White and near-white sections let the content breathe, while a full-bleed illustrated New York nightscape makes the opening feel cinematic; later, a saturated blue product panel with sunflowers creates a distinct focal point. Dark charcoal carries headlines and primary reading text, muted gray supports secondary copy, and fine pale borders separate cards without making the page feel boxed in. Display headings use the distinctive ppMondwest serif, with tight tracking and restrained weights; af sans-serif keeps navigation, body copy, and controls practical and legible. Layouts are mostly single-column and centered or left-aligned, with generous vertical pauses between narrative moments. The product feature and article cards introduce contained, rounded surfaces, but the overall impression remains open and image-led rather than dashboard-like.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Dominant canvas for the opening overlay, narrative sections, cards, and footer. |
| Editorial Charcoal | `#2c2c2c` | `--color-editorial-charcoal` | neutral | Primary measured text color for headings and body copy. |
| Quiet Gray | `#646464` | `--color-quiet-gray` | neutral | Muted supporting text and secondary footer information. |
| Clear Sky | `#41a1cf` | `--color-clear-sky` | accent | Blue button border and interface detail; subordinate to the large blue feature band. |
| Mist Border | `#dee2de` | `--color-mist-border` | semantic | Fine card and footer hairlines, including subtle edge definition. |
| Cofounder Blue | `#0081c0` | `--color-cofounder-blue` | brand | Full-width product feature section background. |
| Warm Graphite | `#444141` | `--color-warm-graphite` | neutral | Secondary button and small interface text. |
| Stone Gray | `#b4b8b4` | `--color-stone-gray` | neutral | Occasional muted text and understated footer or interface details. |
| Bright Azure | `#3099cc` | `--color-bright-azure` | accent | Minor blue button or interface treatment; not a dominant page color. |
| Deep Azure | `#1a8ec6` | `--color-deep-azure` | accent | Subtle button accent detail, used sparingly. |
| Soft Sage White | `#f3f5f2` | `--color-soft-sage-white` | surface | Low-frequency pale text or subtle surface detail. |
| Petal Blue | `#99cde6` | `--color-petal-blue` | accent | Blue message-card surface within the product illustration, not a core page band. |
| Cloud Slate | `#9db0bd` | `--color-cloud-slate` | neutral | Rare muted text detail. |
| Near Black | `#171717` | `--color-near-black` | neutral | Dark navigation, link, and card text. |
| Paper Tint | `#f9faf7` | `--color-paper-tint` | surface | Subtle card and footer surface variation against white. |
| Pale Ash | `#e7e8e5` | `--color-pale-ash` | semantic | Minor gradient or decorative transition detail. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-text` → `#2c2c2c` (Editorial Charcoal) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#646464` (Quiet Gray) · `--color-border` → `#dee2de` (Mist Border) · `--color-accent` → `#0081c0` (Cofounder Blue)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#2c2c2c` | `#ffffff` | 13.97:1 | AAA |
| `#646464` | `#ffffff` | 5.92:1 | AA |
| `#0081c0` | `#ffffff` | 4.28:1 | AA-large |

### Gradients

- `linear-gradient(rgba(254, 255, 252, 0) 10%, rgb(254, 255, 252) 50%)`
- `linear-gradient(rgba(255, 255, 255, 0) 75%, rgba(0, 0, 0, 0.82))`
- `linear-gradient(to right, oklab(0 0 0 / 0.12) 0px, oklab(0 0 0 / 0.07) 50%, oklab(0 0 0 / 0.07) 100%)`
- `linear-gradient(155deg, rgba(68, 65, 65, 0.12) 5.96%, rgba(68, 65, 65, 0.07) 75.72%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| af | `--font-body` | webfont | 500, 600, 700, 400 | Navigation, body copy, captions, buttons, and practical interface text. | Inter |
| ppmondwest | `--font-display` | webfont | 500, 400 | Editorial display headings and prominent narrative statements. | Instrument Serif |

- **af:** Use medium weights most often, compact tracking, sentence case, and modest line spacing.
- **ppmondwest:** Use regular to medium weights, tight negative tracking, mixed case, and a refined editorial feel.

### Type scale — Augmented Fourth (ratio ≈ 1.377, base 15px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 54px | 400 | 1.1 | -0.02em | — | ppmondwest | Centered brand statement over the illustrated opening scene. |
| h2 | 48px | 500 | 1.1 | -0.02em | — | ppmondwest | Major editorial headlines and the product-feature title. |
| h3 | 40px | 500 | 1.1 | -0.02em | — | ppmondwest | Article-card and secondary feature headings. |
| h4 | 27px | 400 | 1.5 | -0.04em | — | ppmondwest | Supporting narrative statements within content sections. |
| body | 15px | 500 | 1.4 | -0.01em | — | af | Explanatory paragraphs and section copy. |
| caption | 13px | 500 | 1.3 | -0.01em | — | af | Small labels, metadata, and supporting notes. |
| button | 13px | 500 | 1.4 | -0.01em | — | af | Compact CTA and cookie-control labels. |
| nav | 15px | 500 | 1.4 | -0.01em | — | af | Header and footer navigation links. |

OpenType features in use: `"liga" 0`.

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 2, 3, 4, 5, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 200 px.
- Section rhythm 80px · element gap 8px · card padding 12px · max content width 1248px.

The page uses a measured 1248px maximum content width and a comfortable density, with long single-column storytelling sections and occasional multi-column content such as the three-card article feed. The hero is full-bleed and centered around its landscape image, with an inset copy panel anchored low on the left. Subsequent sections alternate between centered or split editorial compositions and a contained product feature. Section transitions are marked by ample vertical breathing room rather than heavy dividers; the measured section gap is 80px, with an 8px base spacing rhythm.

## Shape & elevation

- Radius: button `4px` · card `16px` · nav `9999px` · xs `4px` · sm `8px` · md `12px` · lg `16px` · xl `24px` · pill `9999px`
- Shadow `hairline` (other, footer, nav): `rgba(0, 0, 0, 0.04) 0px 1.01px 1.01px 0px`
- Shadow `sm` (nav, card, button): `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.15) 0px 2px 6px 0px`
- Shadow `sm-2` (card, other): `rgba(0, 0, 0, 0.08) 0px 1px 1px 0px, rgba(0, 0, 0, 0.08) 0px 4px 5px 0px`
- Shadow `hairline-2` (footer): `rgb(222, 226, 222) 0px 0px 0px 1px`
- Shadow `sm-3` (section): `rgba(0, 0, 0, 0.06) 0px 2px 2px 0px, rgba(0, 0, 0, 0) 0px 6px 6px 0px, rgba(0, 0, 0, 0.04) 0px 0px 0px 5px`
- Shadow `sm-4` (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, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 8px 0px`
- Motion: standard transition `0.2s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

Most sections remain flat against white, with fine #dee2de hairlines used for card and footer definition. Rounded cards and the floating nav use restrained soft shadows rather than pronounced depth. The hero and product illustrations carry their own visual layering through translucent overlays and image contrast; avoid adding heavy card shadows to the editorial content.

## Imagery

Large, painterly illustrated landscapes define the experience: a New York night scene opens the page, followed by botanical imagery and a bright sunflower product vignette. The articles use image-led cards with rounded corners and text layered over their artwork. Small illustrations and diagrams appear in the white narrative sections. Treat these as intentional branded art, not photography or generic SaaS mockups; preserve their broad framing and saturated color contrasts.

## Components

### Floating navigation

A compact translucent rounded pill sits near the top center over the hero artwork, combining navigation links with a dark Get Cofounder CTA.

### Hero copy panel

A translucent, softly bordered panel sits over the lower-left landscape, pairing a large serif heading, short sans-serif paragraph, and understated text link.

### Narrative feature

Open white editorial sections pair explanatory copy and serif statements with small botanical or diagram illustrations.

### Cofounder feature

A rounded, inset #0081c0 product showcase combines a left-aligned serif headline and CTA with vivid sunflower artwork and a message preview.

### Article cards

Three image-led cards form a row beneath a left-aligned serif section heading, with compact overlaid titles and subtle rounded edges.

### Closing footer

A centered serif recruitment statement and simple link groups close the page, with a compact email-update field and understated social links.

### Measured component styles

- **Primary button** (“Get Cofounder”): background #1f1f29 · text #ffffff · border 1px solid #282834 · radius 8px · padding 8px 12px 8px 16px · 500 15px af
- **Secondary button** (“Get Cofounder”): transparent background · text #ffffff · border 1px solid #41a1cf · radius 8px · padding 8px 16px · 500 15px af · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Link** (“Get to know us”): transparent background · text #171717 · radius 0px · padding 0px · 400 16px af
- **Input**: transparent background · text #444141 · radius 0px · padding 0px · 500 13px af
- **Card** (“New message from Cofounder now ✏️ Here's”): background #99cde6 · text #ffffff · border 1px solid #99cde6 · radius 16px · padding 12px · 400 16px af · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Navigation item** (“About Writing Careers”): transparent background · text #171717 · radius 0px · padding 0px · 400 16px af

## Do

- Use the illustrated hero as the page’s primary visual anchor.
- Keep most storytelling sections white or near-white and generously spaced.
- Set display headlines in an editorial serif with tight tracking.
- Use af-style sans-serif for navigation, body copy, and controls.
- Reserve #0081c0 for a distinct product feature band.
- Keep borders and shadows fine, pale, and restrained.

## Don't

- Do not turn the page into a dense dashboard layout.
- Do not use saturated blue as a general background across every section.
- Do not replace the bespoke landscape art with generic stock photography.
- Do not add heavy shadows or thick borders to editorial cards.
- Do not use all-caps headings or oversized interface labels.
- Do not collapse the generous pauses between story sections.

## Agent prompt

Build a new page in this visual style as an image-led editorial experience, not a dashboard. Start with a full-bleed, cinematic illustrated scene and a compact floating navigation pill; use Gallery White (#ffffff) for the spacious story sections and Editorial Charcoal (#2c2c2c) for primary reading text. Set display headlines in a refined, tightly tracked serif similar to ppMondwest, and use a clean sans-serif like Inter for navigation, body copy, and controls. Keep layouts mostly single-column, with occasional split features or a three-card image feed. Use Cofounder Blue (#0081c0) sparingly for one distinct product showcase. Keep borders pale Mist Border (#dee2de), corners soft, and shadows subtle. Preserve generous vertical breathing room, painterly illustrative imagery, concise text, and understated CTAs.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed illustrated New York nightscape with centered brand title and lower-left copy panel. | floating navigation, text-link CTA, cookie notice | cinematic image background, translucent copy card, rounded nav pill |
| 2 | feature-split | Open white single-column section with illustration and editorial copy arranged as a split composition. | mission explanation, narrative scroll | botanical illustration, serif statement, wide whitespace |
| 3 | feature-split | White editorial section with a large statement, supporting text, and a simple diagram. | problem framing, concept explanation | minimal diagram, editorial headline, soft card surface |
| 4 | product-showcase | Inset rounded blue feature panel with copy aligned left and sunflower artwork on the right. | product explanation, primary CTA | #0081c0 panel, message preview, illustrated sunflowers |
| 5 | content-feed | Left-aligned editorial heading above a horizontal row of three image-led article cards. | read-more link, article discovery | three-card row, illustrated thumbnails, compact metadata |
| 6 | footer | Centered closing statement above a low-profile footer with links and an email-update field. | careers link, email signup, social links | centered serif headline, simple link row, minimal form |

## Source CSS custom properties (selected)

```css
--background: #fff;
--foreground: #171717;
```

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