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

# Telepathic Instruments · Design System

> Cinematic music technology with an independent spirit.

**Theme:** light · **Industry:** consumer-electronics · **Source:** https://telepathicinstruments.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._

Telepathic Instruments pairs cinematic, full-bleed music imagery with a restrained editorial storefront. Stark black and white sections give way to warm cream, forest green and vivid product-image color, while monospaced labels keep the experience recognizably instrument-focused.

## North star

Let cinematic music imagery lead, then use restrained type, flat color blocks and clear product layouts to make the page effortless to browse.

## Overview

The page opens with a cinematic, full-bleed hero: near-black space, a musician and a centered instrument sit behind a large, delicate serif headline. A slim dark navigation bar and compact monospaced labels frame the imagery without competing with it. The rest of the page alternates clean white product and editorial sections with black content bands and a warm cream Garden and studio area. Forest-green community content adds a grounded contrast, while vivid orange appears sparingly in the mailing-list CTA and product photography; those image colors should not be mistaken for a sitewide background palette. Suisse Intl provides neutral, readable body text, while Suisse Intl Mono handles uppercase navigation, captions and controls. A separate ultralight editorial display face gives the hero its distinctive voice. Sections use broad image-led compositions, simple grids, generous breathing room around featured content and little visible ornament. The result feels cinematic but remains easy to browse and shop.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Main canvas for product, editorial and form sections; also used for reversed text and occasional pill controls. |
| Studio Black | `#000000` | `--color-studio-black` | surface | Dark content bands, footer and navigation; primary text and dark CTA fills. |
| Garden Cream | `#efede6` | `--color-garden-cream` | surface | Warm light background for The Garden and related studio imagery; also the newsletter input surface. |
| Soft Graphite | `#a3a3a3` | `--color-soft-graphite` | neutral | Muted footer and form text, plus understated input and divider borders. |
| Forest Green | `#305831` | `--color-forest-green` | brand | Deep green section background and community accent; gives testimonial content a quieter, natural counterpoint. |
| Charcoal Stage | `#191919` | `--color-charcoal-stage` | surface | Near-black section surface, especially the large newsletter sign-up band. |
| Moss Card | `#324d32` | `--color-moss-card` | semantic | Green testimonial-card fill; treat as a component color, not a general page background. |
| Signal Orange | `#ff6c2f` | `--color-signal-orange` | accent | Mailing-list CTA and occasional interface accent; orange product backdrops belong to imagery, not the global canvas. |
| Media Silver | `#dddee2` | `--color-media-silver` | semantic | Minor media-region color; incidental to imagery rather than a defining brand surface. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#000000` (Studio Black) · `--color-surface-2` → `#efede6` (Garden Cream) · `--color-surface-3` → `#305831` (Forest Green) · `--color-surface-4` → `#191919` (Charcoal Stage) · `--color-text` → `#000000` (Studio Black) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#a3a3a3` (Soft Graphite) · `--color-border` → `#a3a3a3` (Soft Graphite) · `--color-accent` → `#305831` (Forest Green) · `--color-accent-2` → `#ff6c2f` (Signal Orange) · `--color-on-accent` → `#000000` (Studio Black)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#efede6` | 17.93:1 | AAA |
| `#000000` | `#305831` | 2.57:1 | fail |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#efede6` | 1.17:1 | fail |
| `#ffffff` | `#305831` | 8.18:1 | AAA |
| `#a3a3a3` | `#ffffff` | 2.52:1 | fail |
| `#a3a3a3` | `#000000` | 8.33:1 | AAA |
| `#a3a3a3` | `#efede6` | 2.15:1 | fail |
| `#a3a3a3` | `#305831` | 3.24:1 | AA-large |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Suisse Intl | `--font-body` | webfont | 400, 500 | Headings, product names, body copy, and general interface text. | Inter |
| Suisse Intl Mono | `--font-mono` | webfont | 400 | Navigation, buttons, captions, product labels and compact utility text. | IBM Plex Mono |

