Soft Sky Friend Capsule UI

/softSkyFriendCapsuleUi
A gentle, mobile-first design system championing pill-shaped geometry, warm whites, and subtle sky blue accents for interfaces that feel calming, inviting, and frictionlessly human across all devices.
0 likes
0 bookmarks
Jun 17, 2026
Design System Content
# Soft Sky Friend Capsule UI

A design language for approachable, mobile-first interfaces defined by comforting geometry and calm, breathable hierarchy.

---

## Philosophy

> "Approachability is born from soft edges and clear intentions."

This system creates interfaces that feel like a trusted companion—inviting, perfectly balanced, and frictionless. The design relies on generous, pill-like proportions and a soothing, temperature-balanced palette to lower cognitive load. It replaces rigid grids with comforting, fluid structures that feel native to a mobile device but scale elegantly to any canvas.

### Core Beliefs

1. **Geometry as Comfort** — Fully rounded corners (capsules) remove tension from the interface. Sharp edges are strictly forbidden.
2. **Calm Mobile-First Hierarchy** — Layouts flow vertically and center-aligned by default. Information stacks logically, prioritizing immediate readability over dense data packing.
3. **Restrained Accents** — Sky blue is a spark of life, not a primary bucket of paint. It signals state, status, and presence, never heavy structural elements.
4. **The Ink Anchor** — Primary actions must carry visual weight. Deep "ink" buttons ground the light, airy canvas and guide the user's journey.
5. **Contextual Flow** — Every text block has a visual companion. Layouts rhythmically alternate between centered typography and polished phone mockups.

### Strict Rules

* **No Sharp Corners** — Every container, button, image, and input must utilize heavy border radii (capsules or fully rounded curves).
* **No Generic Accent Buttons** — Primary Call-to-Action (CTA) buttons must be "Ink" (deep graphite/black). Never use Sky Blue for large solid buttons.
* **Sky Blue is for Nuance Only** — The accent color is exclusively reserved for active states, tiny badges, avatar rings, and status dots.
* **No Loud Gradients** — Backgrounds must remain flat, utilizing pale, soothing tones to maintain an understated elegance.
* **Vertical Centering Dominates** — Lower page sections must adopt an oversized, centered, vertical stacking rhythm.

---

## Color Palette

### Warm Foundations & Graphite Scale

The palette replaces stark, sterile lab-whites with an inviting, warm white foundation. It layers on pale blue-gray structural blocks and anchors the reading experience with soft graphite and muted slate typography.

```css
/* Warm Foundations & Structural Blocks */
bg-stone-50           /* Main canvas: Warm white foundation (#fafaf9) */
bg-slate-50           /* Secondary oversized feature capsules (#f8fafc) */
bg-slate-100          /* Pale blue-gray section blocks and active states (#f1f5f9) */
bg-white/60           /* Glassy microchips and translucent overlays */

/* Borders & Dividers */
border-slate-100      /* Ultra-soft internal dividers */
border-slate-200      /* Standard capsule perimeters */
border-white/40       /* Glassy microchip highlights (inner rings) */

/* Text Hierarchy */
text-slate-800        /* Graphite headlines, primary titles, hero text */
text-slate-500        /* Muted slate supporting text, compact paragraphs */
text-slate-400        /* Secondary metadata, FAQ inactive states */

/* The Anchor: Ink Actions */
bg-slate-900          /* Primary CTA buttons, focused tooltips (#0f172a) */
text-slate-50         /* Text inverted on Ink buttons */
border-slate-900      /* Active input focus rings */
```

### The Sky Accent (Micro-Context Only)

```css
/* Sky Blue - Strict Usage Constraints */
text-sky-500          /* Active navigation text, active icon tints (#0ea5e9) */
bg-sky-500            /* Status dots, tiny badge backgrounds */
ring-sky-400          /* Avatar focus rings, active indicator outlines */
bg-sky-50             /* Subtle active-state background for list items */
```

---

## Typography

Typography feels deeply human and accessible. The system utilizes neo-grotesque and geometric sans-serifs (Geist, Manrope, Helvetica, or Roboto) to ensure pristine legibility.

### Font Family & Weights

* **Primary Stack:** Geist, Manrope, Helvetica Neue, or Roboto.

```css
font-normal      /* Compact paragraphs, muted slate supporting text */
font-medium      /* Ink CTAs, glassy microchip labels, elegant accordion titles */
font-semibold    /* Graphite headlines, section titles */
/* font-light and font-black are avoided to maintain middle-ground friendliness */
```

### Font Size Scale & Layout Rules

```css
text-[10px]      /* Tiny badges, status dot labels */
text-xs          /* Form helper text, glassy microchip metadata (12px) */
text-sm          /* Compact icon cards, accordion descriptions (14px) */
text-base        /* Primary body copy, compact paragraphs (16px) */
text-lg          /* Oversized rounded capsule subheadings (18px) */
text-xl          /* Standard section headlines */
text-4xl         /* Mandatory Hero typography size. Must be centered. */
```

### Hierarchy Examples

| Element | Size | Weight | Color | Tracking | Alignment |
| --- | --- | --- | --- | --- | --- |
| Hero Headline | 4xl | semibold | text-slate-800 | tight | center |
| Supporting Copy | base | normal | text-slate-500 | normal | center |
| Ink CTA Button | base | medium | text-slate-50 | normal | center |
| Accordion Title | sm | medium | text-slate-800 | normal | left |
| Microchip Badge | xs | medium | text-slate-500 | normal | center |

---

## Animation System

### Core Philosophy: The Friendly Breahe

Motion should mimic the physics of a light, air-filled balloon. Expansions are soft, bouncy, and deeply satisfying.

