Amethyst Signal App Column

/amethystSignalAppColumn
A premium, cinematic design system for dark, single-column digital product showcases, emphasizing depth, translucency, amethyst accents, and refined tactile components for ultra-focused landing interfaces.
0 likes
0 bookmarks
Jun 17, 2026
Design System Content
# Amethyst Signal App Column

A design language for premium, heavily focused, dark-themed single-column landing interfaces.

---

## Philosophy

> "Focus is a singular path; depth is what draws you down it."

This system creates interfaces that feel like a high-end cinematic showcase for a digital product. It deliberately rejects the traditional wide-desktop spread in favor of a single, immaculately polished central column. The aesthetic mimics machined graphite and smoked glass, relying on subtle backlighting and rim-illuminated edges to define space without breaking the deep, velvet darkness.

### Core Beliefs

1. **The Singular Path** — Layouts never expand into sprawling multi-column grids, even on ultra-wide displays. The user's eye remains anchored to a single, centered vertical narrative.
2. **Depth through Translucency** — Panels are constructed of translucent charcoal and glass rather than flat, opaque grays.
3. **The Anchored Stage** — The single splash of color is an amethyst-blue stage glow, acting as a pedestal for the product (usually a phone frame), never as a broad background paint.
4. **Refined Illumination** — Call-to-actions reject generic, bright, attention-grabbing fills. Instead, they command respect through dark, capsule-like shapes defined by fine borders, inner sheen, and rim lighting.
5. **Soft Contrast** — Pure white is too harsh for deep graphite canvases. Headings are a soft ivory; body copy is a calming slate-gray.

### Strict Rules

* **Single Column Only** — Content containers must enforce a strict maximum width (e.g., `max-w-2xl`). No sprawling horizontal arrays.
* **No Bright Solid Fills** — Buttons and interactive states must use dark surfaces with inner highlights or micro-borders. 
* **The Stage Glow** — Amethyst-blue is restricted to subtle background radiuses behind central phone modules or critical focal points.
* **No Harsh Whites** — Pure `#FFFFFF` is forbidden for text. Use soft ivory tones to reduce eye strain against the black backgrounds.
* **Grounded by the Grid** — The hero section must be anchored by a barely visible, low-opacity structural grid line pattern.

---

## Color Palette

### Monochromatic & Accent Scale

The palette starts at a pure velvet black and steps up through deep graphite and charcoal. The accent is a deep, luminescent Amethyst.

```css
/* Backgrounds (Darkest to Lightest) */
bg-black              /* Velvet black, absolute backdrop (#000000) */
bg-zinc-950           /* Deep graphite, primary column container */
bg-zinc-900/80        /* Translucent charcoal, primary stacked glass panels */
bg-zinc-800/50        /* Elevated cards, social chips, secondary modules */
bg-zinc-700/30        /* Hover states, subtle interactive highlights */

/* Borders & Rim Lights */
border-white/5        /* Invisible structural dividers */
border-white/10       /* Default glass panel borders, fine CTA outlines */
border-white/15       /* Hover boundaries, focused social chips */
border-white/20       /* Active boundaries, structural pill borders */

/* The Stage Light: Amethyst-Blue */
bg-violet-600/10      /* Extremely subtle backdrop glow behind device stages */
shadow-violet-500/20  /* Ambient radiating glow for the hero product */
text-violet-300       /* Delicate text highlights, tiny active status indicators */
border-violet-500/30  /* Active input rings, very rare critical boundaries */

/* Text Hierarchy (Soft Ivory to Slate Gray) */
text-zinc-50          /* Soft ivory: Primary hero heading (text-4xl) */
text-zinc-200         /* Secondary headings, active accordion titles */
text-zinc-400         /* Slate-gray: Main body copy, relaxed reading text */
text-zinc-500         /* Muted metadata, FAQ collapsed descriptions, social chip text */
text-zinc-600         /* Ghosted system hints, inactive footer links */

```

### Destructive Actions

```css
hover:bg-rose-950/30
hover:text-rose-400
hover:border-rose-900/50

```

---

## Typography

Typography relies on familiar, universally premium sans-serifs: **Inter**, **Helvetica Neue**, or **Geist**. Text is perfectly centered in the hero, featuring relaxed line-heights that encourage unhurried scrolling. 

### Font Weights

```css
font-light       /* Hero sub-statements, relaxed introductory copy */
font-normal      /* Slate-gray body copy, accordion descriptions */
font-medium      /* UI text, social chips, dark capsule CTAs, feature card titles */
font-semibold    /* Small metadata, critical module headers */

```

### Font Size Scale

```css
text-[11px]      /* Tiny legal footnotes, version numbers */
text-xs          /* Social chip labels, micro-features (12px) */
text-sm          /* Standard accordion text, concise feature copy (14px) */
text-base        /* Main module body copy (16px) */
text-lg          /* Feature card headers, expanded quotes (18px) */
text-xl          /* Sub-section headings, secondary product claims */
text-4xl         /* STRICT REQUIREMENT: Centered hero heading */

```

### Letter Spacing, Transforms & Line Height

```css
leading-relaxed  /* Applied globally to body copy for an unhurried, airy feel */
leading-tight    /* Applied to the text-4xl hero heading for cohesive blocking */

tracking-tight   /* text-4xl hero heading, large numbers */
tracking-normal  /* All body copy, accordion content */
tracking-wide    /* Capsule CTA text, tiny top-level kickers */

```

### Hierarchy Examples

