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

# Invisible Technologies · Design System

> Quiet editorial clarity for enterprise AI

**Theme:** light · **Industry:** ai · **Source:** https://invisibletech.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 spacious, editorial homepage frames enterprise AI as a practical system, pairing concise statements with product interfaces, customer proof, and field notes. Mostly white and pale gray sections give way to a dark FAQ and closing CTA, with restrained lime, pink, and blue accents.

## North star

Let clear editorial hierarchy and generous white space carry the story; use colour only to mark actions and section changes.

## Overview

The visual strategy is built on a white canvas, generous breathing room, and alternating pale-gray and near-black bands rather than ornamental decoration. Apk Galeria carries the large, regular-weight headlines and compact body copy; Apkpraktikal appears in uppercase, widely tracked utility labels. Centered hero typography contrasts with later left-aligned feature and FAQ layouts, while a broad content frame and two-column modules keep the long page organized. Product UI captures and editorial artwork provide evidence of the offering; they sit within clean, mostly square-edged panels and are not a reason to expand the brand palette. Carbon text and muted gray copy maintain hierarchy without heavy rules. Lime is reserved for the primary action, pink highlights the newsletter action, and blue is most visible in the announcement strip and occasional links. The overall effect is measured and technical, softened by airy spacing and restrained colour.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Primary page canvas, hero background, and open content sections. |
| Cloud Gray | `#efefef` | `--color-cloud-gray` | surface | Section bands, card fills, and thin dividing lines between content areas. |
| Soft Silver | `#dbdbdb` | `--color-soft-silver` | neutral | Muted text treatment, especially low-priority labels and secondary information. |
| Carbon Ink | `#0f0f0f` | `--color-carbon-ink` | brand | Headings, navigation, dark surfaces, footer, and primary dark buttons. |
| Slate Copy | `#606060` | `--color-slate-copy` | neutral | Default body text and supporting copy on light backgrounds. |
| Graphite | `#222222` | `--color-graphite` | surface | Dark FAQ surface and secondary inverse sections. |
| Mid Gray | `#898989` | `--color-mid-gray` | neutral | Muted text and subdued form or input copy. |
| Deep Gray | `#4c4c4c` | `--color-deep-gray` | neutral | Secondary text within testimonial and newsletter-related content. |
| Hyper Citrus | `#dcf58f` | `--color-hyper-citrus` | accent | Primary lime CTA fill, notably the closing Get Started action. |
| Laser Pink | `#e37de1` | `--color-laser-pink` | accent | Newsletter Subscribe button; a small vivid accent rather than a section colour. |
| Ash Gray | `#9d9d9d` | `--color-ash-gray` | neutral | Low-emphasis text details and incidental muted interface copy. |
| Pale Pewter | `#bbbbbb` | `--color-pale-pewter` | neutral | Minor secondary labels and occasional link details. |
| Mist Gray | `#c6c6c6` | `--color-mist-gray` | semantic | Fine interface details and understated boundaries, not a defining brand surface. |
| Signal Blue | `#0c76fe` | `--color-signal-blue` | accent | Announcement strip and sparse blue details; also present in page imagery. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#efefef` (Cloud Gray) · `--color-surface-2` → `#0f0f0f` (Carbon Ink) · `--color-surface-3` → `#222222` (Graphite) · `--color-text` → `#606060` (Slate Copy) · `--color-text-muted` → `#dbdbdb` (Soft Silver) · `--color-text-subtle` → `#898989` (Mid Gray) · `--color-border` → `#efefef` (Cloud Gray) · `--color-accent` → `#dcf58f` (Hyper Citrus) · `--color-accent-2` → `#e37de1` (Laser Pink) · `--color-accent-3` → `#0c76fe` (Signal Blue) · `--color-on-accent` → `#0f0f0f` (Carbon Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#606060` | `#ffffff` | 6.29:1 | AA |
| `#606060` | `#efefef` | 5.47:1 | AA |
| `#606060` | `#0f0f0f` | 3.05:1 | AA-large |
| `#606060` | `#222222` | 2.53:1 | fail |
| `#dbdbdb` | `#ffffff` | 1.38:1 | fail |
| `#dbdbdb` | `#efefef` | 1.2:1 | fail |
| `#dbdbdb` | `#0f0f0f` | 13.84:1 | AAA |
| `#dbdbdb` | `#222222` | 11.49:1 | AAA |
| `#898989` | `#ffffff` | 3.5:1 | AA-large |
| `#898989` | `#efefef` | 3.04:1 | AA-large |

