Skywash Indie Portfolio Stack

/skywashIndiePortfolioStack
A calm, tactile, mobile-first design system for digital portfolios. It uses sky-blue washes, soft radii, and centered layouts to create tranquil, focused, app-like presentations that prioritize structure, space, and elegance over decorative excess.
0 likes
0 bookmarks
Jun 18, 2026
Design System Content
# Skywash Indie Portfolio Stack

A minimal, calm, and highly tactile design language for modern, mobile-first digital portfolios.

---

## Philosophy

> "Quiet spaces amplify strong work; soft boundaries invite interaction."

This system creates interfaces that feel like a premium, tranquil app environment. Rather than relying on stark, sterile white backgrounds or heavy grids, it uses an immersive, soft sky-blue wash to create a calming atmosphere. The design is profoundly structural yet deeply approachable, relying on large, friendly corner radii, centered compositions, and elegant restraint. 

### Core Beliefs

1. **The Canvas as Atmosphere** — A continuous, pale sky-blue wash serves as the primary canvas, wrapping the content in a calming, atmospheric layer rather than an empty void.
2. **App-Like Tactility** — Project modules should feel like premium app previews. Large corner radii and gentle, diffuse shadows make digital elements feel like holdable, physical objects.
3. **Restrained Actions** — Buttons and interactive hooks ground the layout using deep, dark tones. Vibrant, colorful call-to-action buttons distract from the portfolio work and are strictly omitted.
4. **Mobile-First Flow on All Devices** — The core layout remains a centralized, vertical column—even on ultra-wide desktop monitors. This creates a focused, readable rhythm that mimics the intimacy of a mobile device.
5. **Generous Breathing Room** — Margins and paddings are doubled. Elements must never feel tightly packed or anxious.

### Strict Rules

* **No Sharp Corners** — Every container, image, and button must feature large, generous corner radii.
* **No Colorful CTAs** — Primary interactive elements must be rendered in deep Graphite or Cool Slate. 
* **No Masonry or Grids** — Project cards are strictly vertically stacked to maintain the singular, focused narrative flow.
* **No Decorative UI** — The interface provides structure; the portfolio screenshots provide the color and visual interest.

---

## Color Palette

### The Skywash & Neutral Scale

The palette avoids stark contrasts, opting instead for gentle transitions between soft washes, porcelain surfaces, and deeply grounded text tones. 

```css
/* Core Atmosphere */
bg-skywash-50         /* The main canvas atmosphere: extremely pale, soft sky blue (#f0f6fa) */
bg-pale-blue          /* Accent background for subtle interactive zones (#e1edf5) */

/* Surfaces */
bg-porcelain          /* Pure, warm white used exclusively for project cards (#ffffff) */
bg-pearl-gray         /* Extremely soft gray for subtle dividers or image placeholders (#f4f5f7) */

/* Borders & Shadows */
border-pearl-gray     /* Soft, barely-there boundaries for cards and images */
shadow-skywash        /* A very light, diffuse, tinted shadow for project cards (rgba(18, 38, 63, 0.04)) */

/* Typography & Interaction (The Dark Grounding) */
text-graphite         /* Deep, rich near-black for primary hero text and project titles (#1a1d20) */
text-cool-slate       /* Smooth, mid-tone gray-blue for body text and descriptions (#64748b) */
text-slate-light      /* Muted metadata and secondary labels (#94a3b8) */

/* Call To Action (Strictly Neutral/Dark) */
bg-graphite           /* Primary buttons: Dark, heavy, grounding */
hover:bg-graphite/90  /* Button hover state */
border-graphite       /* Outline buttons and focused states */
```

---

## Typography

The typographic system pairs the highly approachable, rounded geometry of **Plus Jakarta Sans** (or Onest) with the supreme legibility of **Inter** for long-form reading. 

### Font Families

```css
font-display    /* Plus Jakarta Sans or Onest: Used for Hero statements and Project Titles */
font-sans       /* Inter: Used exclusively for body descriptions and metadata */
```

### Font Weights

```css
font-medium      /* Default weight for body text—slightly more robust than normal */
font-semibold    /* Project titles, primary buttons, structural labels */
font-bold        /* Reserved strictly for the primary centered Hero Statement */
```

### Font Size Scale

```css
text-xs          /* Subtle metadata, tags (12px) */
text-sm          /* Button text, minor descriptions (14px) */
text-base        /* Core project body descriptions (16px) */
text-lg          /* Subheadings, intro lead-ins (18px) */
text-2xl         /* Project titles within cards (24px) */
text-4xl         /* Hero statements on mobile (36px) */
text-5xl         /* Hero statements on desktop (48px) */
```