- **Suisse Intl:** Mostly regular weight, with medium headings. Keep body copy calm and readable; avoid adding decorative tracking.
- **Suisse Intl Mono:** Regular weight; uppercase is common on navigation and controls. Use compact, clearly legible labels.

### Type scale — Golden Ratio (ratio ≈ 1.587, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 64px | 400 | 1 | -0.02em | — | Editorial Old Ultralight | Oversized editorial hero statement. |
| h1 | 24px | 400 | 1.25 | 0 | — | Suisse Intl | Primary page or section heading. |
| h2 | 20px | 500 | 1.2 | -0.02em | — | Suisse Intl | Product, feature and subsection headings. |
| body | 16px | 400 | 1.4 | 0 | — | Suisse Intl | Descriptions, editorial copy and testimonials. |
| caption | 12px | 400 | 1 | 0 | uppercase | Suisse Intl Mono | Uppercase metadata and compact section labels. |
| button | 12px | 400 | 1 | 0 | uppercase | Suisse Intl Mono | Uppercase CTA and form-control labels. |
| nav | 14px | 400 | 1.43 | 0 | uppercase | Suisse Intl Mono | Uppercase primary navigation and footer links. |
| code | 12px | 400 | 1 | 0 | uppercase | Suisse Intl Mono | Compact uppercase utility-style labels. |

OpenType features in use: `"calt", "dlig", "hlig", "liga"`.

## Spacing & layout

- Base unit **8px**, density **compact**.
- Scale (most used values): 4, 6, 8, 12, 14, 16, 24, 36, 40, 56, 64, 96 px.
- Section rhythm 40px · element gap 8px · card padding 40px · max content width 1360px.

Use a wide, fluid canvas with a measured maximum width of 1360px and compact overall density. The hero and video mosaic run edge to edge; product and editorial sections return to aligned content grids. The measured page moves between two-, three-, four- and five-column compositions, with left-aligned section headings and image-led cards. Keep section transitions clear through changes in surface color and media composition rather than decorative dividers. Preserve the measured 40px section gap and 8px element rhythm where those values apply.

## Shape & elevation

