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

# Fluid Touch · Design System

> A spacious dark canvas with a vivid pink signal.

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

Fluid Touch pairs expansive dark sections and bold white typography with vivid pink accents. Product and team imagery bring warmth and dimension to an otherwise restrained, spacious layout.

## North star

Keep the page calm and spacious on deep charcoal, using oversized white type and pink only to guide attention.

## Overview

The visual system is built on two near-black canvases: #191c26 carries the hero and most editorial content, while #121318 creates a distinctly darker product showcase and footer. White headings and navigation stay crisp against these surfaces; muted #a9afc3 supports quieter copy. Pink is a restrained signal rather than a broad fill: #ed1672 marks primary pill buttons and select navigation, while #f31765 appears on inline links and small heading accents. Poppins gives headings a rounded, confident display character, balanced by lighter Muli body copy. The opening hero centers an oversized two-line headline over a subtle star-speckled field. Lower sections shift into photographic storytelling, award marks, product presentation, a gradient-backed team feature, and a compact editorial feed. Broad section spacing keeps these varied content types from competing. Use flat dark surfaces and minimal outlines; let imagery and section transitions supply depth instead of shadows.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Paper White | `#ffffff` | `--color-paper-white` | neutral | Headings, navigation, article titles, and outlined award badges against dark surfaces. |
| Night Canvas | `#191c26` | `--color-night-canvas` | brand | Primary page canvas behind the hero, about story, team, media feed, and most section transitions. |
| Deep Ink | `#121318` | `--color-deep-ink` | surface | Darker product showcase band and footer surface, separating these areas from the main canvas. |
| Fade Black | `#000000` | `--color-fade-black` | semantic | Black component of a measured image-overlay gradient; use for photo fade, not as a defining canvas. |
| Link Pink | `#f31765` | `--color-link-pink` | accent | Inline article links and small pink text accents. |
| Signal Pink | `#ed1672` | `--color-signal-pink` | accent | Primary pill CTA fills, active navigation, and the small punctuation accents in headings. |
| Mist Lilac | `#a9afc3` | `--color-mist-lilac` | semantic | Muted supporting copy and subdued footer text on charcoal backgrounds. |
| Slate Trace | `#42454f` | `--color-slate-trace` | neutral | Minor low-contrast footer detail; not a dominant brand surface or text color. |

### Semantic aliases

