interfere.com — Design System

1. Visual Theme & Atmosphere

Interfere.com inhabits the high-end editorial end of white-background SaaS design — the kind of site that would pass for a premium magazine if the copy were fiction. Built on Next.js with Tailwind, it distinguishes itself through typographic duality: InterVariable for the functional contemporary voice and HeldaneText (a serif) reserved specifically for blockquotes. This typographic counterpoint signals intellectual seriousness. The palette is nearly monochromatic white with body text at rgba(0,0,0,0.875) — not quite full black, a deliberate softening that prevents harshness. A light footer lab(96.868 -0.0000298023 0) (near white with imperceptible warmth) provides grounding without darkness.

2. Color Palette & Roles

Surface

• rgb(255, 255, 255) — primary canvas
• rgb(252, 252, 252) — secondary surface; near-white with microscopic differentiation
• lab(96.868 -0.0000298023 0) — footer background; a perceptually uniform near-white

Text

• rgba(0, 0, 0, 0.875) — primary text at 87.5% opacity; softer than pure black
• rgba(0, 0, 0, 0.608) — secondary / muted text; nav links, button labels at rest
• Hover on muted text → rgba(0, 0, 0, 0.875) — opacity increase as interaction cue

Data visualization accents (present as transparent washes)

• rgba(0, 192, 64, 0.016) — near-invisible green tint
• rgba(0, 163, 47, 0.043) — green wash
• rgba(0, 143, 74, 0.81) — solid green indicator
• rgba(223, 38, 0, 0.82) — solid red indicator
• rgba(255, 32, 0, 0.03) — ghost red wash

These suggest a live data/chart component where green/red encode positive/negative values — the only color in an otherwise achromatic design.

3. Typography Rules

The pairing of InterVariable and HeldaneText is the design’s most opinionated choice. InterVariable handles everything functional; HeldaneText (serif) handles the reflective or quoted.

The H1 at 56px with 1:1 line-height and -0.56px tracking compresses tightly — headlines sit as dense blocks. The muted-to-full opacity hover on nav links is the interaction system without any color involvement.

4. Component Stylings

Links / Nav — Default at rgba(0,0,0,0.608), hover to rgba(0,0,0,0.875). Pure opacity shift. No underlines, no color change — interaction exists only in weight of presence.

Cards / Surfaces — border-radius: 6px standard, 8px and 12px for larger containers, 16px for pill-adjacent shapes. All backed by white or near-white — no dark card variants.

Inset shadow system — rgba(0,0,0,0) 0px 0px 0px 0.5px inset plus rgba(0,0,0,0.06) 0px 0px 0px 0.5px creates a hairline border effect through shadow layering rather than border properties. Technically precise and renders crisply.

Data indicators — Colored bars or pills using green/red at high opacity (0.81, 0.82) against the white canvas for clear semantic encoding.

5. Layout Principles

A single breakpoint at 600px — strikingly minimal for a Next.js/Tailwind site. This suggests the design is primarily a desktop experience with a minimal mobile adaptation, rather than a mobile-first build. Content is left to reflow naturally between 600px and desktop widths. Tailwind’s grid system at desktop likely uses 12-column grids. Section padding is zeroed in CSS (Tailwind utility classes carry all spacing).

6. Depth & Elevation

Almost entirely flat. The hairline inset shadow (0.5px) is the subtlest possible elevation signal — it renders as a drawn border rather than a shadow. The luminance range is compressed:

• luminance 1.0 — white surfaces
• luminance 0.988 — near-white variant
• luminance 0.471 / 0.396 — transparent green/red washes (data vis)
• luminance 0.0 — rgba(0,0,0,0.875) overlay for dark modal or tooltip layer

No drop shadows on structural elements. Elevation is expressed through containment and the hairline border technique.

7. Do’s and Don’ts

Do

• Use rgba(0,0,0,0.875) for primary text — full black is too harsh for this register
• Reserve HeldaneText exclusively for blockquotes; don’t let the serif bleed into UI
• Apply the opacity-shift pattern for interactive states: 0.608 → 0.875 on hover
• Use the hairline inset shadow rgba(0,0,0,0.06) 0px 0px 0px 0.5px as your border system

Don’t

• Add colored accents beyond the data-vis green/red; the achromatic palette is the identity
• Use border properties for card outlines — the shadow-based hairline is the technique
• Introduce the serif at body scale — HeldaneText belongs only in blockquote context
• Over-engineer breakpoints; the single 600px breakpoint is a feature, not an oversight

8. Responsive Behavior

One breakpoint at 600px. Below 600px: likely single-column stack with full-width sections. The H1 at 56px may need a clamp() or size step at mobile to prevent overflow on narrow screens — this appears to be handled through Tailwind responsive prefixes rather than CSS custom properties. The hairline shadow border technique renders correctly at all densities.

9. Agent Prompt Guide

Build a premium editorial SaaS landing in the style of interfere.com. White background. Primary text at rgba(0,0,0,0.875), secondary/nav at rgba(0,0,0,0.608) with hover transition to full opacity. InterVariable for all UI type: H1 56px/500 with 1:1 line-height, body 15px/400. HeldaneText serif at 28px/400 exclusively for blockquotes. No colored brand accents — only green/red at high opacity for data indicators. Cards use border-radius: 6–8px with hairline borders via box-shadow: rgba(0,0,0,0.06) 0px 0px 0px 0.5px. One breakpoint at 600px. Flat surfaces throughout.

Generated by Sparkbites — extracted from live CSS analysis