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

# IFTTT · Design System

> Bold, friendly automation on a bright canvas

**Theme:** light · **Industry:** saas · **Source:** https://ifttt.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._

IFTTT pairs an airy white canvas and oversized rounded typography with bold black calls to action. Bright app-inspired colors, automation examples, and dark feature bands make a long SaaS homepage feel approachable and easy to scan.

## North star

Keep the canvas open and typography bold, using rounded black controls and vivid color mainly to make app connections tangible.

## Overview

The page builds its identity from a white canvas, near-black typography, and rounded Museo Sans Rounded lettering. A centered hero headline and black pill CTA establish a strong first impression, while the app-search field and floating app tiles make automation tangible. Cyan and orange are prominent in the hero artwork and selected full-width bands; treat the vivid greens, pinks, purples, and blues as supporting app-example colors rather than a competing core palette. The layout alternates generous white explanatory sections with compact, colorful Applet cards and a dark subscription feature area. Large gaps and centered headings give the page room to breathe despite its length and dense content. Rounded controls and cards repeat throughout, with thin light-gray outlines for inputs and secondary elements. Keep text bold and legible, use color in purposeful blocks, and let product examples carry much of the visual variety.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Main page canvas, white text on dark surfaces, and the light secondary trial CTA. |
| Carbon Ink | `#111111` | `--color-carbon-ink` | brand | Primary text, black pill CTAs, navigation text, and major dark section bands. |
| Soft Graphite | `#585858` | `--color-soft-graphite` | neutral | Muted copy, subdued supporting text, and secondary outline details. |
| Signal Cyan | `#01b6ff` | `--color-signal-cyan` | accent | Bright accent for links, feature surfaces, and the cyan full-width section. |
| Quiet Line | `#e7e7e7` | `--color-quiet-line` | neutral | Fine outlines around search, input, and other lightly separated controls. |
| Mist Gray | `#eeeeee` | `--color-mist-gray` | surface | Pale gradient and understated card or section surfaces; secondary to white. |
| Applet Orange | `#ff5e19` | `--color-applet-orange` | accent | Orange full-width section and vivid app-connection artwork. |
| Cloud Gray | `#dfdfdf` | `--color-cloud-gray` | neutral | Occasional subdued text detail; not a defining surface color. |
| Charcoal Panel | `#292929` | `--color-charcoal-panel` | surface | Dark inset cards and supporting panels within black feature areas. |
| Electric Magenta | `#ff3cec` | `--color-electric-magenta` | semantic | Small accent within app or feature illustrations, not a core interface color. |
| App Green | `#0dd14e` | `--color-app-green` | semantic | Green app-example imagery and small illustrated details. |
| Deep Near-Black | `#171717` | `--color-deep-near-black` | surface | Minor dark link or media detail; visually close to the primary ink. |
| Fade Charcoal | `#2d2d2d` | `--color-fade-charcoal` | surface | Dark gradient fade used in media treatment, not a general section background. |
| Glow Pink | `#f834e6` | `--color-glow-pink` | semantic | Gradient color appearing in media treatment; reserve for illustration or media. |
| Media Blue | `#3e93e8` | `--color-media-blue` | semantic | Blue gradient color appearing in media treatment, not a primary interface accent. |
| Button Fog | `#f3f3f3` | `--color-button-fog` | neutral | Pale fill on the compact Business secondary button. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#111111` (Carbon Ink) · `--color-surface-2` → `#292929` (Charcoal Panel) · `--color-text` → `#111111` (Carbon Ink) · `--color-text-muted` → `#585858` (Soft Graphite) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-border` → `#e7e7e7` (Quiet Line) · `--color-accent` → `#01b6ff` (Signal Cyan) · `--color-accent-2` → `#ff5e19` (Applet Orange) · `--color-accent-3` → `#ff3cec` (Electric Magenta)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#111111` | `#ffffff` | 18.88:1 | AAA |
| `#111111` | `#292929` | 1.3:1 | fail |
| `#585858` | `#ffffff` | 7.11:1 | AAA |
| `#585858` | `#111111` | 2.65:1 | fail |
| `#585858` | `#292929` | 2.04:1 | fail |
| `#ffffff` | `#111111` | 18.88:1 | AAA |
| `#ffffff` | `#292929` | 14.55:1 | AAA |
| `#01b6ff` | `#ffffff` | 2.3:1 | fail |
| `#01b6ff` | `#111111` | 8.22:1 | AAA |
| `#01b6ff` | `#292929` | 6.33:1 | AA |

### Gradients