### Gradients

- `radial-gradient(circle, rgba(255, 255, 255, 0), rgb(255, 255, 255) 81%), url("https://cdn.prod.website-files.com/684704669d08b247ce01fc71/696019760e4ff3617e9fc5e7_HP-BG.svg")`
- `radial-gradient(circle, rgba(255, 255, 255, 0) 80%, rgb(255, 255, 255))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Apk Galeria | `--font-body` | webfont | 400, 500, 300 | Primary display, heading, body, navigation, and link typeface. | Inter |
| Apkpraktikal | `--font-apkpraktikal` | webfont | 400, 700 | Utility eyebrow and uppercase button-label typeface. | Space Grotesk |

- **Apk Galeria:** Regular-weight, clean sans; headlines are large and lightly tight-tracked, with restrained body sizing.
- **Apkpraktikal:** Bold uppercase labels with conspicuously open tracking; use sparingly for navigation-adjacent utility cues.

### Type scale — Perfect Fourth (ratio ≈ 1.32, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 64px | 400 | 1.1 | -0.01em | — | Apk Galeria | Large hero or campaign statement. |
| h1 | 52px | 400 | 1 | 0 | — | Apk Galeria | Main hero headline and primary page-level title. |
| h2 | 48px | 400 | 1.2 | -0.014em | — | Apk Galeria | Major feature, editorial, and section headings. |
| h3 | 36px | 400 | 1.2 | -0.018em | — | Apk Galeria | Feature titles and card or content-feed headings. |
| h4 | 24px | 400 | 1.1 | -0.03em | — | Apk Galeria | Compact panel titles and supporting subheads. |
| body | 16px | 400 | 1.5 | -0.011em | — | Apk Galeria | Paragraphs, explanatory copy, and card descriptions. |
| caption | 14px | 400 | 1.4 | 0 | — | Apk Galeria | Small secondary notes and image or card details. |
| nav | 14px | 400 | 1 | 0 | — | Apk Galeria | Header navigation links. |
| link | 14px | 400 | 1.5 | 0.023em | — | Apk Galeria | Inline links and compact text actions. |
| eyebrow | 12px | 700 | 1.4 | 0.14em | uppercase | Apkpraktikal | Uppercase section labels such as OUR PLATFORM. |

## Spacing & layout

- Base unit **8px**, density **spacious**.
- Scale (most used values): 4, 8, 10, 12, 16, 20, 24, 32, 40, 64, 72, 120 px.
- Section rhythm 120px · element gap 12px · card padding 24px · max content width 1206px.

Use a spacious, centered page frame capped at the measured 1206px maximum width. The hero is centered, while platform, solution, FAQ, and footer content shift to left-aligned or split layouts. The page alternates broad white and pale-gray bands, with dark blocks concentrated in FAQ and the closing footer/CTA region. Measured spacing uses an 8px base unit and a 120px section gap; keep the overall density open, letting product panels and editorial cards occupy room without crowding.

## Shape & elevation

- Radius: button `9999px` · pill `9999px`
- Shadow `lg` (other): `rgba(0, 0, 0, 0.06) 0px 8px 40px 0px`
- Motion: standard transition `0.2s ease` on interactive elements.

The page is predominantly flat: square-edged cards and panels rely on surface contrast, not prominent shadows. Pale-gray bands and thin gray hairlines organize content. The measured large shadow is subtle and appears as incidental depth, so avoid applying it broadly. Rounded full-pill buttons provide the main shape contrast.

## Imagery

The hero uses small, pale technical illustrations around a typographic center rather than a full-bleed photograph. Product sections feature interface screenshots and annotated workflow panels; editorial cards use cover-like artwork and customer imagery. Keep media cleanly framed, lightly integrated with the surrounding neutral canvas, and avoid treating incidental illustration colours as core brand colours.

## Components

### Announcement strip

Bright blue newsletter bar across the top, with compact copy and a pink pill-shaped Subscribe action.

### Header navigation

White navigation row with dark links, a restrained wordmark, and outlined or dark pill actions on the right.

### Hero

Centered multi-line headline, muted supporting sentence, dark pill CTA, and small technical illustrations around the perimeter.

### Platform showcase

Introductory copy paired with a large product interface panel and a vertical list of platform areas.

### Editorial newsletter band

Pale-gray split section with publication cover artwork, signup heading, input, and compact Subscribe control.

### FAQ

Near-black section with a left-side heading and right-side question rows separated by understated hairlines.

### Primary CTA

Dark closing region with a short data-focused statement and a lime full-pill Get Started button.

### Measured component styles

- **Primary button** (“SUBSCRIBE”): background #e37de1 · text #0f0f0f · radius 9999px · padding 8px 20px · 700 12px Apkpraktikal · uppercase
- **Secondary button** (“GET STARTED”): background #dcf58f · text #0f0f0f · radius 9999px · padding 12px 20px · 700 14px Apkpraktikal · uppercase
- **Link** (“Offerings”): transparent background · text #ffffff · radius 0px · padding 0px · 400 14px Apk Galeria
- **Input**: transparent background · text #4c4c4c · radius 0px · padding 10px · 400 14px Apk Galeria
- **Card** (“Bank of America's $400M AI bet returned ”): background #fafafa · text #0f0f0f · radius 0px · padding 24px · 400 16px Apk Galeria
- **Navigation item** (“Data lab Industries Solutions Resources ”): transparent background · text #0f0f0f · radius 0px · padding 0px · 400 16px Apk Galeria

## Do

- Keep the main canvas white and section backgrounds restrained.
- Use large, regular-weight sans headlines with clear line breaks.
- Preserve generous vertical pauses between major content bands.
- Use Carbon Ink for key headings and dark inverse panels.
- Reserve Hyper Citrus for the most important CTA.
- Treat product screenshots as evidence inside clean panels.

## Don't

- Don't turn the lime, pink, or blue accents into large background fields.
- Don't add gradients or decorative shadows as a dominant visual motif.
- Don't round cards that are measured as square-edged panels.
- Don't crowd the hero with dense navigation or competing imagery.
- Don't use illustration colours as the site's core palette.
- Don't make every section centered; preserve the mix of centered and split layouts.

## Agent prompt

Build a new page in the Invisible Technologies visual style: editorial, spacious, and enterprise-focused. Use Gallery White (#ffffff) as the main canvas, Cloud Gray (#efefef) for selected section bands, Carbon Ink (#0f0f0f) for headings and dark areas, and Slate Copy (#606060) for supporting text. Keep Hyper Citrus (#dcf58f) for the primary CTA, Laser Pink (#e37de1) for a secondary newsletter action, and Signal Blue (#0c76fe) limited to a narrow announcement or small detail. Use a clean sans similar to Inter for headlines and body, with uppercase tracked utility labels. Center the hero; use left-aligned and split layouts below. Maintain generous measured spacing, square-edged content panels, pill buttons, and restrained hairlines. Use product UI and editorial artwork as supporting proof, not decoration.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | announcement | Full-width blue strip above the main white navigation row. | Newsletter awareness, Subscribe action | Blue announcement band, Pink pill button, Compact text |
| 2 | hero | Centered headline and copy, with illustrations placed around the open hero field. | Primary demo CTA, Immediate value proposition | Large centered type, Dark pill CTA, Pale technical illustrations |
| 3 | logo-cloud | Single horizontal row of customer and partner marks. | Trust proof | Monochrome logo row, Open white background |
| 4 | product-showcase | Introductory copy above a broad product interface, organized as a two-column section. | Platform overview, Tailored walkthrough link | Eyebrow label, Product UI panel, Vertical feature navigation |
| 5 | newsletter | Pale-gray split band with publication artwork on one side and signup content on the other. | Newsletter signup, Editorial proof | Cover-style image, Email field, Compact button |
| 6 | feature-grid | Left-aligned introduction followed by a modular solution list and large adjacent product panel. | Browse solution categories, Explore solution | Feature navigation list, Screenshot-led panel, Blue link detail |
| 7 | testimonials | Section title above a multi-column row of testimonial cards. | Customer validation, More case studies link | Alternating light and dark cards, Customer attribution, Logo marks |
| 8 | content-feed | Centered section heading above three evenly arranged editorial cards. | Read field notes, Browse customer stories | Pale-gray section band, Cover imagery, Card titles |
| 9 | faq | Dark two-column section, with title on the left and stacked question rows on the right. | Expandable questions, Answer on demand | Near-black surface, Thin row dividers, Plus icons |
| 10 | cta | Dark closing CTA with decorative technical image beside the statement and action. | Start a conversation, Primary conversion | Dark background, Lime pill button, Sparse illustration |
| 11 | footer | Dark multi-column footer with brand summary, grouped navigation, legal links, and social icons. | Explore site sections, Contact and careers, Social links | Dark surface, Grouped link columns, Compact legal row |

## Source CSS custom properties (selected)

```css
--color-primary--carbon: #0f0f0f;
--_typography---font-size-body--body-text-regular: 1rem;
--_typography---font-size-headings--h2: 3.25rem;
--color-neutral--neutral-900: #4c4c4c;
--_typography---font-size-body--body-text-small: .875rem;
--color-primary--white: white;
--_sizes---radius--radius-full: 9999px;
--color-secondary--hypercitrus: #dcf58f;
--_typography---font-size-body--body-text-large: 1.125rem;
--color-neutral--neutral-100: #efefef;
--color-neutral--neutral-200: #dbdbdb;
--color-neutral--neutral-800: #606060;
--_sizes---spacing--4xl: 64px;
--_sizes---spacing--2xl: 40px;
--_typography---letter-spacing--3-letter-spacing: -.66px;
--color-neutral--neutral-700: #757575;
--_typography---font-size-body--caption-small: .75rem;
--_typography---letter-spacing--2-letter-spacing: .32px;
--color-neutral--transparent: #fff0;
--color-secondary--laser-pink: #e37de1;
--_typography---font-size-utility--overline: .75rem;
--_typography---font-size-headings--h4: 1.375rem;
--_typography---font-size-utility--button-label-x-small: .75rem;
--color-neutral--neutral-400: #b2b2b2;
--color-secondary--soft-sand: #e3cfa9;
--_typography---letter-spacing--1-letter-spacing: -.18px;
--color-neutral--neutral-600: #898989;
--_typography---font-size-headings--superhero-display: 6rem;
--color-secondary--midnight-blue: #24246e;
--color-neutral--neutral-950: #222;
--_sizes---radius--radius-md: .5rem;
--color-secondary--sky-blue: #bedaea;
--color-secondary--electric-blue: #0c76fe;
--color-neutral--neutral-300: #c6c6c6;
--_typography---font-size-headings--rte-h1: 2.5rem;
--_typography---font-size-headings--rte-h2: 2.25rem;
--_typography---font-size-headings--rte-h3: 2rem;
--_typography---font-size-headings--rte-h5: 1.5rem;
--_typography---font-size-headings--rte-h6: 1.25rem;
--_typography---font-size-body--rte-paragraph: 1.25rem;
```

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