Amethyst Native App Stack

/amethystNativeAppStack
A mobile-first, dark UI system fusing native iOS softness and disciplined startup minimalism, featuring near-black backgrounds, controlled amethyst accents, and tactile, rounded components for premium, fluid digital experiences.
0 likes
0 bookmarks
Jun 17, 2026
Design System Content
# Amethyst Native App Stack

A design language for sleek, mobile-first dark interfaces blending native iOS softness with disciplined startup minimalism.

---

## Philosophy

> "Focus is born in the dark; softness invites interaction."

This system creates digital environments that feel like a premium native application. It marries the ultra-disciplined, near-black aesthetics of modern tech startups with the friendly, tactile social cues of everyday iOS experiences. The result is an interface that feels immersive, deeply personal, and flawlessly engineered.

### Core Beliefs

1. **Depth through translucency** — We build on near-black voids using stacked layers of frosted charcoal glass. Depth is achieved via backdrop blurs and subtle overlaps, not heavy shadows.
2. **Singular focal point** — The accent color is highly restricted. A singular, controlled purple glow anchors the center of the hero space, drawing the eye without overwhelming the dark canvas.
3. **Tactile geometry** — Everything the user can touch must feel soft. Fully rounded pill shapes, continuous curves, and subtle inner sheens invite physical interaction.
4. **Familiar social cues** — Interfaces should feel inhabited. Avatar chips, smooth profile stacks, and familiar mobile patterns inject warmth into the startup minimalism.
5. **Mobile-first pacing** — The rhythm of the page mirrors an app ecosystem: centered hero spaces dropping into pristine phone mockups, followed by alternating device moments and spatial feature grids.

### Strict Rules

* **No Sharp Corners on Interactivity** — All primary CTAs, chips, and interactive modules must utilize fully rounded (`rounded-full` or maximum iOS corner radii) geometries.
* **Confined Illumination** — The Amethyst glow exists exclusively in the center of the hero section. Modules and cards below the fold rely strictly on architectural grays and low-contrast borders.
* **No High-Contrast Borders** — Card and module outlines must remain whispering thin and ultra-low contrast (`white/5` or `white/10`).
* **Inner Sheen Over Outer Shadow** — Buttons and modules define their volume via subtle inset top-borders (sheen) and gentle bevels, eliminating the need for muddy exterior drop shadows.

---

## Color Palette

### Dark Monochromatic & Amethyst Accent

The palette is built on an abyss of near-black (`zinc-950`), layering translucent charcoal up to crisp white text. The accent is a deep, digital Amethyst that acts as a light source rather than a solid fill.

```css
/* Backgrounds (Darkest to Lightest) */
bg-zinc-950           /* Absolute canvas floor, near-black (#09090b) */
bg-zinc-900           /* Solid secondary panels, alternating sections (#18181b) */
bg-zinc-900/60        /* Translucent charcoal glass for main cards */
bg-zinc-800/40        /* Hover states for interactive glass cards */
bg-zinc-800/80        /* Dark capsules, CTA backgrounds */
bg-zinc-700/50        /* Pressed states, subtle form fields */

/* Borders (Low-Contrast) */
border-white/5        /* Barely-there structural module dividers */
border-white/10       /* Default card and capsule borders */
border-white/20       /* Hovered borders, focused active outlines */

/* The Illumination: Amethyst */
bg-purple-600/20      /* The hero radial glow base */
bg-purple-500/10      /* Micro-glows, subtle active indicators */
text-purple-400       /* Rare text highlights, active toggle states */
border-purple-500/30  /* Focused input rings in active app states */

/* Text Hierarchy (Familiar & Premium) */
text-white            /* Primary text, 4xl hero headings */
text-zinc-300         /* Relaxed body copy, secondary readable text */
text-zinc-400         /* Social metadata, timestamps, input placeholders */
text-zinc-600         /* Disabled states, micro-system paths */

/* Inner Sheen (Bevels) */
shadow-[inset_0_1px_0_rgba(255,255,255,0.1)]  /* Standard top-sheen for capsules */
shadow-[inset_0_1px_0_rgba(255,255,255,0.2)]  /* Elevated CTA sheen */
```

