Oat Milk Interface Calm Design System

/oatMilkInterfaceCalmDesignSystem
A calming, premium, and friendly design system for light interfaces, using soft glassmorphism, airy spacing, rounded geometry, earthy tones, and bright photography to create approachable consumer digital experiences.
0 likes
0 bookmarks
Jul 10, 2026
Design System Content
# Oat Milk Interface Calm Design System

A design language for warm, friendly, consumer-grade light-themed interfaces driven by soft glassmorphism and rounded geometry.

---

## Philosophy

> "Warmth creates welcome; geometry creates calm."

This system creates interfaces that feel like a quiet Sunday morning in a sunlit café—bright, inviting, and effortlessly tactile. The design should feel premium yet deeply approachable, relying on soft organic curvature, diffused light, and grounded, natural tones rather than harsh digital contrasts.

### Core Beliefs

1. **Hierarchy through warmth and depth** — Soft graphite text over warm white and oat milk canvases creates a comfortable, natural reading experience.
2. **Photography is the anchor** — High-quality, bright full-bleed photography (morning workspaces, home interiors, calm nature) sets the spatial context and emotional baseline.
3. **The Accent is organic, not digital** — Dark roasted-olive acts as our primary interactive color, anchoring actions with earthy confidence instead of striking with synthetic neon.
4. **Airy, spacious geometry** — High-end consumer interfaces require gentle margins. If a section feels dense, it loses its calming effect.
5. **Tactile glassmorphism** — Layering utilizes frosted glass (backdrop blurs) with subtle translucent inner strokes to separate elements without resorting to heavy, opaque borders.

### Strict Rules

* **No Pure Black or Generic Grays** — Absolute black (`#000000`) and cool digital grays are forbidden. Use Soft Graphite and Mushroom Gray.
* **No Sharp Corners** — Every interactive element and container must embrace rounded geometry (from smooth radii to fully pill-shaped buttons).
* **No Flat, Heavy Modals** — Floating elements use frosted glass overlays to maintain connection with the bright photography or content beneath.
* **No Harsh Drop Shadows** — Depth is created through gentle, diffused shadows and subtle inner strokes (1px translucent white) on cards.

---

## Color Palette

### The Natural Scale

The palette transitions from bright, warm canvas tones down to earthy, grounded graphites. The primary interactive accent is a rich, grounding Dark Roasted-Olive.

```css
/* Backgrounds (Lightest to Darkest) */
bg-warm-white         /* Main canvas background (#FDFCFB) */
bg-oat-milk           /* Secondary panels, soft container zones (#F7F4F0) */
bg-oat-milk/60        /* Translucent layers, inactive tabs */
bg-white/40           /* Glassmorphic card bases (when over photography) */
bg-pale-stone/30      /* Hover states for cards and secondary items */
bg-pale-stone         /* Solid badges, structural pills, tags (#EAE6E1) */

/* Borders & Strokes */
border-white/50       /* Inner strokes for glassmorphism */
border-pale-stone     /* Default structural card borders */
border-mushroom-gray/30 /* Subtle divider lines */

/* The Anchor: Dark Roasted-Olive (Accent/CTA) */
text-olive-800        /* Primary interactive focus, text links (#3A4032) */
bg-olive-800          /* Primary call-to-action buttons, active layout indicators */
border-olive-800      /* Focused input rings, critical selections */
bg-olive-800/10       /* Soft olive hover backdrops */

/* Text Hierarchy (Warm Monochromatic) */
text-graphite-900     /* Primary hero headlines, section titles (#2D2B2A) */
text-graphite-800     /* Standard text, supporting copy */
text-mushroom-gray    /* Secondary text, instructional paragraphs (#8C8782) */
text-pale-stone       /* System hints, placeholders, disabled labels */
```

### Destructive Actions

```css
hover:bg-terracotta-50
hover:text-terracotta-700
hover:border-terracotta-200
```

---

## Typography

The typographic system utilizes highly readable, friendly sans-serifs (**DM Sans, Manrope, or Plus Jakarta Sans**) to evoke a refined, consumer-grade feel.

### Font Weights

```css
font-regular     /* Standard body text, airy FAQ answers */
font-medium      /* Supporting copy, nav text, secondary buttons */
font-semibold    /* Button text, active states, feature labels */
font-bold        /* Hero headlines, section titles */
```

### Font Size Scale

```css
text-[13px]      /* Nav text, micro system metrics, footer links */
text-[14px]      /* Active nav states, secondary button labels */
text-[17px]      /* Standard supporting copy, standard paragraph flow */
text-[18px]      /* Primary supporting copy, feature descriptions */
text-[32px]      /* Standard section titles */
text-[36px]      /* Large section titles, key metric callouts */
text-[40px]      /* Standard hero headlines */
text-[46px]      /* Maximum hero headlines */
```

### Letter Spacing & Transforms

```css
tracking-tight   /* Large hero headlines and section titles (-0.02em) */
tracking-normal  /* Default paragraph flow text (0em) */
tracking-wide    /* Small glass labels, overline text (0.02em) */
```

### Hierarchy Examples

| Element | Size | Weight | Color | Tracking |
| --- | --- | --- | --- | --- |
| Hero Headline | 40–46px | bold | graphite-900 | tight |
| Section Titles | 32–36px | bold | graphite-900 | tight |
| Supporting Copy | 17–18px | medium | graphite-800 | normal |
| Nav Text | 13–14px | medium | mushroom-gray | normal |
| Glass Labels | 13px | semibold | olive-800 | wide |

