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

# Rally — Shutdown Notice · Design System

> A quiet farewell against a vivid cosmic backdrop

**Theme:** dark · **Industry:** saas · **Source:** https://rally.space/ · **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._

Rally presents its shutdown announcement in a compact, rounded dark card over a deep-blue space scene. A bright illustrated globe and restrained footer links give the page a warm, reflective farewell rather than a conventional product landing page.

## North star

Keep the interface quiet and legible, using a single rounded notice card against a cinematic dark scene and letting illustration provide the color.

## Overview

The page contrasts a slim white brand strip with a broad, deep-night scene and a near-black footer. A dark navy announcement card sits prominently over the space backdrop, while pale text keeps the shutdown message readable and calm. The visual hierarchy is restrained: a compact sans-serif heading leads into larger-feeling, generously spaced copy, and monospaced footer labels add a quiet technical character. A colorful illustrated globe supplies the main visual focal point; its bright cyan, green, and pink tones belong to the artwork, not the core interface palette. The composition uses a centered content region and broad breathing room around the card and globe, followed by a low-density footer organized into link groups. Rounded card corners soften the otherwise dark, high-contrast treatment. Keep interface surfaces simple and let the illustration carry the page’s color and emotional warmth.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Midnight Moss | `#0d100d` | `--color-midnight-moss` | brand | Near-black page canvas and footer ground; anchors the dark theme. |
| Moonlit Gray | `#e7e8ea` | `--color-moonlit-gray` | neutral | Primary muted copy color for the shutdown message and supporting text. |
| Deep Orbit | `#081028` | `--color-deep-orbit` | surface | Dark navy announcement card surface, distinct from the near-black canvas. |
| Paper White | `#ffffff` | `--color-paper-white` | neutral | Top brand strip and selected heading or navigation text. |
| Quiet Ash | `#9e9f9e` | `--color-quiet-ash` | neutral | Subdued navigation and footer link text. |
| Soft Graphite | `#999999` | `--color-soft-graphite` | neutral | Low-emphasis footer copy; secondary against the dark footer. |
| Distant Charcoal | `#666666` | `--color-distant-charcoal` | neutral | Faint footer text with minimal visual emphasis. |

### Semantic aliases

`--color-canvas` → `#0d100d` (Midnight Moss) · `--color-surface` → `#081028` (Deep Orbit) · `--color-surface-2` → `#ffffff` (Paper White) · `--color-text` → `#ffffff` (Paper White) · `--color-text-muted` → `#e7e8ea` (Moonlit Gray) · `--color-text-subtle` → `#9e9f9e` (Quiet Ash)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#0d100d` | 19.14:1 | AAA |
| `#ffffff` | `#081028` | 18.83:1 | AAA |
| `#e7e8ea` | `#0d100d` | 15.61:1 | AAA |
| `#e7e8ea` | `#081028` | 15.36:1 | AAA |
| `#e7e8ea` | `#ffffff` | 1.23:1 | fail |
| `#9e9f9e` | `#0d100d` | 7.21:1 | AAA |
| `#9e9f9e` | `#081028` | 7.09:1 | AAA |
| `#9e9f9e` | `#ffffff` | 2.66:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| TikTok Sans Variable | `--font-display` | webfont | 400 | Announcement heading and prominent sans-serif text. | Inter |
| Fragment Mono | `--font-mono` | webfont | 400, 700 | Body copy, navigation, captions, and footer links. | IBM Plex Mono |

- **TikTok Sans Variable:** Measured at regular weight; keep headings sentence-case and clean, without decorative tracking.
- **Fragment Mono:** Regular weight with subtly open tracking; use its monospaced texture for concise copy and utility labels.

### Type scale — Augmented Fourth (ratio ≈ 1.414, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 32px | 400 | 1.1 | 0 | — | TikTok Sans Variable | Shutdown announcement heading inside the central card. |
| h2 | 24px | 400 | 1.4 | 0.015em | — | TikTok Sans Variable | Supporting section heading where present. |
| body | 16px | 400 | 1.62 | 0.01em | — | Fragment Mono | Main announcement paragraphs and explanatory copy. |
| caption | 13px | 400 | 1.62 | 0.01em | — | Fragment Mono | Small secondary labels and supporting details. |
| nav | 13px | 400 | 1.62 | 0.01em | — | Fragment Mono | Compact footer navigation and link labels. |
| code | 13px | 400 | 1.62 | 0.01em | — | Fragment Mono | Monospaced utility text; no code block is shown. |