### Destructive Actions

```css
bg-red-950/40
border-red-900/50
text-red-400
```

---

## Typography

Built exclusively on familiar, highly legible, premium sans-serifs (Inter, Helvetica Neue, or Geist). It balances the starkness of a tech startup with the readable comfort of a daily social app.

### Font Weights

```css
font-normal      /* Relaxed body copy, feature descriptions */
font-medium      /* Standard UI text, social metadata, avatar chips */
font-semibold    /* Text-4xl hero headings, button labels, module titles */
/* Bold/Black are avoided to maintain sleek iOS-native softness */
```

### Font Size Scale

```css
text-[11px]      /* Micro app metrics, tiny social timestamps */
text-xs          /* App navigation labels, secondary avatar names */
text-sm          /* Standard interactive labels, FAQ answers */
text-base        /* Primary body copy, relaxed leading (16px) */
text-lg          /* Subheadings, feature grid intro text */
text-xl          /* Glass card titles, alternating phone moment headers */
text-2xl         /* Secondary section headers */
text-4xl         /* STRICT: Centered hero headings */
```

### Letter Spacing & Leading

```css
tracking-tight   /* Text-4xl headings, app titles */
tracking-normal  /* All body copy, standard labels */
leading-relaxed  /* Mandatory for all paragraph body copy to ensure spaciousness */
leading-snug     /* Headings and card titles */
```

### Hierarchy Examples

| Element | Size | Weight | Color | Spacing | Leading |
| --- | --- | --- | --- | --- | --- |
| Hero Heading | 4xl | semibold | white | tight | snug |
| Card Title | xl | semibold | white | normal | snug |
| Body Copy | base | normal | zinc-300 | normal | relaxed |
| CTA Capsule | sm | medium | white | normal | normal |
| Social Chip | xs | medium | zinc-400 | normal | normal |

---

## Animation System

### Core Philosophy: iOS Fluidity

Animations mirror native mobile physics—springs, smooth scaling, and fluid blur transitions. Nothing snaps harshly; everything glides or settles.

### Page Pacing & Entrances (Scale & Fade)

Elements rise smoothly into place, simulating an app launch sequence.

```tsx
initial={{ opacity: 0, scale: 0.96, y: 16 }}
animate={{ opacity: 1, scale: 1, y: 0 }}
transition={{ type: "spring", damping: 24, stiffness: 200 }}
```

### Micro-Interactions (The Capsule Press)

Buttons and cards physically depress when interacted with, reducing in scale while slightly increasing background opacity.

```tsx
whileHover={{ scale: 0.98, backgroundColor: "rgba(39, 39, 42, 0.8)" }}
whileTap={{ scale: 0.95 }}
transition={{ type: "spring", stiffness: 400, damping: 25 }}
```

---

## UI Components

### The Controlled Hero Glow

The single source of Amethyst light. Must be absolutely centered behind the `text-4xl` hero text, fading smoothly into the near-black abyss.

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

### Dark Capsule CTAs

Fully rounded, touch-friendly targets. They use a subtle inner top-border to catch the light, mimicking physical bevels.

```tsx
<button className="flex items-center justify-center px-6 py-3 rounded-full bg-zinc-800 text-white text-sm font-medium border border-white/10 shadow-[inset_0_1px_0_rgba(255,255,255,0.15)] hover:bg-zinc-700 transition-colors">
  Start Building
</button>
```

### Translucent Charcoal Glass Cards

Centered, frosted modules used for feature grids and FAQs. They let the deep background bleed through slightly.

```tsx
<div className="bg-zinc-900/60 backdrop-blur-xl border border-white/5 rounded-3xl p-6 hover:border-white/10 transition-colors">
  <h3 className="text-xl font-semibold text-white mb-2">Native Fluidity</h3>
  <p className="text-zinc-300 text-base leading-relaxed">
    Every interaction is modeled on true mobile physics.
  </p>
</div>
```

