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

# Tapbots — Ivory for Mastodon · Design System

> A playful product story against a cinematic dark canvas.

**Theme:** dark · **Industry:** consumer-electronics · **Source:** https://tapbots.com/ivory/ · **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._

Ivory’s launch page pairs a near-black editorial canvas with vivid product imagery and restrained violet accents. Long, spacious sections move from the app’s identity and platform previews to features, testimonials, and a compact company footer.

## North star

Let cinematic product imagery lead, and use a quiet dark editorial frame with precise violet accents to keep the story legible.

## Overview

The visual system is led by a cinematic, near-black canvas (#1a1a1a) and an even darker navigation and hero surface (#05050b). White and cool gray system text keeps long product explanations readable, while pale lavender marks emphasized copy and brighter violet anchors the Mastodon explainer band. A saturated blue-to-pink gradient appears as a selective graphic treatment, not a general background rule. Typography uses the Apple system sans-serif, with light, large headings and compact, low-weight body copy. The page is a long, single-column editorial sequence: full-bleed product imagery punctuates centered text, alternating dark and gray platform showcases, then a two-column feature list. Screenshots and polished 3D mascots carry most of the visual personality; surrounding layouts stay relatively flat and restrained. Spacious section breaks give each product story room, while rounded download and support links provide small, clear actions.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Charcoal Canvas | `#1a1a1a` | `--color-charcoal-canvas` | neutral | Main dark canvas for the feature sequence, icon showcase, reviews, and page background. |
| Soft Ash | `#ababab` | `--color-soft-ash` | neutral | Muted body copy and footer text against the dark surfaces. |
| Night Surface | `#05050b` | `--color-night-surface` | surface | Near-black navigation, opening product backdrop, and download call-to-action sections. |
| Slate Band | `#484848` | `--color-slate-band` | surface | Broad gray background band behind the iPadOS and macOS platform showcases. |
| Coral Link | `#ff3543` | `--color-coral-link` | accent | Small author-name links, including Paul, within page copy. |
| Silver Copy | `#c3c3c3` | `--color-silver-copy` | neutral | Secondary footer and supporting text. |
| Lavender Highlight | `#deccff` | `--color-lavender-highlight` | accent | Emphasized phrases within the opening product description. |
| Paper White | `#ffffff` | `--color-paper-white` | neutral | Primary headings, navigation text, and high-contrast body or link text. |
| Lilac Action | `#ba94ff` | `--color-lilac-action` | accent | App Store navigation link and support button text. |
| Graphite Panel | `#2c2c2c` | `--color-graphite-panel` | surface | Background for the two-column Features section. |
| Deep Plum | `#301e4f` | `--color-deep-plum` | surface | Background of the rounded Ivory help button. |
| Mastodon Violet | `#7047ba` | `--color-mastodon-violet` | brand | Full-width Mastodon explainer section background. |
| Cloud Gray | `#b3b3b3` | `--color-cloud-gray` | neutral | Supporting descriptive copy; secondary to white headings. |
| Periwinkle Mist | `#cdd4f8` | `--color-periwinkle-mist` | accent | Cool-toned text accent within the product copy. |
| Electric Sky | `#6cb0ff` | `--color-electric-sky` | accent | Blue stop in the measured blue-to-pink text gradient. |
| Vivid Orchid | `#f747ff` | `--color-vivid-orchid` | accent | Pink stop paired with blue in the measured gradient treatment. |
| Footer Black | `#111111` | `--color-footer-black` | surface | Distinct darker background for the final Tapbots company footer. |

### Semantic aliases

`--color-canvas` → `#1a1a1a` (Charcoal Canvas) · `--color-surface` → `#05050b` (Night Surface) · `--color-surface-2` → `#484848` (Slate Band) · `--color-surface-3` → `#2c2c2c` (Graphite Panel) · `--color-surface-4` → `#111111` (Footer Black) · `--color-text` → `#ffffff` (Paper White) · `--color-text-muted` → `#ababab` (Soft Ash) · `--color-text-subtle` → `#c3c3c3` (Silver Copy) · `--color-accent` → `#deccff` (Lavender Highlight) · `--color-accent-2` → `#ff3543` (Coral Link) · `--color-accent-3` → `#7047ba` (Mastodon Violet)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#1a1a1a` | 17.4:1 | AAA |
| `#ffffff` | `#05050b` | 20.33:1 | AAA |
| `#ffffff` | `#484848` | 9.15:1 | AAA |
| `#ffffff` | `#2c2c2c` | 13.97:1 | AAA |
| `#ababab` | `#1a1a1a` | 7.58:1 | AAA |
| `#ababab` | `#05050b` | 8.85:1 | AAA |
| `#ababab` | `#484848` | 3.98:1 | AA-large |
| `#ababab` | `#2c2c2c` | 6.08:1 | AA |
| `#c3c3c3` | `#1a1a1a` | 9.87:1 | AAA |
| `#c3c3c3` | `#05050b` | 11.53:1 | AAA |

### Gradients

- `linear-gradient(to right bottom, rgb(108, 176, 255), rgb(247, 71, 255))`
- `linear-gradient(rgb(231, 230, 255), rgb(138, 137, 175))`
- `linear-gradient(rgb(255, 255, 255), rgb(217, 195, 255))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| -apple-system | `--font-body` | system | 300, 600, 400, 500 | All page typography, including headings, body copy, navigation, and action links. | Inter |

- **-apple-system:** System sans-serif; light weights for prominent headings and body, medium action text, normal casing, no measured tracking.

### Type scale — Minor Third (ratio ≈ 1.189, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 36px | 300 | 1.2 | 0 | — | -apple-system | Lightweight primary product or page headline. |
| h2 | 32px | 600 | 0.84 | 0 | — | -apple-system | Strong section headline, including feature and explainer titles. |
| h3 | 28px | 600 | 1.1 | 0 | — | -apple-system | Subsection titles within platform and feature content. |
| h4 | 24px | 300 | 1.4 | 0 | — | -apple-system | Light supporting heading or secondary product statement. |
| body | 18px | 300 | 1.4 | 0 | — | -apple-system | Light descriptive copy and product explanations. |
| button | 18px | 500 | 1.4 | 0 | — | -apple-system | Medium-weight support and action labels. |
| nav | 24px | 300 | 1.4 | 0 | — | -apple-system | Lightweight brand and navigation text. |
| link | 20px | 400 | 1.7 | 0 | — | -apple-system | Inline links and prominent download or community actions. |

## Spacing & layout

- Base unit **1px**, density **spacious**.
- Scale (most used values): 10, 12, 15, 17, 20, 25, 27, 29, 30, 34, 40, 48, 80, 144 px.
- Section rhythm 216px · element gap — · card padding — · max content width 640px.

Build a long, spacious, mostly single-column narrative with a measured content max width of 640px for text. Alternate centered copy and full-bleed or broad product media; platform showcase sections use offset image-and-copy compositions, including a right-aligned macOS block. The feature section is a two-column list, while the footer divides into four columns. Section gaps are generous, with notably large breaks around major story transitions. Keep text compact within each section and let media provide the scale.

## Shape & elevation

- Radius: button `9999px` · media `50%` · link `9999px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.15s ease-out` on interactive elements.

The measured page has no defined shadows. Keep sections predominantly flat, using distinct background bands rather than cards or borders to separate content. Create depth through large product mockups, overlapping devices, full-bleed mascot artwork, and contrast between dark surfaces and the violet explainer section. Round action controls into pill shapes.

## Imagery

Use polished product screenshots on phone, tablet, and desktop hardware, mixed with distinctive 3D Ivory elephant mascots and branded app icons. The opening artwork and testimonial backdrop are cinematic, dark, and edge-to-edge; platform images are large framed previews. Feature illustrations and UI captures sit alongside concise copy. Treat colorful interface details as image content, not as the page’s core color palette.

## Components

### Product hero

Full-bleed cinematic artwork on #05050b, followed by a centered Ivory identity and restrained, highlighted product copy.

### Download block

Centered App Store link with system-requirements copy and a rounded help action; lilac is the key text accent.

### Mastodon explainer

Solid #7047ba band pairing explanatory copy with a network diagram and a prominent rounded community link.

### Platform showcases

Large iPad and Mac interface imagery alternates with short text on a shared #484848 background band.

### Feature list

Two-column feature content on #2c2c2c, combining small illustrative icons, headings, and compact supporting text.

### Review showcase

Centered testimonial text and attribution layered visually over oversized mascot imagery on a dark background.

### Company footer

Compact #111111 footer with centered brand identity and company description, followed by multi-column links.

### Measured component styles

- **Primary button** (“Need Help with Ivory?”): background #301e4f · text #ba94ff · radius 40px · padding 12px 20px 12px 15px · 500 18px -apple-system
- **Link** (“Paul”): transparent background · text #ff3543 · radius 0px · padding 0px · 400 20px -apple-system
- **Navigation item** (“Ivory From the creators of the award-win”): background #05050b · text #ffffff · radius 0px · padding 0px 0px 144px 0px · 400 18px -apple-system

## Do

- Keep the main canvas dark and the section transitions clearly differentiated.
- Use #05050b for the opening product atmosphere and download areas.
- Reserve #7047ba for a distinct Mastodon explainer band.
- Set product copy in a clean system sans-serif with light weights.
- Make screenshots and 3D mascots the dominant visual moments.
- Use generous section spacing and concise supporting copy.

## Don't

- Do not turn every section into a raised card.
- Do not use the gradient as a universal background treatment.
- Do not let colorful mockup pixels redefine the site palette.
- Do not crowd full-width product imagery with extra decoration.
- Do not replace the long editorial flow with a dense dashboard layout.
- Do not add borders or shadows without a measured visual need.

## Agent prompt

Create a new product-story page in Tapbots’ Ivory style. Use a near-black #05050b opening and download surface, with #1a1a1a as the main canvas and a separate #111111 footer. Set headings and body in a system sans-serif close to Inter, favoring light weights and clear contrast between heading and supporting copy. Organize the page as a spacious, long editorial sequence: centered product introduction, large device showcases, a distinct #7047ba explainer band, alternating platform features, a two-column feature list, testimonial imagery, and a compact footer. Make polished screenshots and expressive 3D product artwork the primary visual assets. Use #deccff, #ba94ff, and white sparingly for emphasis and actions. Keep the layout flat, avoid invented shadows, and reserve gradients for selective graphic accents.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed dark artwork followed by centered brand and product copy. | Product introduction, Inline highlighted claims | Near-black canvas, 3D mascot artwork, Centered copy |
| 2 | cta | Centered download action, system requirements, and help link on a dark band. | App Store download, System requirements, Help link | Dark surface, Rounded support button, Lilac action text |
| 3 | feature-split | Purple explainer band with network imagery and aligned explanatory text. | Concept explanation, Join-community action | Violet background, Network diagram, Pill link |
| 4 | feature-split | Alternating feature images and text within a dark, single-column sequence. | Feature education, Sequential scanning | Dark canvas, Large UI illustrations, Alternating alignment |
| 5 | product-showcase | Large tablet preview and supporting copy on a gray section band. | Platform-specific benefits, Device preview | Gray background, Tablet mockup, Text-image split |
| 6 | product-showcase | Desktop preview with right-aligned platform copy on the gray band. | Platform-specific benefits, Feature explanation | Gray background, Mac mockup, Right-aligned text |
| 7 | gallery | Centered icons and copy followed by a horizontal theme color display and product artwork. | Visual customization, Theme browsing | Dark canvas, App icon gallery, Color swatches |
| 8 | feature-grid | Two-column feature list on a graphite section background. | Feature discovery, Scannable descriptions | Two-column grid, Small feature icons, Compact copy |
| 9 | testimonials | Centered review text layered over a large mascot image. | Social proof, Quote attribution | Dark image backdrop, Centered quote, Mascot artwork |
| 10 | cta | Compact centered download and help content on the dark canvas. | Repeat download action, Support access | App Store link, Small requirements copy, Rounded help control |
| 11 | footer | Darker footer with centered company message and four-column link area. | Company information, Site navigation | #111111 background, Centered brand mark, Multi-column links |

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