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

# Limitless — Acquisition Announcement · Design System

> A clear, human announcement in a calm, open canvas

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

A restrained acquisition announcement pairs a centered headline and founder video with a long-form message and compact FAQ. White space, quiet neutrals, and soft card shadows keep attention on the people and the information.

## North star

Keep the interface quiet and centered so the founder’s video and announcement remain the unmistakable focus.

## Overview

The page uses a white canvas as its defining visual field, with pale gray surfaces reserved for section details and FAQ rows. Dark navy headings provide strong hierarchy without introducing a loud brand color; slate tones soften navigation and supporting copy. The measured typeface, Greycliff, gives headings a rounded, contemporary character, while the centered display headline is compact and assertive. A narrow single-column content area keeps the announcement readable and gives the founder video a prominent, wide frame. The video thumbnail supplies most of the page’s warm brown and black color, but those hues belong to the footage, not the site palette. Long-form text sits in a softly elevated white card, followed by a separate FAQ panel. Generous vertical pauses separate the major blocks. Rounded media and cards, restrained shadows, and minimal borders create gentle structure without making the page feel dense or heavily boxed.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas and card backgrounds; preserves the open, low-noise feel. |
| Slate Copy | `#475569` | `--color-slate-copy` | neutral | Muted navigation, links, and supporting interface text. |
| Cloud Gray | `#f2f3f5` | `--color-cloud-gray` | surface | Subtle section surfaces and hairline borders, including pale FAQ row treatments. |
| Midnight Ink | `#0f172a` | `--color-midnight-ink` | neutral | Primary headline and prominent heading text. |
| Quiet Slate | `#64748b` | `--color-quiet-slate` | neutral | Secondary link text, including understated navigation links. |
| Deep Slate | `#334155` | `--color-deep-slate` | neutral | Long-form card copy and supporting heading text. |
| Mist Border | `#d1d5db` | `--color-mist-border` | semantic | Minor link or text details; not a defining surface or brand color. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f2f3f5` (Cloud Gray) · `--color-text` → `#0f172a` (Midnight Ink) · `--color-text-muted` → `#475569` (Slate Copy) · `--color-border` → `#f2f3f5` (Cloud Gray)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#0f172a` | `#ffffff` | 17.85:1 | AAA |
| `#0f172a` | `#f2f3f5` | 16.08:1 | AAA |
| `#475569` | `#ffffff` | 7.58:1 | AAA |
| `#475569` | `#f2f3f5` | 6.83:1 | AA |

### Gradients

