Sky Pearl Maker Column Design System

/skyPearlMakerColumnDesignSystem
A mobile-first, single-column design system for serene, high-end portfolio sites—emphasizing clarity, rounded geometry, soft palettes, and bold type to showcase maker work in a calming, uncluttered environment.
0 likes
0 bookmarks
Jun 18, 2026
Design System Content
# Sky Pearl Maker Column Design System

A mobile-first, single-column design language for polished, approachable, and calm portfolio interfaces.

---

## Philosophy

> "Clarity through alignment; warmth through geometry."

This system creates digital environments that feel like a high-end, friendly personal studio—bright, calming, and effortlessly organized. The aesthetic relies on an unbroken central rhythm, fully rounded geometry, and a soft, airy canvas to let the maker's work shine without visual competition.

### Core Beliefs

1. **The Single-Column Anchor** — The entire experience exists in a perfectly centered, strictly single-column layout across *all* breakpoints. No sprawling desktop grids; focus is absolute.
2. **Friendly Geometry** — Sharp corners create tension. We use fully rounded elements (pills, circles) and large, smooth radii on panels to maintain a calm, approachable mood.
3. **Weight as Confidence** — Unlike ultra-light luxury interfaces, this system uses bold, rounded typography to project a grounded, confident, and human presence.
4. **Soft Containment** — Depth is achieved through minimal, diffused shadows and ultra-low contrast borders. Cards should look like they are floating on a cushion of air, akin to native iOS panels.
5. **Image Dominance** — Text is kept strictly minimal on project showcases. The large, beautifully rounded image is the undisputed hero of every card.

### Strict Rules

* **Single Column Only** — Elements never sit side-by-side on desktop outside of the hero's twin call-to-action buttons. Project cards strictly stack one per row.
* **No Sharp Corners** — Buttons are completely pill-shaped (`rounded-full`). Cards and images use massive border radii (`rounded-3xl` or `rounded-2xl`).
* **No Harsh Outlines** — Borders are low-contrast and semi-transparent. 
* **Graphite & Sky** — Pure black is forbidden. Heavy elements use a soft, deep graphite, while backgrounds utilize pearl white and diffused sky-blue.

---

## Color Palette

### Base & Soft Canvas Scale

The palette transitions from a warm pearl white to a subtle, airy sky-blue, grounding interactive elements in deep graphite.

```css
/* Canvas & Backgrounds */
bg-[#F8FAFC]          /* Pearl white base, main page background */
bg-sky-50/50          /* Soft sky-blue ambient background zones */
bg-white/80           /* Translucent card panels (requires backdrop blur) */
bg-white              /* Solid fallback for cards and inputs */
bg-slate-50           /* Hover states for interactive secondary surfaces */

/* Borders & Dividers (Ultra-Low Contrast) */
border-slate-100      /* Default card bounds, panel edges */
border-sky-100/50     /* Subtle separations in colored zones */
border-slate-200/50   /* Hover state boundaries */

/* Primary Interactivity: Graphite */
bg-slate-800          /* Primary CTA button fills, deep dark accents */
border-slate-800      /* Outlines for focused states */
bg-slate-700          /* Primary CTA hover states */
bg-slate-900          /* Active/pressed states for primary actions */

/* Text Hierarchy */
text-slate-800        /* Primary headlines, hero text, confident headings */
text-slate-600        /* Body text, project descriptions, secondary metadata */
text-slate-400        /* Tertiary text, subtle timestamps, disabled labels */
text-white            /* Text strictly within Graphite primary buttons */

/* Accents (Used sparingly for active/focus states) */
text-sky-600          /* Subtle text links, active navigation states */
bg-sky-100            /* Soft highlight backgrounds */
```

---

## Typography

Typography balances approachable human warmth with clean, unopinionated structure. Headlines use a bold, rounded geometric sans, while descriptions use an ultra-legible, neutral sans.

### Font Families

*   **Primary (Headlines):** Plus Jakarta Sans (Alternates: Geist, Manrope)
*   **Secondary (Body/UI):** Inter (Alternate: DM Sans)

### Font Weights

```css
font-bold        /* Hero headline (4xl/5xl), Project card headings */
font-medium      /* Button labels, tags, subheadings */
font-normal      /* Core body copy, short project descriptions */
/* font-light and font-black are excluded to maintain the balanced, friendly weight */
```

### Font Size Scale

```css
text-xs          /* Tiny utility labels, micro-tags (12px) */
text-sm          /* Compact project descriptions, button text (14px) */
text-base        /* Standard intro text, default body (16px) */
text-xl          /* Project card headings (20px) */
text-2xl         /* Section titles (24px) */
text-4xl         /* Default hero headline for mobile (36px) */
text-5xl         /* Confident desktop hero headline (48px) */
```

### Letter Spacing & Line Height

```css
tracking-tight   /* Always applied to text-4xl and text-5xl to group large text firmly */
tracking-normal  /* All body copy and buttons */
leading-tight    /* Hero headlines */
leading-relaxed  /* Project descriptions to maximize breathing room */
```

### Hierarchy Examples

| Element | Font Family | Size | Weight | Color | Tracking |
| --- | --- | --- | --- | --- | --- |
| Hero Headline | Plus Jakarta Sans | 4xl/5xl | bold | slate-800 | tight |
| Project Heading | Plus Jakarta Sans | xl | bold | slate-800 | tight |
| Maker Intro | Inter | base | normal | slate-600 | normal |
| Descriptions | Inter | sm | normal | slate-600 | normal |
| CTA Button | Inter | sm | medium | white | normal |