OpenType features in use: `"cv04"`.

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 4, 10, 12, 15, 20, 24, 30, 32, 40, 48, 120 px.
- Section rhythm 48px · element gap 10px · card padding 44px · max content width 800px.

The page is organized as a narrow white brand strip, a full-width space scene, and a full-width near-black footer. The announcement card is centered within the scene, with left-aligned text and generous internal breathing room. Its measured page maximum width is 800px; the card uses 24px corners and measured padding of 44px. Keep section transitions direct and the overall density comfortable. Footer content sits in separate link groups, aligned to the left rather than spread across a dense grid.

## Shape & elevation

- Radius: card `24px`
- Shadow `inset` (nav): `rgba(255, 255, 255, 0) 0px -2px 4px 0px inset`

The card is separated from the surrounding scene primarily through its deeper navy fill and rounded silhouette. The screenshot shows no strong borders or pronounced shadows. Keep layering restrained: the illustration is the background, the notice card sits above it, and the footer remains a flat near-black band.

## Imagery

A full-bleed, dark-blue space illustration fills the main scene, with small stars and a large luminous globe rising near the lower center. The globe is colorful and softly glowing, with painterly land and cloud forms. Treat its varied hues as artwork-specific rather than interface accents; preserve clear negative space around the announcement card.

## Components

### Brand strip

Slim white band at the top with a small, centered Rally mark; visually separate it from the dark scene below.

### Shutdown notice card

Centered dark navy panel with 24px measured corner radius and 44px measured padding; left-align the heading and announcement copy.

### Space backdrop

Full-width deep-blue illustrated scene with sparse stars and a large glowing globe near the lower center.

### Footer link groups

Near-black footer with compact monospaced labels and links arranged under Company and Resources.

### Announcement copy

Short, readable paragraphs in pale gray, with clear separation between the shutdown information and closing note.

### Measured component styles

- **Card** (“We've decided to wrap up Rally Rally has”): background #081028 · text #000000 · radius 24px · padding 48px 40px · 400 12px sans-serif
- **Navigation item** (“About”): transparent background · text #ffffff · radius 0px · padding 0px · 400 13px Fragment Mono

## Do

- Use the near-black canvas as the page foundation.
- Place the notice on a Deep Orbit card.
- Keep announcement text left-aligned and easy to scan.
- Use monospaced type for navigation and footer links.
- Let the illustrated globe provide the vivid color.
- Separate the white brand strip from the dark scene.

## Don't

- Do not introduce unmeasured interface colors.
- Do not style illustration colors as core brand accents.
- Do not add heavy borders or prominent shadows.
- Do not crowd the card with extra interface elements.
- Do not turn the footer into a dense navigation grid.
- Do not use decorative all-caps display typography.

## Agent prompt

Build a new page in Rally’s restrained farewell style. Use Midnight Moss (#0d100d) for the page ground and footer, Deep Orbit (#081028) for a prominent rounded content card, and Moonlit Gray (#e7e8ea) for readable supporting copy. Reserve Paper White (#ffffff) for a narrow brand header and high-emphasis text; use Quiet Ash (#9e9f9e), Soft Graphite (#999999), and Distant Charcoal (#666666) only for subdued secondary footer text. Set headings in a clean sans-serif similar to Inter and body or utility labels in a monospaced face similar to IBM Plex Mono. Center the main content region, keep its text left-aligned, and use generous whitespace. If adding imagery, use a cinematic space illustration as the backdrop and keep its colors confined to the artwork. Keep elevation subtle, corners soft, and navigation sparse.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | other | Centered left-aligned notice card over a full-width space scene, followed by a low-density footer. | shutdown notice, scannable paragraphs, grouped footer links | rounded navy card, full-bleed illustrated backdrop, dark footer band |

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