### Elegant Accordion Expansion

FAQ items and feature capsules open with a gentle spring, revealing muted slate text gracefully.

```tsx
initial={{ height: 0, opacity: 0 }}
animate={{ height: "auto", opacity: 1 }}
transition={{ type: "spring", bounce: 0.2, duration: 0.6 }}
```

### Glassy Microchip Hover

Microchips gently elevate and catch a subtle inner light on interaction, without relying on muddy drop shadows.

```tsx
whileHover={{ y: -2, backgroundColor: "rgba(255, 255, 255, 0.9)" }}
transition={{ duration: 0.2, ease: "easeOut" }}
```

---

## Layout & Structural Patterns

### The Hero Assembly

The top of the page must follow a strict, centered vertical cadence:
1. Centered `text-4xl` graphite headline.
2. Centered, compact paragraph (max-width: 480px, muted slate).
3. Fully rounded Ink CTA.
4. Polished phone mockup directly underneath, seamlessly grounded.

```tsx
<section className="flex flex-col items-center text-center pt-20 pb-10 px-4 bg-stone-50">
  <h1 className="text-4xl font-semibold text-slate-800 mb-4 font-geist">
    Your approachable headline here
  </h1>
  <p className="max-w-md text-base text-slate-500 mb-8 font-normal">
    Compact supporting paragraph that explains the value proposition calmly.
  </p>
  <button className="bg-slate-900 text-slate-50 rounded-full px-8 py-3.5 font-medium mb-16">
    Get Started
  </button>
  <div className="w-full max-w-[320px] rounded-[3rem] border-[8px] border-slate-100 shadow-xl overflow-hidden">
    {/* Polished phone mockup content */}
  </div>
</section>
```

### Alternating Lower Sections

Lower page sections step away from horizontal grids and embrace oversized, vertically stacked alternating layouts (Mockup → Copy → Mockup → Copy).

---

## Component Catalog

### Buttons & Actions

Primary buttons are anchored in "Ink" to contrast the light aesthetics, featuring extreme border radii.

```tsx
// Fully Rounded Ink CTA (Primary)
"bg-slate-900 text-white font-medium text-base rounded-full px-8 py-3.5 hover:bg-slate-800 transition-colors"

// Secondary Capsule Button
"bg-white border border-slate-200 text-slate-800 font-medium text-sm rounded-full px-6 py-2.5 hover:bg-slate-50 transition-colors"
```

### Glassy Microchips

Small contextual tags that float gracefully on the warm white or pale blue-gray foundations.

```tsx
// Glassy Context Microchip
"inline-flex items-center gap-2 backdrop-blur-md bg-white/60 border border-white/40 text-slate-800 text-xs font-medium px-3 py-1.5 rounded-full shadow-[0_2px_8px_-4px_rgba(0,0,0,0.05)]"
```

### Badges, Avatars & Status (The Sky Accent)

The only permissible use of the Sky Blue accent.

```tsx
// Avatar Ring
"h-10 w-10 rounded-full p-0.5 ring-2 ring-sky-400 bg-white"

// Status Dot & Tiny Badge
"relative flex h-2.5 w-2.5"
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-sky-400 opacity-75"></span>
<span className="relative inline-flex rounded-full h-2.5 w-2.5 bg-sky-500"></span>

// Active Navigation Tab
"text-sky-500 font-medium relative"
// (Include a tiny 4px sky-500 dot positioned under the active text)
```

### Oversized Feature Capsules

Large structural containers replacing traditional boxy cards.

```tsx
// Pale Blue-Gray Feature Capsule
"w-full max-w-2xl mx-auto bg-slate-50 rounded-[2.5rem] p-10 flex flex-col items-center text-center border border-slate-100"
```

### Elegant Accordion FAQs

```tsx
// FAQ Item Container
"border-b border-slate-100 py-4"
// FAQ Title (Medium, Graphite)
"flex justify-between items-center text-sm font-medium text-slate-800 w-full text-left"
// FAQ Body (Muted Slate)
"text-sm text-slate-500 pt-2 pb-4 leading-relaxed"
```

---

## Quality Checklist

* [ ] Is the hero headline exactly `text-4xl`, set in a clean geometric/neo-grotesque sans, and perfectly center-aligned?
* [ ] Is the primary CTA a fully rounded, deep graphite/black ("Ink") button?
* [ ] Are there absolutely zero loud colored gradients acting as backgrounds?
* [ ] Have you verified that Sky Blue is *only* used for status dots, tiny badges, active states, or avatar rings?
* [ ] Does every container, card, and image use generous, friendly capsule-like border radii?
* [ ] Are lower sections stacked vertically and centered, prioritizing alternating mockup-and-copy layouts?
* [ ] Is the core text hierarchy relying heavily on `text-slate-800` (Graphite) and `text-slate-500` (Muted Slate)?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Warm white (`bg-stone-50`) foundations.
* Pale blue-gray (`bg-slate-50`, `bg-slate-100`) section blocks.
* Fully rounded ("pill" or "capsule") geometry for all structural containers.
* Central, vertically-stacked mobile-first layouts.
* Subtle glassy effects (`backdrop-blur`) on microchips floating over pale containers.
* Polished phone mockups directly underneath compact hero text.

### ✗ Not Allowed

* Generic accent-colored (Sky Blue) primary buttons.
* Sharp, rigid 90-degree corners or tight 4px border radii.
* Bright, saturated, or loud opaque gradients.
* Dense, horizontally-packed data tables or complex multi-column grids in primary flows.
* Heavy, dark drop-shadows (use pale background contrast and very soft translucent borders instead).
* Left-aligned hero sections (hero must remain centered).