---

## Component Catalog

### Hero Ecosystem

The hero strictly follows a center-aligned stack: Glow → Heading → Body → Capsule CTA → Pristine Phone Mockup.

```tsx
<section className="relative flex flex-col items-center text-center pt-24 pb-12 overflow-hidden">
  <HeroGlow />
  <h1 className="text-4xl font-semibold text-white tracking-tight mb-4">
    The standard for modern interfaces.
  </h1>
  <p className="text-base text-zinc-300 leading-relaxed max-w-md mb-8">
    Build incredibly fast, highly tactile experiences.
  </p>
  <DarkCapsuleCTA />
  <div className="mt-16 w-full max-w-[320px]">
    <PristinePhoneMockup />
  </div>
</section>
```

### Social Cues (Avatar Chips)

Friendly, rounded components that introduce human elements into the minimal UI.

```tsx
<div className="inline-flex items-center gap-2 p-1 pr-4 rounded-full bg-zinc-900/80 border border-white/5">
  <img src="/avatar.jpg" className="w-6 h-6 rounded-full" />
  <span className="text-xs font-medium text-zinc-300">Joined by 10,000+ designers</span>
</div>
```

### Alternating Phone Moments

Below the hero, content shifts to zigzag alternating layouts pairing a phone mockup with a text block and an avatar chip.

```tsx
<div className="flex flex-col md:flex-row items-center gap-12 py-20">
  <div className="w-full md:w-1/2 flex justify-center">
    <PhoneMockup side="left" />
  </div>
  <div className="w-full md:w-1/2 flex flex-col items-start text-left">
    <AvatarChip />
    <h2 className="text-2xl font-semibold text-white mt-4 mb-3">Syncs instantly.</h2>
    <p className="text-base text-zinc-300 leading-relaxed">
      Everything updates in real-time across your entire stack.
    </p>
  </div>
</div>
```

### Spacious FAQs

Expansive, highly readable accordions using minimal dividers.

```tsx
<div className="border-b border-white/5 py-6">
  <h4 className="text-sm font-medium text-white mb-2">How does the integration work?</h4>
  <p className="text-sm text-zinc-400 leading-relaxed">
    Connect your account via OAuth and we handle the dark mode sync automatically.
  </p>
</div>
```

---

## Quality Checklist

* [ ] Is the primary hero heading exactly `text-4xl` and perfectly center-aligned?
* [ ] Is the background a near-black void (`zinc-950`) with no harsh contrasting blocks?
* [ ] Does the Amethyst glow exist strictly as a radial blur behind the hero center?
* [ ] Are all CTAs and interactive chips fully rounded (`rounded-full`) dark capsules?
* [ ] Do buttons utilize an inner sheen (`shadow-[inset...]`) rather than external drop shadows?
* [ ] Does the body copy use `leading-relaxed` to ensure a premium, uncrowded read?
* [ ] Are all card borders kept to an ultra-low contrast (`border-white/5` or `10`)?
* [ ] Is the first visual element below the hero fold a pristine phone mockup?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Deep near-black backgrounds (`zinc-950`, `zinc-900`).
* Pristine, borderless phone mockups dominating the spatial layout.
* Frosted glass (`backdrop-blur`) with subtle charcoal tints.
* Singular, centralized Amethyst glows.
* Inner light sheens on top edges of buttons and cards.
* Avatar stacks and familiar social UI patterns.

### ✗ Not Allowed

* Sharp (`rounded-none` or `rounded-sm`) corners on buttons or main interactive cards.
* Multiple competing accent colors or scattered glowing points outside the hero center.
* High-contrast borders (`border-white` or `border-white/50`).
* Heavy, opaque exterior drop shadows (`shadow-xl` with black/gray).
* Large blocks of dense, tightly-spaced body text.
* Desktop-centric window mockups (must strictly use phone mockups).