- Radius: button `9999px` · card `24px` · media `32px` · nav `2px` · link `9999px` · xs `2px` · sm `4px` · md `24px` · lg `32px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The measured system has no shadows, so rely on flat surfaces and image contrast instead of artificial depth. Use restrained borders on forms and selected controls. Layer overlapping cards or hero media only when needed to organize content; the hero’s atmosphere should come from photography and darkness, not a shadow effect.

## Imagery

Lead with full-bleed, cinematic video or photography: musicians, expressive faces, instruments and performance scenes. Product cards use clean, distinct product imagery, including vivid orange backdrops, while other media ranges from studio footage to community portraits. Keep imagery large and immersive, using rounded media and cards selectively rather than applying one uniform treatment to every image.

## Components

### Primary navigation

A dark, compact top bar with white monospaced uppercase links, a wordmark and small utility controls. Keep it visually quiet over the cinematic hero.

### Hero CTA

A small white pill-style shop link positioned beside the oversized serif hero statement; it uses uppercase monospaced text.

### Product feature cards

Two-column product imagery with a simple title and compact uppercase explore link. Let the product image, including its backdrop, carry the color.

### Testimonial cards

Quote cards use a measured #324d32 fill, white Suisse Intl text and generous measured card padding; keep decoration minimal.

### Mailing-list prompt

A small #ff6c2f announcement button appears as a distinctive orange accent; avoid expanding the color into unrelated site surfaces.

### Newsletter form

Dark sign-up band with an oversized display graphic, supporting copy, region choices and compact mono controls; inputs use #a3a3a3 borders.

### Store product grid

Four compact merchandise cards show distinct product images, titles and prices, with a separate small shop-all control.

### Measured component styles

- **Primary button** (“JOIN THE MAILING LIST”): background #ff6c2f · text #000000 · border 1px solid #000000 · radius 0px · padding 0px 16px · 400 12px Suisse Intl Mono · uppercase
- **Secondary button** (“JOIN DISCORD”): background #000000 · text #ffffff · radius 3.35544e+07px · padding 14px 16px · 400 12px Suisse Intl Mono · uppercase
- **Link** (“Orchid ORC—1 with Case”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Suisse Intl
- **Input**: transparent background · text #efede6 · border 1px solid #a3a3a3 · radius 0px · padding 0px 12px · 400 14px Suisse Intl Mono · uppercase
- **Card** (“"Love the product. Mind blowing accessib”): background #324d32 · text #ffffff · radius 24px · padding 40px · 400 16px Suisse Intl
- **Navigation item** (“ORCHID PISTIL SHOP ALL SUPPORT”): transparent background · text #ffffff · radius 0px · padding 0px · 400 14px Suisse Intl Mono

## Do

- Let cinematic musician and instrument imagery dominate the hero.
- Use black, white and cream as the main section surfaces.
- Reserve forest green for community-focused content.
- Use monospaced uppercase type for navigation and controls.
- Keep product names and shopping actions easy to scan.
- Use orange sparingly for the mailing-list CTA or product imagery.

## Don't

- Do not turn incidental photo colors into global interface colors.
- Do not add gradients or shadows absent from the measured design.
- Do not use a generic sans-serif for the main editorial display.
- Do not crowd the hero with extra controls or explanatory copy.
- Do not apply rounded cards to every section or image.
- Do not replace the clean alternating surfaces with ornamental dividers.

## Agent prompt

Build a new page in Telepathic Instruments’ visual style. Use Gallery White (#ffffff), Studio Black (#000000), and Garden Cream (#efede6) as the main alternating surfaces, with Forest Green (#305831) reserved for community content. Keep Signal Orange (#ff6c2f) as a sparse CTA accent, not a global background. Lead with large, cinematic musician or instrument imagery, a delicate editorial serif headline, and compact Suisse Intl Mono-style uppercase controls. Use clean, left-aligned content grids for product and editorial sections, and allow media to span the full canvas where it matters. Favor flat color blocks and image contrast over shadows. Keep product cards legible and functional, use Suisse Intl-style sans serif for body copy, and preserve clear section rhythm and generous room around featured content.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed cinematic hero with centered instrument imagery, oversized headline and a side-positioned shop link. | Primary shop action, Brand navigation | Dark photographic canvas, Editorial serif headline, Compact mono navigation |
| 2 | video | Full-width mosaic of video and image tiles with a featured channel card layered near the center. | Watch video, Visual content discovery | Dark media field, Mixed tile sizes, Layered feature tile |
| 3 | product-showcase | White section with a left-aligned heading and two large product feature columns. | Explore product, Side-by-side comparison | Product imagery, Minimal labels, Warm image backdrops |
| 4 | feature-grid | Black band with brand statement above four aligned image-and-copy columns. | Browse feature themes, Editorial reading | Dark surface, Four-column grid, Image-led cards |
| 5 | gallery | Cream section with heading and introductory copy above a row of three rounded media tiles. | Join Discord, Join Patreon | Warm cream background, Rounded media, Compact pill buttons |
| 6 | video | Two-column studio feature with a large video area and a compact title and watch link. | Watch on YouTube | Wide performance video, Editorial label, Simple CTA |
| 7 | product-grid | White storefront section with four product cards in a row and a small shop-all action. | Shop all, Browse product details | Product thumbnails, Names and prices, Compact grid |
| 8 | testimonials | Green-led split section pairing a community introduction with imagery and overlapping quote cards. | Join the community, Read customer quotes | Forest green surface, Image backdrop, Dark quote cards |
| 9 | newsletter | Dark two-column sign-up band with oversized display lettering and a compact form. | Choose region, Submit email | Charcoal surface, Large display graphic, Outlined input |
| 10 | footer | Black footer with wordmark, grouped policy and social links, region control and copyright details. | Navigate policies, Open social channels | Small mono text, Grouped link columns, High-contrast wordmark |

## Source CSS custom properties (selected)

```css
--swiper-theme-color: #007aff;
```

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