- `linear-gradient(rgb(255, 255, 255) 0%, rgb(238, 238, 238) 100%)`
- `linear-gradient(rgba(45, 45, 45, 0) 0%, rgb(45, 45, 45) 50%)`
- `linear-gradient(rgba(248, 52, 230, 0) 0%, rgb(248, 52, 230) 50%)`
- `linear-gradient(rgba(62, 147, 232, 0) 0%, rgb(62, 147, 232) 50%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Museo Sans Rounded | `--font-body` | webfont | 700, 900 | Display headings, body copy, navigation, links, buttons, and controls throughout the page | Nunito |

- **Museo Sans Rounded:** Use heavy 700 and 900 weights; rounded, friendly letterforms, compact line heights, and no uppercase transformation.

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

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 88px | 900 | 1 | 0 | — | Museo Sans Rounded | Oversized hero display headline. |
| h1 | 64px | 900 | 1 | 0 | — | Museo Sans Rounded | Primary page and section headline treatment. |
| h2 | 50px | 900 | 1 | 0 | — | Museo Sans Rounded | Major section headings, often centered. |
| h3 | 34px | 900 | 1.1 | 0 | — | Museo Sans Rounded | Feature and content subsection headings. |
| h4 | 28px | 900 | 1.1 | 0 | — | Museo Sans Rounded | Card and smaller feature headings. |
| body | 16px | 700 | 1.3 | 0 | — | Museo Sans Rounded | Bold explanatory copy and supporting paragraphs. |
| caption | 14px | 700 | 1.3 | 0 | — | Museo Sans Rounded | Small Applet labels, metadata, and compact supporting text. |
| button | 28px | 900 | 1.1 | 0 | — | Museo Sans Rounded | Large, bold text in primary pill calls to action. |
| nav | 20px | 900 | 1.1 | 0 | — | Museo Sans Rounded | Prominent header navigation labels. |
| link | 20px | 900 | 1.1 | 0 | — | Museo Sans Rounded | Bold, easy-to-spot links within page sections. |

## Spacing & layout

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

The page uses a wide, centered content frame measured at a 1344px maximum, with full-width color and dark bands breaking up the white canvas. The hero is centered, while explanatory content can split into aligned text and media columns; Applet examples form a compact multi-column grid. Sections follow a measured 48px rhythm, with comfortable density, generous open areas, and consistent 8px base spacing. Repeat centered headings and rounded cards to make the long page scannable.

## Shape & elevation

- Radius: button `9999px` · input `9999px` · card `24px` · media `50%` · nav `9999px` · link `24px` · xs `8px` · sm `12px` · md `16px` · lg `24px` · xl `32px` · pill `9999px`
- Shadow `inset` (other, media): `rgba(255, 255, 255, 0.2) 0px 0px 0px 2.26px inset`
- Shadow `sm` (link): `rgba(0, 0, 0, 0.24) 0px 1.5px 6px 0px`
- Shadow `inset-2` (nav): `rgb(17, 17, 17) 0px 0px 0px 2px inset`
- Motion: standard transition `0.2s ease` on interactive elements.

The interface is mostly flat: white space and solid section bands do the structural work. Use light-gray hairlines for search and control boundaries, rounded card edges, and restrained separation. A small shadow appears on individual example links; avoid broad, dramatic shadows. Dark panels and colorful illustrations provide layering without making the overall page feel raised.

## Imagery

Imagery is primarily product illustration and app-service iconography rather than photography. The hero frames floating cyan, orange, and black app panels around its centered headline and prompt field. Applet examples use vivid individual card colors with white icons and concise text. Dark subscription cards show small product-interface illustrations. Keep imagery crisp, contained, and subordinate to clear headings.

## Components

### Header navigation

Brand mark and rounded search field sit on the white header, with bold navigation links, an outlined Log in pill, and a black Get started pill.

### Hero prompt

Center a large, heavy two-line headline above short supporting copy, a wide rounded prompt input with a pale outline, and a black pill CTA.

### Applet example cards

Show colorful rounded cards with white service icons, bold multiline titles, and compact attribution or usage metadata in a grid.

### Dark feature band

Use a near-black section with centered white heading, dark rounded feature cards, illustrative interface graphics, and a white trial CTA.

### Search input

Use a white field with a light-gray border, fully rounded silhouette, muted prompt, and dark search icon.

### Secondary button

Set compact actions in a pale neutral fill with dark bold text; the Business button uses a measured thin border.

### Measured component styles

- **Primary button** (“Join today”): background #111111 · text #ffffff · radius 64px · padding 0px 40px · 900 28px Museo Sans Rounded
- **Secondary button** (“Business”): background #f3f3f3 · text #111111 · border 1px solid #e7e7e7 · radius 8px · padding 11px 19px · 700 18px Museo Sans Rounded
- **Link** (“Organize screenshots into a dedicated iO”): background #e8655c · text #ffffff · radius 24px · padding 0px · 500 18px Museo Sans Rounded · shadow rgba(0, 0, 0, 0.24) 0px 1.5px 6px 0px
- **Input**: transparent background · text #111111 · border 2px solid #e7e7e7 · radius 32px · padding 12px 44px · 700 18px Museo Sans Rounded
- **Card** (“Connect to more Applets Connect up to 20”): background #292929 · text #ffffff · border 2px solid #595959 · radius 24px · padding 32px · 500 18px Museo Sans Rounded
- **Navigation item** (“Explore Plans Log in Get started”): transparent background · text #111111 · radius 0px · padding 0px · 700 18px Museo Sans Rounded

## Do

- Use Museo Sans Rounded or a close rounded sans substitute.
- Keep headlines bold, dark, and immediately scannable.
- Use white as the dominant canvas between colored bands.
- Make primary actions black pills with white text.
- Reserve cyan and orange blocks for strong visual accents.
- Present app examples as colorful, rounded cards.

## Don't

- Do not turn the page into a dark-first interface.
- Do not use thin, formal typography for major headings.
- Do not spread illustration colors across every interface element.
- Do not replace the generous white gaps with dense layouts.
- Do not use sharp-cornered primary buttons or cards.
- Do not add heavy shadows to ordinary content sections.

## Agent prompt

Build a new IFTTT-style SaaS page around a bright white canvas (#ffffff) and bold Carbon Ink (#111111) typography. Use a rounded sans such as Museo Sans Rounded or Nunito, with heavy headings and friendly compact copy. Create a simple header, a centered headline-led hero, and a strong black pill CTA. Use Signal Cyan (#01b6ff) and Applet Orange (#ff5e19) selectively for large accents and app-connection illustrations; let smaller service tiles introduce their own colors without redefining the UI palette. Organize content into spacious white sections, a clear multi-column example-card grid, and a near-black feature band. Use Quiet Line (#e7e7e7) for subtle control borders and large rounded corners for cards and controls. Keep shadows restrained and prioritize clear scan paths.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered headline, supporting copy, prompt input, and CTA, framed by floating app illustrations. | Describe an automation, Start building | Large rounded headline, Prompt field, Black pill CTA, App tiles |
| 2 | how-it-works | Text and CTA aligned beside a large dark media panel. | Explain trigger and action, Join today | Left-aligned copy, Large rounded media area, Dark panel |
| 3 | integrations | Centered title and category tabs above a multi-column grid of colorful Applet cards. | Browse by category, Explore all Applets | Category pills, Colorful rounded cards, Service icons, Usage details |
| 4 | logo-cloud | Full-width near-black band with a centered field of app imagery. | Discover integrations | Dark background, Service logos, Centered composition |
| 5 | feature-split | White section with two aligned columns and left-oriented heading content. | Explore platform benefits | Two-column layout, Product imagery, Open white space |
| 6 | feature-grid | Full-bleed white section with four-column feature content. | Scan capabilities, Follow feature links | Four-column grid, Illustrated features, Compact links |
| 7 | feature-grid | Full-bleed white section repeating the four-column feature layout. | Compare capabilities, Explore feature links | Repeated grid, Illustrations, Wide white canvas |
| 8 | feature-grid | Full-bleed white section in a four-column grid. | Browse additional features, Follow feature links | Four-column layout, Small illustrations, Open spacing |
| 9 | cta | Full-width cyan band with centered content and supporting columns. | Review key benefits, Continue to plans | Signal cyan background, Centered heading, Multi-column supporting content |
| 10 | pricing | Centered content in a near-black band with three feature cards. | Compare plan benefits, Start a trial | Dark section, Three rounded cards, White CTA |
| 11 | cta | Compact continuation of the near-black plan section. | Start a free trial, Read about plans | Dark background, Light CTA, Cyan text link |
| 12 | other | Centered white section with a single-column arrangement and product or brand imagery. | Explore customer content | White canvas, Centered heading, Brand imagery |
| 13 | faq | Near-black section organized into four columns with multiple question headings. | Scan questions, Open supporting links | Dark background, Four-column layout, Light text and controls |
| 14 | footer | Full-width orange closing band. | Continue to site links | Solid orange surface, Full-width close |

## Source CSS custom properties (selected)

```css
--primary-text: #111;
```

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