| Element | Size | Weight | Color | Tracking | Line-Height |
| --- | --- | --- | --- | --- | --- |
| Hero Heading | 4xl | medium | zinc-50 | tight | tight |
| Module Subhead | xl | medium | zinc-200 | tight | normal |
| Slate Body Copy| base | normal | zinc-400 | normal | relaxed |
| Dark Capsule CTA| sm | medium | zinc-200 | wide | normal |
| Social Chips | xs | medium | zinc-400 | normal | normal |

---

## Animation System

### Core Philosophy: The Cinematic Reveal

Elements do not bounce or snap aggressively. They emerge slowly from the velvet black, similar to cinematic lighting being raised on a physical stage.

### Page Transitions (Drift and Emerge)

```tsx
initial={{ opacity: 0, y: 20, scale: 0.98 }}
animate={{ opacity: 1, y: 0, scale: 1 }}
transition={{ duration: 0.7, ease: [0.16, 1, 0.3, 1] }}

```

### Amethyst Stage Breathing (The Hero Glow)

The glow behind the phone-led module gently pulses to simulate a live, breathing signal.

```tsx
animate={{ opacity: [0.4, 0.6, 0.4], scale: [0.95, 1.05, 0.95] }}
transition={{ duration: 4, repeat: Infinity, ease: "easeInOut" }}

```

---

## UI Components

### Hero Grid Background

A subtle, low-opacity graph grid anchors the top of the page, fading out via a radial mask before it hits the phone stage.

```tsx
<div className="absolute inset-0 bg-[linear-gradient(to_right,#ffffff05_1px,transparent_1px),linear-gradient(to_bottom,#ffffff05_1px,transparent_1px)] bg-[size:40px_40px] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)]" />

```

### The Phone Stage Glow

The defining Amethyst signal sitting perfectly behind the primary device mockup.

```tsx
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[300px] h-[300px] bg-violet-600/20 blur-[80px] rounded-full pointer-events-none" />

```

### Vertically Stacked Glass Panels

Modules seamlessly stack in the single column, maintaining the exact same width and rounded corners to create a unified vertical track.

```tsx
className="flex flex-col gap-4 w-full max-w-lg mx-auto"

```

---

## Component Catalog

### Dark Capsule CTAs

No bright, generic fills. These are machined, perfectly rounded pills with inner sheen and micro-borders.

```tsx
// Primary CTA Capsule
"rounded-full bg-zinc-900 border border-white/10 shadow-[inset_0_1px_1px_rgba(255,255,255,0.1)] text-zinc-200 text-sm font-medium px-6 py-3 hover:bg-zinc-800 hover:border-white/20 transition-all duration-300"

// Secondary CTA Capsule
"rounded-full bg-transparent border border-white/5 text-zinc-400 text-sm font-medium px-6 py-3 hover:text-zinc-200 hover:border-white/10 transition-all"

```

### Glass Feature Cards

Concise feature blocks resting inside the main column track.

```tsx
// Feature Module
"bg-zinc-900/50 backdrop-blur-md border border-white/10 rounded-2xl p-6 w-full flex flex-col gap-2 hover:bg-zinc-800/50 transition-colors"

```

### Social Chips

Friendly, pill-shaped links or tags that feel tactile but muted.

```tsx
// Social / Link Chip
"flex items-center gap-2 rounded-full bg-zinc-800/40 border border-white/5 px-4 py-2 text-xs font-medium text-zinc-400 hover:text-zinc-200 hover:bg-zinc-700/50 transition-all cursor-pointer"

```

### Refined Accordion FAQs

Clean, minimal expanders using slate-gray text and hair-thin dividers. 

```tsx
// FAQ Item Container
"border-b border-white/5 py-4 w-full"

// FAQ Trigger
"flex justify-between items-center w-full text-left text-sm font-medium text-zinc-200 hover:text-zinc-50 transition-colors group"

// FAQ Content
"text-zinc-400 text-sm leading-relaxed pt-2 pb-1"

```

### Phone-Led Modules

The hero container heavily restricts horizontal padding to tightly wrap a central smartphone asset.

```tsx
// Stage Container
"relative w-full max-w-md mx-auto flex items-center justify-center pt-12 pb-0 overflow-hidden"

```

---

## Quality Checklist

* [ ] Is the entire layout restricted to a single polished column (e.g., `max-w-xl` or `max-w-2xl`), even on ultra-wide desktop monitors?
* [ ] Does the hero headline utilize `text-4xl` with center alignment and a soft ivory (`text-zinc-50`) color?
* [ ] Is body copy set to a slate-gray (`text-zinc-400`) with a `leading-relaxed` line-height?
* [ ] Are all Call-To-Actions designed as fully rounded (`rounded-full`) dark capsules with inner shadows or rim-lights rather than solid bright backgrounds?
* [ ] Does the background behind the primary phone device feature the subtle amethyst-blue blur glow?
* [ ] Is the subtle grid background implemented in the hero section without distracting from the typography?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Strict, single-column vertical stacking for all content.
* Smoked glass effects (`backdrop-blur` combined with `bg-zinc-900/50`).
* Delicate rim lighting (`border-white/10` and inset shadows).
* Inter, Helvetica Neue, or Geist typography.
* Smooth, slow vertical fade-ins.

### ✗ Not Allowed

* Expanding content into 2, 3, or 4 column masonry or bento grids on desktop screens.
* Solid, bright violet buttons or bright colored generic CTA fills.
* Pure `#FFFFFF` white text (causes halation on pure black backgrounds).
* Generic drop shadows (e.g., `shadow-xl` using black). Depth must come from borders and inner sheen.
* Hard borders that exceed 1px in thickness.