### Hierarchy Examples

| Element | Font | Size | Weight | Color | Tracking |
| --- | --- | --- | --- | --- | --- |
| Hero Statement | Display | 4xl/5xl | bold | graphite | tight |
| Project Title | Display | 2xl | semibold | graphite | normal |
| Body Description | Sans | base | medium | cool-slate | normal |
| CTA Buttons | Display | sm | semibold | porcelain | wide |

---

## Layout & Structure

The Skywash layout forces focus through a strict, centered, single-column architecture, regardless of screen width.

### The Hero Module
1. **Centered Avatar**: A perfectly circular profile image, slightly elevated with a soft `shadow-skywash` and a crisp `border-porcelain` ring.
2. **Hero Statement**: A short, punchy, 2–3 line statement centered directly beneath the avatar.
3. **Action Stack**: Two fully rounded (`rounded-full`) pill buttons horizontally centered beneath the text. One solid (`bg-graphite`), one outlined (`border-graphite`).

### The Project Stack
* Projects are mapped as a vertical list below the Hero Module.
* Max-width is capped (e.g., `max-w-2xl` or `max-w-3xl`), forcing a mobile-like column of premium app-like previews down the center of a desktop screen.
* Spacing between modules is massive (e.g., `gap-16` or `gap-24`).

---

## UI Components

### Project Card (The App Preview)

Cards act as soft, physical modules resting on the skywash canvas. They require massive internal padding and beautifully rounded corners.

```tsx
// The Card Container
"bg-porcelain border border-pearl-gray rounded-[32px] p-8 shadow-skywash transition-transform duration-300 hover:-translate-y-1 hover:shadow-lg"

// The Large-Radius Screenshot Wrapper
"w-full aspect-[4/3] rounded-[24px] overflow-hidden bg-pearl-gray mb-8 border border-pearl-gray/50"

// The Text Block inside the Card
"flex flex-col gap-3 text-center sm:text-left"
```

### Buttons & Interactive Elements

Buttons discard sharp corners and vivid colors in favor of friendly, rounded, grounding pills.

```tsx
// Primary CTA Pill
"bg-graphite text-porcelain font-display font-semibold text-sm tracking-wide rounded-full px-8 py-3.5 hover:bg-graphite/90 transition-all shadow-md active:scale-95"

// Secondary CTA Pill
"bg-transparent border-2 border-graphite text-graphite font-display font-semibold text-sm tracking-wide rounded-full px-8 py-3.5 hover:bg-graphite/5 transition-all active:scale-95"
```

### Avatar

```tsx
// Centered Profile Image
"w-24 h-24 sm:w-28 sm:h-28 rounded-full border-4 border-porcelain shadow-skywash object-cover mx-auto mb-6"
```

---

## Animation System

### Core Philosophy: Soft Suspension

Elements should feel like they are floating slightly above the canvas. Animations are smooth, fluid, and never aggressive. 

### Initial Load (The Gentle Float)

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

### Interaction Physics

Buttons and cards use a fluid, organic spring physics that mimics physical pressing.

```tsx
whileTap={{ scale: 0.97 }}
transition={{ type: "spring", stiffness: 400, damping: 25 }}
```

---

## Quality Checklist

* [ ] Is the primary background a soft, soothing `skywash` rather than pure stark white?
* [ ] Are all buttons rendered as fully rounded (`rounded-full`) pills?
* [ ] Are the primary interactive colors restricted to `graphite` or dark slate (no blue, green, or red CTAs)?
* [ ] Does the Hero Module follow strict center-alignment (Avatar → Text → Buttons)?
* [ ] Are the project cards stacked vertically (no grid/masonry) with a constrained maximum width?
* [ ] Do all project screenshots use a large corner radius (e.g., `rounded-[24px]`)?
* [ ] Is there abundant breathing room (minimum `p-8` inside cards, minimum `gap-16` between sections)?

---

## Allowed vs Not Allowed

### ✓ Allowed
* Soft sky-blue (`skywash-50`) backgrounds that wrap the entire viewport.
* Large, exaggerated border radii (`rounded-2xl` to `rounded-3xl`).
* Deep graphite, near-black CTA buttons.
* Centered layout architectures with constrained maximum widths.
* Gentle, heavily blurred, slightly blue-tinted drop shadows.

### ✗ Not Allowed
* Colorful accent buttons (no electric blue, green, or orange buttons).
* Sharp corners or minimal radii (`rounded-sm` or square corners).
* Multi-column masonry grids for the core project display.
* Pure black (`#000000`) text or stark white (`#ffffff`) as the page's main background canvas.
* Tight margins or dense, heavy interfaces.