- `linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| __greycliff_d64c0a | `--font-body` | webfont | 400, 500, 600, 700, 300 | Site-wide type, from display headline and section headings to body copy, links, and controls. | Nunito Sans |

- **__greycliff_d64c0a:** Rounded sans-serif; headings use semibold weight, body stays regular, and the display headline uses subtly tight tracking.

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

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 60px | 600 | 1 | -0.025em | — | __greycliff_d64c0a | Large centered announcement headline above the video. |
| h1 | 36px | 600 | 1.11 | 0 | — | __greycliff_d64c0a | Primary page or major content heading. |
| h2 | 30px | 600 | 1.2 | 0 | — | __greycliff_d64c0a | Announcement card and FAQ section headings. |
| body | 18px | 400 | 1.63 | 0 | — | __greycliff_d64c0a | Founder announcement paragraphs and explanatory copy. |
| caption | 16px | 500 | 1.5 | 0 | — | __greycliff_d64c0a | Supporting labels and smaller interface copy. |
| button | 16px | 600 | 1.5 | 0 | — | __greycliff_d64c0a | Emphasized pill-shaped navigation or action controls. |
| link | 16px | 400 | 1.5 | 0 | — | __greycliff_d64c0a | Navigation, footer destinations, and inline references. |

## Spacing & layout

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

A centered, single-column announcement occupies the main page, with the content constrained to a measured 960px maximum width. The header aligns the brand at left, navigation through the middle, and sign-in at right. The hero heading is centered above a wide video; below it, the message card and FAQ stack vertically. Major blocks have generous measured section spacing, while paragraph and control groupings remain comfortably readable. The footer changes to a multi-column link layout.

## Shape & elevation

- Radius: button `9999px` · card `24px` · media `16px` · link `9999px` · xs `8px` · sm `16px` · md `24px` · pill `9999px`
- Shadow `xl` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(30, 41, 59, 0.15) 0px 25px 50px -12px`
- Shadow `hairline` (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`
- Motion: standard transition `0.1s cubic-bezier(0, 0, 0.2, 1)` on interactive elements.

The interface is mostly flat, with pale borders and surfaces doing more work than outlines. The announcement and FAQ panels use a soft, broad shadow for gentle separation from the white canvas. Avoid stacking layers or adding strong elevation; the video frame and card corners provide the main visual contours.

## Imagery

A large embedded founder video is the key visual, framed with rounded corners and a familiar play affordance. The footage is warm, photographic, and people-focused, with a dark shirt and home-office background; its browns and blacks are image content rather than core brand colors. The rest of the page uses little decorative imagery, letting the video carry the emotional emphasis.

## Components

### Top navigation

Brand mark and wordmark sit left, links run across the center, and sign-in is aligned at the far right; text remains small and slate-toned.

### Announcement headline

A centered, two-line dark headline introduces the acquisition above the video.

### Founder video

Wide embedded video with rounded media corners, photographic thumbnail, and a central play control.

### Founder message card

White rounded panel containing a section heading, several paragraphs, closing, and signature, elevated with a soft shadow.

### FAQ accordion

A separate FAQ panel with a clear heading and stacked pale-gray question rows, each ending in a disclosure chevron.

### Footer link columns

Brand and sign-in lead into grouped Product, Company, Resources & Support, and Social links.

### Measured component styles

- **Primary button** (“Solutions”): transparent background · text #475569 · radius 9999px · padding 8px 16px · 600 16px __greycliff_d64c0a
- **Link** (“Home”): transparent background · text #64748b · radius 0px · padding 0px · 400 16px __greycliff_d64c0a
- **Card** (“Message from Dan Siroker, Co-Founder & C”): transparent background · text #334155 · radius 24px · padding 48px 32px · 400 16px __greycliff_d64c0a · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(30, 41,

## Do

- Keep the page canvas white and uncluttered.
- Center the announcement headline above the video.
- Use dark ink for headings and muted slate for secondary links.
- Give the video and content cards rounded corners.
- Separate the message and FAQ with generous vertical breathing room.
- Use soft shadows sparingly to distinguish the content panels.

## Don't

- Do not treat video-frame browns as brand palette colors.
- Do not add bright accent bands or decorative gradients.
- Do not turn the announcement into a dense multi-column layout.
- Do not make body copy compete with the headline.
- Do not use heavy borders or pronounced stacked shadows.
- Do not crowd the video against nearby content.

## Agent prompt

Build a new announcement-style page in the Limitless visual language. Use Gallery White (#ffffff) as the dominant canvas, Midnight Ink (#0f172a) for the main heading, and Slate Copy (#475569) or Quiet Slate (#64748b) for secondary navigation and links. Use Cloud Gray (#f2f3f5) only for quiet surfaces and hairlines. Set the content in a rounded modern sans-serif similar to Greycliff, with a centered headline, a wide rounded video or image, and vertically stacked message and FAQ panels. Keep content within the measured 960px maximum width, maintain generous section pauses, and keep paragraph density readable. Use soft, broad card shadows sparingly. Keep image colors inside the media itself; do not promote them into interface colors. Finish with a compact, grouped-link footer.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | video | Centered single-column announcement with headline, wide founder video, message card, then FAQ panel. | Play embedded video, Read founder statement, Expand FAQ questions | Centered headline, Rounded media frame, Elevated message card, Pale accordion rows |
| 2 | footer | Brand and sign-in above grouped link columns, with app-store badges near the bottom. | Browse grouped destinations, Open social links, Access app downloads | Multi-column link groups, Muted footer text, Compact brand row |

## Source CSS custom properties (selected)

```css
--tw-prose-quote-borders: #e5e7eb;
--tw-prose-kbd-shadows: 17 24 39;
--tw-prose-pre-bg: #1f2937;
--tw-prose-th-borders: #d1d5db;
--tw-prose-td-borders: #e5e7eb;
--tw-prose-invert-quote-borders: #374151;
--tw-prose-invert-kbd-shadows: 255 255 255;
--tw-prose-invert-pre-bg: rgba(0,0,0,.5);
--tw-prose-invert-th-borders: #4b5563;
--tw-prose-invert-td-borders: #374151;
--tw-border-opacity: 1;
--tw-bg-opacity: 1;
--tw-text-opacity: 1;
```

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