---

## Animation System

### Core Philosophy: The iOS Spring

Animations should mirror the fluidity and physics of native iOS interfaces—no linear fades, only bouncy, deeply satisfying spring physics. 

### Page & Element Unveil

Cards slide up gently with a subtle scaling effect.

```tsx
initial={{ opacity: 0, y: 20, scale: 0.98 }}
animate={{ opacity: 1, y: 0, scale: 1 }}
transition={{ type: "spring", stiffness: 260, damping: 25 }}
```

### Hover Dynamics (Soft Floating)

Project panels don't jump; they gently float upward while shadows deepen softly.

```tsx
whileHover={{ y: -4, scale: 1.01 }}
transition={{ type: "spring", stiffness: 400, damping: 30 }}
```

---

## UI Components

### Maker Avatar Hub

The visual anchor of the hero section. Fully circular, neatly contained, low-contrast border.

```tsx
<div className="w-16 h-16 rounded-full overflow-hidden border-2 border-white shadow-sm ring-1 ring-slate-100 mx-auto mb-6">
  <img src="/avatar.jpg" className="w-full h-full object-cover" />
</div>
```

### iOS-Style Project Panel

The strict single-column requirement means these panels take up the maximum defined column width (e.g., `max-w-2xl`). 

```tsx
<article className="w-full bg-white/80 backdrop-blur-md rounded-3xl p-4 border border-slate-100 shadow-[0_8px_30px_rgb(0,0,0,0.04)] mb-8 transition-all hover:shadow-[0_12px_40px_rgb(0,0,0,0.08)]">
  <div className="w-full aspect-[4/3] rounded-2xl overflow-hidden bg-slate-50 mb-5">
    {/* Large Image Goes Here */}
  </div>
  <div className="px-2 pb-2">
    <h3 className="font-bold text-xl text-slate-800 tracking-tight mb-1">Project Name</h3>
    <p className="font-normal text-sm text-slate-600 leading-relaxed line-clamp-2">Compact description text only.</p>
  </div>
</article>
```

### Ambient Sky Backdrop

To achieve the pearl-to-sky aesthetic without muddy gradients, use a fixed background with large, ultra-blurred radial blobs.

```tsx
<div className="fixed inset-0 z-[-1] bg-[#F8FAFC]">
  <div className="absolute top-[-10%] left-[-10%] w-[50%] h-[50%] bg-sky-100/40 rounded-full blur-[100px]" />
  <div className="absolute bottom-[-10%] right-[-10%] w-[50%] h-[50%] bg-white rounded-full blur-[100px]" />
</div>
```

---

## Component Catalog

### Hero Layout Structure

Strictly centered, constrained width.

```tsx
<header className="max-w-2xl mx-auto flex flex-col items-center text-center pt-24 pb-16 px-6">
  <AvatarHub />
  <h1 className="font-bold text-4xl md:text-5xl text-slate-800 tracking-tight leading-tight mb-4 font-plus-jakarta">
    Hero Headline
  </h1>
  <p className="text-base text-slate-600 max-w-lg mb-8 font-inter">
    Short intro description.
  </p>
  <div className="flex items-center gap-4">
    {/* Twin fully rounded graphite buttons */}
  </div>
</header>
```

### Buttons

```tsx
// Primary Graphite Button (Fully Rounded)
"bg-slate-800 text-white font-inter font-medium text-sm rounded-full px-6 py-3 hover:bg-slate-700 transition-colors shadow-sm active:scale-95"

// Secondary Muted Button (Fully Rounded)
"bg-white border border-slate-200 text-slate-800 font-inter font-medium text-sm rounded-full px-6 py-3 hover:bg-slate-50 transition-colors shadow-sm active:scale-95"
```

### Badges & Tags

Soft, unassertive, pill-shaped tags for metadata.

```tsx
// Standard Project Tag
"px-3 py-1 text-xs font-medium rounded-full bg-slate-100 text-slate-600"
```

---

## Quality Checklist

* [ ] Is the entire layout restricted to a single column (e.g., `max-w-2xl` centrally aligned) on all screen sizes?
* [ ] Do all interactive CTA buttons use `rounded-full` (pill shape) and the graphite color?
* [ ] Are the project cards displaying only *one* item per row, even on desktop?
* [ ] Do project panels use massive radii (`rounded-3xl` for the card, `rounded-2xl` for the image inside)?
* [ ] Are all drop shadows strictly low-opacity (max 4-8% black) and highly blurred to mimic iOS panels?
* [ ] Is the hero headline utilizing the bold weight of the designated rounded sans (Plus Jakarta Sans/Geist/Manrope)?
* [ ] Is text heavily constrained within the cards to ensure the image remains the dominant visual element?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Strict vertical stacking (single-column flow).
* Generous vertical spacing (`mb-8`, `mb-16`, `py-24`) between structural components.
* Fully rounded buttons and badges.
* Large, expansive corner radii on media and panels.
* Pearl-white and soft sky-blue ambient backgrounds.
* Spring-physics animations for hover states.

### ✗ Not Allowed

* Grid layouts that place project cards side-by-side (2 or 3 columns are strictly forbidden).
* Sharp right angles (`rounded-none` or `rounded-sm`) on cards or main buttons.
* Pure black text (`text-black` / `#000000`).
* High-contrast, thick, or dark borders on containers.
* Long paragraphs inside project cards.
* Multi-colored buttons or saturated primary action colors (stick to the graphite palette).