`--color-canvas` → `#191c26` (Night Canvas) · `--color-surface` → `#121318` (Deep Ink) · `--color-text` → `#ffffff` (Paper White) · `--color-text-muted` → `#a9afc3` (Mist Lilac) · `--color-border` → `#ffffff` (Paper White) · `--color-accent` → `#ed1672` (Signal Pink) · `--color-accent-2` → `#f31765` (Link Pink) · `--color-on-accent` → `#ffffff` (Paper White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#191c26` | 17:1 | AAA |
| `#ffffff` | `#121318` | 18.55:1 | AAA |
| `#a9afc3` | `#191c26` | 7.78:1 | AAA |
| `#a9afc3` | `#121318` | 8.49:1 | AAA |
| `#ed1672` | `#191c26` | 4.01:1 | AA-large |
| `#ed1672` | `#121318` | 4.38:1 | AA-large |

### Gradients

- `linear-gradient(to right, rgba(0, 0, 0, 0), rgb(0, 0, 0)), url("https://www.fluidtouch.com/images/background/about-us-back.jpg")`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Muli | `--font-body` | webfont | 300, 400, 700 | Body copy, navigation, captions, and supporting text. | Nunito Sans |
| Poppins | `--font-display` | webfont | 500, 700, 400 | Display and section headings, prominent article links, buttons, and uppercase eyebrows. | Montserrat |

- **Muli:** Light body weight creates an airy contrast to headings; use regular for nav and captions.
- **Poppins:** Bold, rounded headings; medium-weight links and buttons. Eyebrows are uppercase with modest tracking.

### Type scale — Custom (ratio ≈ 1.828, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 110px | 700 | 1.2 | 0 | — | Poppins | Oversized hero headline treatment. |
| h1 | 64px | 700 | 1.1 | 0 | capitalize | Poppins | Primary hero and major section headings. |
| h2 | 22px | 500 | 1.3 | 0 | capitalize | Poppins | Secondary headings and editorial titles. |
| body | 18px | 300 | 1.5 | 0 | — | Muli | Introductory and explanatory paragraph copy. |
| caption | 14px | 400 | 1.7 | 0 | — | Muli | Small dates, labels, and supporting details. |
| button | 14.5px | 500 | 1.25 | 0 | — | Poppins | Compact CTA labels in pill buttons. |
| nav | 18px | 400 | 1 | 0 | — | Muli | Header navigation and straightforward menu links. |
| link | 22px | 500 | 1.3 | 0 | capitalize | Poppins | Prominent article titles and section links. |
| eyebrow | 16px | 400 | 1.5 | 0.05em | uppercase | Poppins | Small uppercase labels above section headings. |

## Spacing & layout

- Base unit **1px**, density **spacious**.
- Scale (most used values): 1, 2, 6, 10, 13, 15, 16, 18, 20, 27, 28, 32, 35, 40, 42, 45 px.
- Section rhythm 210px · element gap 20px · card padding — · max content width 1200px.

Use a spacious, centered composition within the measured 1200px page maximum. The hero centers its headline and supporting line; later sections alternate between left-aligned editorial content, split photographic storytelling, and multi-column content. The product band is a large, dark showcase area; the careers feature returns to a broad split layout. Keep section transitions generous, with the measured 210px section gap and 20px element gap as rhythm references. Overall density is low, with ample negative space around headings and imagery.

## Shape & elevation

- Radius: button `9999px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.4s ease-in-out` on interactive elements.

The page is largely flat: dark section bands, imagery, and background transitions establish hierarchy without visible shadows. Keep card treatment restrained and avoid adding elevated panels. The award badges use thin white outlines, while primary buttons are solid pink pills. Photo overlays provide depth and text contrast where needed.

## Imagery

Use photographic assets for the about story and team feature, with real environments and people rather than decorative illustration. The about image spans its section and is darkened to keep white copy legible. Product and award visuals sit within the dark showcase area; article thumbnails support the media feed. The hero’s sparse star-speckled field is atmospheric background texture, not a substitute for product imagery.

## Components

### Header navigation

Fluid Touch logo at left with a horizontal right-side menu. Use light Muli-style links on the dark canvas and pink for the active item.

### Hero headline

Centered, oversized bold Poppins headline, broken across lines, with a small pink punctuation accent and muted supporting sentence.

### Pill CTA

Solid #ed1672 capsule with white Poppins text; measured padding is 10px 20px and the radius is 100px.

### Award strip

A row of compact recognition marks on a dark band, including white outlined badge treatments and photographic or graphic detail.

### Editorial feed

Section eyebrow and heading above a short introduction and article entries with thumbnails, publication labels, dates, and pink Read links.

### Footer columns

Compact dark footer with brand/location details and three link groups for products, quick links, and company information.

### Measured component styles

- **Primary button** (“Get the full story >”): background #ed1672 · text #ffffff · border 1px solid · radius 100px · padding 10px 20px · 500 14.4px Poppins
- **Link** (“In Pursuit Of Appiness, The Apple Accele”): transparent background · text #ffffff · radius 0px · padding 0px · 500 22px Poppins · capitalize
- **Badge** (“iMore”): transparent background · text #ffffff · border 1px solid #ffffff · radius 0px · padding 2px 16px 1px 16px · 400 14px Muli
- **Navigation item** (“Home About Us Careers Newsroom Blogs Con”): transparent background · text #212529 · radius 0px · padding 0px · 400 16px Poppins

## Do

- Use #191c26 as the main page canvas.
- Reserve #121318 for darker showcase and footer bands.
- Set major headings in bold Poppins with strong scale contrast.
- Use Muli-style light text for explanatory copy.
- Apply #ed1672 to primary CTA pills and active states.
- Give sections generous vertical breathing room.
- Use photography with dark overlays when copy sits on top.

## Don't

- Do not turn pink into a large background field.
- Do not add heavy shadows or raised-card effects.
- Do not crowd the hero with extra controls or content.
- Do not use bright white as a full-section background.
- Do not apply star textures to every section.
- Do not make supporting copy as bold as the headings.

## Agent prompt

Build a new Fluid Touch-style page using a spacious dark canvas and clear editorial hierarchy. Use Night Canvas (#191c26) for the primary background and Deep Ink (#121318) for selected showcase or footer bands. Set bold, rounded headings in Poppins and light supporting copy in Muli; use Paper White (#ffffff) for key text and Mist Lilac (#a9afc3) for quieter copy. Signal Pink (#ed1672) should be reserved for pill CTAs and active states, with Link Pink (#f31765) for text links. Center the hero, then vary section layouts between split photography and editorial content. Keep generous section spacing, restrained outlines, and flat surfaces. Use real product, workplace, or team photography with dark overlays where needed; treat starfield texture as an occasional atmospheric detail.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered headline and supporting line on a spacious dark canvas beneath horizontal navigation. | Primary brand introduction, Single supporting message | Oversized white headline, Pink punctuation accent, Subtle starfield |
| 2 | feature-split | Full-width photographic story with copy placed to one side. | Company introduction, Story CTA | Dark photo overlay, Eyebrow label, Pink pill button |
| 3 | logo-cloud | Award marks and product imagery form a horizontal band above showcase content. | Recognition at a glance | Dark background, Small outlined badges, Image strip |
| 4 | product-showcase | Large dark product band with a left-aligned heading and supporting copy. | Product portfolio introduction | Deep charcoal surface, Light text, Product visuals |
| 5 | team | Broad career feature with copy on the left and a team portrait on the right. | Recruitment invitation, Join-us CTA | Purple-toned image background, White heading, Pink pill button |
| 6 | content-feed | Editorial heading and introduction above a two-column arrangement of article links and thumbnails. | Browse press coverage, Read article links | Eyebrow label, Publication and date metadata, Pink text links |
| 7 | footer | Compact footer with brand details at left and three grouped link columns at right. | Product navigation, Company navigation | Deep dark surface, Small muted location text, Grouped links |

## Source CSS custom properties (selected)

```css
--color-primary: #ED1672;
--color-secondary: #C610BC;
--color-tertiary: #18C8FF;
```

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