Solder Orange
#ff6c2fPrimary action background, call-to-action pills, featured product highlight — the single chromatic accent that makes interactive elements feel switched on against the otherwise neutral canvas
Telepathic Instruments
telepathicinstruments.com
Website preview
The design language
Telepathic Instruments operates in a studio-dark, broadcast-crisp visual register: full-bleed atmospheric photography gives way to white product surfaces and pill-shaped controls, with a single vivid orange as the only chromatic punctuation in an otherwise monochrome world. Typography is the brand's loudest instrument — Suisse Intl set at near-display sizes with aggressive negative tracking (up to -0.03em) creates headlines that read as engineering specimens rather than marketing copy. The aesthetic borrows from audio hardware UIs and Bauhaus signage: hairline borders, flat surfaces, one functional accent, generous negative space. Components stay low-weight and gestural — pill buttons, ghost links, soft 24px card radii — letting product imagery and music equipment screenshots carry visual weight.
Color palette
brand
accent
Bone
#d7cdb8Warm beige wash — soft highlight surfaces and muted decorative fills that keep the palette from feeling clinical
neutral
Signal White
#ffffffCard surfaces, content backgrounds, reversed text on dark fills — the clean base layer where product photography sits
Linen Gray
#e5e7ebPage canvas, hairline borders, nav separators, input borders — the dominant neutral providing the structural baseline across the entire interface
Fog
#c2c2c2Muted surface fills, secondary panel backgrounds, disabled states
Soft Mist
#dddee2Tertiary surface tint — subtle elevation step between canvas and card
Ash
#a3a3a3Muted helper text, secondary nav labels, icon strokes at rest, footer meta — the quiet voice for non-primary content
Carbon Black
#000000Primary text, filled button backgrounds, high-contrast borders, icon fills — the authority tone for headlines and structural elements
Deep Charcoal
#191919Near-black surface for the floating nav pill, dark overlay panels, and any near-pure-black surface that needs slightly less harshness than pure black
Typography
Type scale
Minor Third (1.2) · 16px basedisplay
100px · 500 · 0.85 · -3px trackingThe quick brown fox jumps
heading
24px · 400 · 1.2 · -0.48px trackingThe quick brown fox jumps
heading-sm
20px · 500 · 1.25 · -0.4px trackingThe quick brown fox jumps
subheading
18px · 400 · 1.4 · 0px trackingThe quick brown fox jumps
body
16px · 400 · 1.5 · 0px trackingThe quick brown fox jumps
body-sm
14px · 400 · 1.43 · 0px trackingThe quick brown fox jumps
caption
12px · 400 · 1.25 · 0px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Suisse Intl
- Weights
- 400, 500
- Sizes
- 12px, 16px, 18px, 20px, 24px, 100px
- Line height
- 0.85, 1.20, 1.25, 1.40, 1.50
- Letter spacing
- -0.0300em at display (100px), -0.0200em at heading (24px+), normal at body and below
- Fallback
- Inter, Neue Haas Grotesk, Söhne
Primary typeface for all display, heading, body, and UI text. The 100px display size paired with -0.0300em tracking and 0.85 line-height creates headlines that read as tightly engineered display specimens — a grotesque with neo-grotesque calm. Weight 500 is used sparingly for emphasis in nav and labels; weight 400 carries body and most headings. Substitute with Inter or Neue Haas Grotesk if Suisse Intl is unavailable.
Additional typeface
Suisse Intl Mono
- Weights
- 400
- Sizes
- 12px, 14px, 16px
- Line height
- 1.00, 1.20, 1.25, 1.33, 1.43, 1.50
- Fallback
- JetBrains Mono, IBM Plex Mono, Geist Mono
Monospaced companion for technical labels, button text, nav items, tag captions, and any interface element that needs to read as instrument-grade or technical. Letter-spacing stays normal — the mono face provides the engineering voice while the grotesk provides the editorial voice. Substitute with JetBrains Mono or IBM Plex Mono.
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 8px
- Max width
- 1280px
- Section gap
- 80px
- Card padding
- 24px
- Element gap
- 12px
Border radius
tags
2pxcards
24pxinputs
2pxbuttons
9999pxnavPill
64pxlargeSurfaces
32pxSpacing scale
4px6px8px12px14px16px24px36px40px56px64px80px96px280pxGuidelines
Do
- Use Solder Orange #ff6c2f only for the single most important action on a page — once maximum. All other actions use Carbon Black or ghost variants.
- Set display headlines at 100px with -0.0300em letter-spacing and 0.85 line-height in Suisse Intl weight 400. The tight tracking is the signature — do not loosen it.
- Apply 24px border-radius to all product cards, community photos, and large surface containers. Use 2px for inputs, tags, and small UI elements. Use 9999px for all buttons and pills.
- Use Suisse Intl Mono for all button text, nav links, labels, and any element that should read as technical or instrument-grade. Keep it uppercase with normal letter-spacing.
- Let the floating dark pill nav sit above content with generous top margin (56px+). It is the first thing a visitor sees and must read as a control surface.
- Build card grids that are image-dominant: full-bleed photography filling the card edge-to-edge, with text overlaid or in a minimal header strip.
- Anchor sections with 80px vertical gaps. The comfortable density requires air — do not compress sections below 56px.
Don’t
- Do not introduce additional accent colors. The entire chromatic system is one orange. Adding a blue, green, or second orange dilutes the signal.
- Do not use soft drop shadows on cards or panels. The design is deliberately flat — depth comes from surface color steps and photography, not elevation.
- Do not set body text below 14px. The mono face in particular becomes illegible below 12px; use it only for true labels.
- Do not center-align body paragraphs. Use left-aligned two-column section headers (title left, description right) for all non-hero content blocks.
- Do not use the Bone beige #d7cdb8 as a button background or interactive surface — it is decorative wash only. Interactions live in the neutral/orange binary.
- Do not apply letter-spacing to the Suisse Intl Mono face. It already reads as technical; adding tracking breaks the instrument-grade voice.
- Do not mix sans-serif fonts beyond the Suisse Intl + Suisse Intl Mono pair. No serif introductions, no system font fallbacks in final output.
Components
Floating Pill Navigation
Primary site navigationDark pill-shaped floating nav (Deep Charcoal #191919 background) centered at the top of the page, containing the brand wordmark on the left, uppercase nav links in Suisse Intl Mono 12px with generous letter-spacing, and a globe icon + bag counter on the right. Uses 64px border-radius to achieve the full pill shape, with 36px horizontal padding and ~14px vertical padding. Sits above content with a subtle drop, creating a control-panel header.
Primary CTA Pill Button (Orange)
Primary action buttonSolder Orange (#ff6c2f) filled pill with white text, 9999px border-radius, 16px vertical × 24px horizontal padding, Suisse Intl Mono 12px uppercase. The single chromatic button in the system — used sparingly for the most important action on any page (mailing list, buy now). Always sits on a neutral or photographic surface to maximize contrast.
Secondary Ghost Pill Button
Secondary action buttonWhite or transparent background with Carbon Black border (1px), Carbon Black text, 9999px radius, 16px × 24px padding, Suisse Intl Mono 12px uppercase. Paired with a right-arrow chevron. Used for secondary actions like 'Join Discord' and 'Join Patreon'.
Tertiary Text Link
Tertiary navigation or inline linkNo background, no border. Carbon Black text in Suisse Intl Mono 12-14px, with a right-arrow chevron suffix to indicate action. Used for exploratory navigation like 'Explore Product' in card overlays.
Featured Product Card (Large)
Hero product showcaseLarge card with 24px border-radius, generous internal padding (40px), containing a product label in the top-left, a ghost 'Explore Product' link in the top-right, and a full product screenshot filling the body. The Pistil Plugin card uses a warm gradient wash (Bone #d7cdb8 to a peach tone) as background. Cards sit on the Linen Gray canvas with no shadow — flat presentation.
Merchandise Product Card
Product grid item for merchTall portrait-ratio card (roughly 1:1.3) with 24px border-radius, no internal padding — the product image fills the entire card edge-to-edge with a forest/outdoor photographic background. Product name overlaid in white Suisse Intl at the top-left, small ghost circle link in the top-right. Image-dominant, text-minimal.
Community Portrait Card
Social proof / community showcasePortrait-format photo card with 24px border-radius, 2-3px white border ring creating a printed-photo feel. Image fills the card with a username handle overlay in the bottom-right in white Suisse Intl Mono 12px. No shadow — flat photographic grid.
Section Header Block
Section title and description pairTwo-column layout: section title on the left (Suisse Intl 20-24px weight 500, Carbon Black) and descriptive paragraph on the right (Suisse Intl 16px, Ash #a3a3a3 or Carbon Black). Followed by a horizontal row of action buttons below. Used for the 'The Garden' / community section.
Hero Text Overlay
Full-bleed hero with atmospheric photographyFull-viewport-width atmospheric photographic background (dark teal/green blurred studio imagery) with centered display text in Suisse Intl weight 400 at 100px, -0.0300em tracking, 0.85 line-height, in white. No overlay scrim — the text relies on the image's dark areas for contrast. A single CTA pill button sits centered at the bottom of the viewport.
Mail List Sticky Bar
Persistent mailing list promptThin fixed bar at the bottom-left of the viewport, Solder Orange (#ff6c2f) background, white uppercase Suisse Intl Mono text reading 'JOIN THE MAITLIST' (note the intentional brand typo), with a small white dismiss circle (×) at its right edge. Acts as a persistent low-friction conversion prompt.
Surfaces & elevation
Level 0
Page Canvas
#e5e7ebThe dominant background — a near-gray linen that recedes behind all content
Level 1
Card Surface
#ffffffClean white product cards and content panels sitting on the linen canvas
Level 2
Soft Tint
#dddee2Subtle elevation step for nested or secondary panels
Level 3
Muted Fill
#c2c2c2Disabled or inactive surface state
Level 4
Featured Wash
#ff6c2fFull-bleed warm gradient background for hero product cards
The design is deliberately flat. No drop shadows are applied to cards, buttons, or panels. Depth is communicated exclusively through surface color steps (canvas → card → elevated tint) and the contrast between the dark floating nav and the light canvas beneath it. This reinforces the broadcast/instrument aesthetic where physical hardware has zero shadow when front-lit.
Layout & imagery
Layout
The page follows a broadcast-stack rhythm: a full-bleed dark photographic hero with centered display text and a single bottom-anchored CTA, followed by a white content band containing a 2-column product grid (one large feature card on the left spanning ~60% width, two stacked product cards on the right), then a generous 80px gap leading to the community section. The community section uses a two-column header (title left, description + button row right) above a 3-column equal grid of community portrait cards. Navigation is a single floating dark pill centered at the top, not a full-width bar. The layout is strictly centered, max-width 1280px, with all content contained — no full-bleed sections beyond the hero image itself. Section gaps are large (80px) creating a magazine-spread rhythm rather than a dense feed.
Imagery
Imagery is atmospheric and photographic, not illustrative: dark blurred studio photography dominates the hero (cool teal/green with obsidian shapes suggesting synthesizer equipment or circuit boards), while product sections use warm peach gradient backgrounds and outdoor forest photography for merchandise. Treatment is always full-bleed with 24px rounded corners — no hard-edged photography. Community section uses gritty candid phone-camera aesthetic (Damon Albarn studio shot, album art reproduction) with no color correction, embracing the lo-fi authenticity. Icons throughout are minimal — a small globe for locale, a bag icon for cart, and a close × for dismiss — all single-stroke mono style. No illustration or 3D rendering appears; the visual language is entirely photographic and product-screenshot based.
Design notes
Agent Guide
**Quick Color Reference** - background: #e5e7eb (canvas), #ffffff (cards) - text: #000000 (primary), #a3a3a3 (muted) - border: #e5e7eb (hairline), #000000 (structural) - accent: #ff6c2f (Solder Orange — single accent) - dark surface: #191919 (nav pill, dark panels) - primary action: #ff6c2f (filled action) **Example Component Prompts** 1. **Hero with atmospheric photo**: Full-viewport-width dark teal blurred photograph as background (suggest moody studio/synthesizer imagery). Centered display headline: 'This May. All will become clear.' in Suisse Intl 100px, weight 400, color #ffffff, letter-spacing -3px, line-height 0.85. A single Solder Orange pill button (#ff6c2f, white uppercase Suisse Intl Mono 12px, 9999px radius, 16px × 24px padding) reading 'JOIN MAILING LIST' centered at the bottom of the viewport. 2. **Featured Product Card**: 24px border-radius white card on a Linen Gray (#e5e7eb) canvas. Top-left label in Suisse Intl 20px weight 500 #000000 reading 'Pistil Plugin'. Top-right ghost link in Suisse Intl Mono 12px #000000 reading 'EXPLORE PRODUCT →'. Body filled with a dark synthesizer plugin UI screenshot (black background, white knobs, keyboard at bottom). No shadow. 3. **Floating Nav Pill**: 64px border-radius dark pill (#191919), 36px horizontal padding, 14px vertical padding, centered at top with 24px top margin. Brand wordmark '/// Telepathic' on the left in white Suisse Intl 16px. Center cluster of nav links: 'ORCHID', 'PISTIL', 'SHOP ALL', 'SUPPORT' in white Suisse Intl Mono 12px uppercase. Right side: small globe icon and 'BAG 0' in white Suisse Intl Mono 12px. 4. **Community Portrait Grid**: 3-column grid of portrait-format photo cards on white background, 24px radius, 12px gap. Each card is a candid photo filling the card edge-to-edge, with a white username handle overlaid in the bottom-right corner in Suisse Intl Mono 12px (e.g. '@oddkdout', '@sama208', '@ethanizquka'). No card shadows. 5. **Section Header with Action Row**: Two-column layout — left column has section title 'The Garden' in Suisse Intl 24px weight 500 #000000. Right column has descriptive paragraph in Suisse Intl 16px #000000 at max 480px width, followed by a row of two ghost pill buttons (white background, 1px #000000 border, 9999px radius, 16px × 24px padding) reading 'JOIN DISCORD →' and 'JOIN PATREON →' in Suisse Intl Mono 12px uppercase.
Typographic Voice
The Suisse Intl pairing is the brand's primary instrument. Display sizes (100px) are set tight at -0.0300em with collapsed line-height (0.85) so that multi-line headlines read as dense editorial blocks rather than airy marketing. Body text uses 16px at 1.5 line-height with default tracking. The mono face is reserved for anything that should feel like a label on a piece of hardware: nav items, buttons, tags, technical metadata. Never use the mono face for paragraphs or descriptions. The two voices together create a broadcast/engineering duality: the grotesk for emotion, the mono for precision.
Spacing Rhythm
The 8px base unit governs all spacing. Buttons use 8-16px vertical padding with 24px horizontal. Cards use 24-40px internal padding. Section gaps are 80px between major content bands. Element gaps within a section are 12-16px. The floating nav sits 24px from the top edge of the viewport. The overall density is comfortable — never compress below these values. The page max-width is 1280px, centered, with all content contained within it. The hero image is the only element allowed to break the container.
Similar brands
Teenage Engineering
Same single-accent-monochrome approach with a vivid orange against white/neutral, pill-shaped controls, and grotesk + mono type pairing for hardware-adjacent product UI
Moog Music
Similar dark atmospheric hero photography of studio equipment, white product card grid, and engineering-voice mono labels for technical product details
Splice
Same flat card-on-canvas layout, generous spacing, dark floating nav pill, and image-dominant product grids with minimal text overlay
Universal Audio
Same professional audio aesthetic: tight grotesk display headlines, mono labels for plugin UI, dark moody hero photography of studio gear
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