---

## Animation System

### Core Philosophy: The Gentle Glide

Elements behave with natural, physical fluidity. They ease into place softly, emphasizing organic movement over digital snapping.

### Page Transitions (Soft Fade & Rise)

```tsx
initial={{ opacity: 0, y: 15 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6, ease: [0.16, 1, 0.3, 1] }}
```

### Micro-Interactions (The Soft Hover)

Buttons and cards elevate subtly with diffused shadows, rather than harsh shifts in borders.

```tsx
whileHover={{ y: -2, scale: 1.01 }}
transition={{ type: "spring", stiffness: 300, damping: 25 }}
```

---

## UI Components

### The Centered Conversion Stack

Always positioned over a bright, full-bleed photograph. Combines the primary headline, supporting copy, and fully rounded CTA in a perfectly aligned central column.

```tsx
<div className="flex flex-col items-center text-center max-w-2xl mx-auto space-y-6 pt-32 pb-40">
  <h1 className="text-[46px] font-bold text-graphite-900 tracking-tight">Morning clarity, delivered.</h1>
  <p className="text-[18px] font-medium text-graphite-800">Your daily workspace, organized before you even wake up.</p>
  <button className="bg-olive-800 text-warm-white text-[17px] font-semibold rounded-full px-8 py-4">
    Get Started
  </button>
</div>
```

### Frosted Glass Card (with Inner Stroke)

Used for device mockup grids and feature cards layered over imagery or oat milk backgrounds.

```tsx
<div className="bg-white/40 backdrop-blur-md border border-white/50 shadow-[0_8px_30px_rgb(0,0,0,0.04)] rounded-[24px] p-8">
  {/* Content */}
</div>
```

### Vertically Centered Feature Block

Pairs left-aligned copy with right-side rounded imagery.

```tsx
<div className="grid grid-cols-1 md:grid-cols-2 gap-16 items-center">
  <div className="space-y-4">
    <GlassLabel text="Workflow" />
    <h2 className="text-[36px] font-bold text-graphite-900">Seamless integration</h2>
    <p className="text-[18px] text-mushroom-gray">Connect your tools effortlessly in one unified space.</p>
  </div>
  <div className="rounded-[32px] overflow-hidden shadow-soft">
    <img src="workspace.jpg" alt="Calm natural setting" />
  </div>
</div>
```

---

## Component Catalog

### Cards & Accordions

Clean, spacious containers with rounded geometry.

```tsx
// Clean Icon Card
"bg-warm-white border border-pale-stone rounded-[20px] p-6 hover:shadow-[0_12px_40px_rgb(0,0,0,0.06)] transition-all duration-300"

// Airy FAQ Accordion
"border-b border-pale-stone py-6 text-[18px] text-graphite-900 flex justify-between items-center cursor-pointer hover:text-olive-800 transition-colors"
```

### Buttons

Strictly fully rounded (pill shape) to emphasize the friendly consumer aesthetic.

```tsx
// Primary CTA (Dark Roasted-Olive)
"bg-olive-800 text-warm-white font-semibold text-[17px] rounded-full px-8 py-4 hover:bg-olive-900 transition-colors shadow-sm"

// Secondary Action Button
"bg-warm-white border-2 border-pale-stone text-graphite-900 font-medium text-[14px] rounded-full px-6 py-2.5 hover:bg-oat-milk transition-all"
```

### Inputs

```tsx
// Soft Geometry Input
"w-full px-6 py-4 rounded-full bg-warm-white border border-pale-stone text-graphite-900 placeholder-mushroom-gray focus:outline-none focus:border-olive-800 focus:ring-1 focus:ring-olive-800 transition-all text-[17px]"
```

### Badges & Glass Labels

```tsx
// Glass Feature Label (For use over imagery or oat milk)
"inline-flex items-center px-4 py-1.5 text-[13px] font-semibold tracking-wide rounded-full bg-white/60 backdrop-blur-sm border border-white/40 text-olive-800 shadow-sm"
```

---

## Quality Checklist

* [ ] Are all hero headlines sized precisely between **40–46px** and section titles between **32–36px**?
* [ ] Is the primary text color a Soft Graphite rather than a generic `#000000`?
* [ ] Do all buttons feature fully rounded (`rounded-full`) pill geometry?
* [ ] Are device mockup grids housed within frosted cards (`backdrop-blur`) utilizing subtle white inner strokes?
* [ ] Are you utilizing Dark Roasted-Olive exclusively for primary CTAs and active states?
* [ ] Does the hero section feature a bright, full-bleed photograph (workspace, nature, café) with a perfectly centered conversion stack?
* [ ] Do all cards and feature panels maintain vast, airy spacing to ensure a calming visual rhythm?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Warm whites, oat milk, and soft stone backgrounds.
* Full-bleed, high-quality, bright lifestyle or natural photography.
* Subtle translucent inner strokes (`border-white/50`) to define glass edges.
* Generous border radii on all structural elements (20px to 32px for cards, fully rounded for buttons).
* Soft, highly-diffused shadows with very low opacity (e.g., 4-6% black).

### ✗ Not Allowed

* Pure black (`#000000`) or cool, blue-tinted grays.
* Sharp square corners or aggressive geometric angles.
* Heavy, opaque drop shadows or harsh card borders.
* Bright neon or highly saturated primary colors (e.g., standard digital blue, bright red).
* Left-aligned hero conversion stacks (must be centered over full-bleed photography).