Editorial Sans Maker Ledger

/editorialSansMakerLedger
A typographic, editorial design system for premium indie portfolios. Prioritizes vertical flow, neutral palettes, and understated UI to create a mobile-native, magazine-like experience focused on content and photography.
0 likes
0 bookmarks
Jun 18, 2026
Design System Content
# Editorial Sans Maker Ledger

A highly typographic, editorial-light design language tailored for premium indie portfolios. Clean, mobile-native, and infinitely reusable.

---

## Philosophy

> "Typography provides the structure; the ledger curates the narrative."

This system transforms digital portfolios into curated editorial spreads. It moves away from overly complex bento boxes and vibrant startup gradients, favoring a calm, centered, vertical reading experience. The interface feels like a high-end, freshly printed indie magazine—warm, structured, and entirely focused on the work.

### Core Beliefs

1. **The Ledger is Absolute** — Layouts follow a strict, single-column vertical flow. One idea, or one project, per row. 
2. **Typographic Scale over Decoration** — Visual hierarchy is achieved through precise font pairing (Grotesk headers, clean Sans body) and size contrast, rather than colored badges or heavy borders.
3. **Warm Restraint** — True white (#FFFFFF) is jarring. A warm chalk-white canvas paired with graphite text reduces eye strain and feels implicitly premium.
4. **Photography as the Palette** — The interface itself remains aggressively neutral (blacks, grays, chalk whites). All color and vibrancy must come entirely from the project imagery.
5. **Understated Interaction** — Interactive elements don't shout. CTAs are simple black capsules; hover states are gentle physical interactions.

### Strict Rules

* **No Multi-Column Project Grids** — Projects are displayed sequentially, one per row, demanding the user's full attention.
* **No Colorful UI Elements** — Buttons, tags, and links must remain monochromatic (graphite, stone, or black).
* **No Stark Shadows** — Depth is created through fine 1px dividers and extremely restrained, diffuse shadows on imagery only.
* **No Highly-Saturated Backgrounds** — Backgrounds alternate only between chalk-white and subtle stone-gray section bands.
* **Two-Typeface Maximum** — A primary Grotesk for display, and a highly legible Sans for interface/body text.

---

## Color Palette

### The Editorial Scale

The palette is intentionally limited to mimic physical paper and ink. The canvas is a warm chalk-white, text mimics the soft black of graphite, and sectioning is handled through natural stone grays.

```css
/* Backgrounds (Canvas & Structure) */
bg-stone-50           /* The primary Chalk-White canvas (#fafaf9) */
bg-stone-100          /* Subtle Stone-Gray section bands & muted zones */
bg-stone-200/50       /* Secondary interactive hover states */
bg-white              /* Pure white used strictly for image mattes/containers to pop against stone */
bg-stone-900          /* Pure focus blocks, capsule CTA backgrounds */

/* Borders & Dividers */
border-stone-200      /* Default fine divider lines (The Ledger rules) */
border-stone-300      /* Focused borders, form input rings */
border-stone-900      /* High-contrast active states */

/* Typography: Graphite & Muted Inks */
text-stone-900        /* Deep black for capsule CTA text (inverted), prominent numbers */
text-stone-800        /* Graphite Headlines, primary titles, active navigation (#292524) */
text-stone-500        /* Muted gray copy, project descriptions, short intros */
text-stone-400        /* Fine metadata, timestamps, subtle UI instructions */

/* Overlays (No heavy blurs, just clean dark washes) */
bg-stone-900/10       /* Extremely subtle image overlays on press */

```

---

## Typography

The aesthetic lives and dies by its font pairing. A premium Grotesk establishes editorial authority, while a compact Sans ensures perfect mobile legibility. 

### Font Families

* **Primary (Display & Headings):** Söhne, Geist, Neue Montreal, or ABC Favorit.
* **Secondary (Body & Metadata):** Inter or DM Sans.

### Font Weights

```css
font-normal      /* Default for all body copy and metadata */
font-medium      /* Headlines, subheadings, capsule CTAs, and active links */
/* font-light and font-bold are generally avoided to maintain a steady editorial 'color' on the page */

```

### Font Size Scale

```css
text-[11px]      /* Micro-metadata, fine print, image captions */
text-[13px]      /* Overline tags, secondary navigation links */
text-sm          /* Compact body copy, project descriptions, short intros (14px) */
text-base        /* Standard project card titles, secondary headings (16px) */
text-lg          /* Emphasized subheadings (18px) */
text-xl          /* Standard section breaks */
text-3xl-4xl     /* Concise founder headline, page titles */

```

### Letter Spacing & Transforms

```css
tracking-tight   /* Exclusively for Grotesk Headlines (text-xl and above) */
tracking-normal  /* Default for Inter/DM Sans body text */
tracking-wide    /* For metadata, uppercase capsules */

uppercase        /* Micro-tags, fine metadata */

```

### Hierarchy Examples

| Element | Family | Size | Weight | Color | Tracking |
| --- | --- | --- | --- | --- | --- |
| Founder Headline | Grotesk | 4xl | medium | stone-800 | tight |
| Project Title | Grotesk | base | medium | stone-800 | normal |
| Body / Intro | Sans | sm | normal | stone-500 | normal |
| Capsule CTA | Sans | sm | medium | stone-50 | normal |
| Metadata Tag | Sans | [11px]| normal | stone-400 | wide (uppercase) |

---

## Animation System

### Core Philosophy: The Physical Scroll

Animations shouldn't feel like software; they should feel like sliding physical photographs across a fine desk.

### The Ledger Reveal (Page Load)

Elements fade in and slide up in a gentle, staggered sequence down the vertical axis.

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

```

### Image Tactility (Hover states)

Instead of colored overlays, project images subtly zoom within a rigid bounding box to indicate interactivity.

```tsx
// Applied to the image inside a container with overflow-hidden
className="transition-transform duration-700 ease-out hover:scale-[1.03]"

```

---

## UI Components

### The Vertical Ledger Anchor

The central structural component. A rigidly constrained, centered column that holds the entire portfolio narrative.

```tsx
<main className="mx-auto max-w-xl px-5 py-24 flex flex-col items-center text-center">
  {/* Content goes here */}
</main>

```

### Fine Ledger Dividers

Used to separate projects. They stretch full-width within the container but remain visually whisper-thin.

```tsx
<hr className="w-full border-t border-stone-200 my-12" />

```

### Avatar & Founder Headline Array

The top of the ledger. Tight, concise, centered.

```tsx
<div className="flex flex-col items-center gap-6 mb-10">
  <img src="/avatar.jpg" className="w-16 h-16 rounded-full object-cover shadow-sm grayscale hover:grayscale-0 transition-all duration-500" />
  <h1 className="text-4xl font-medium text-stone-800 tracking-tight leading-tight">
    Product designer exploring typography and mobile-native interfaces.
  </h1>
  <p className="text-sm text-stone-500 max-w-md">
    Previously lead design at Acme. Currently building minimal, highly reusable digital ledgers for indie creators.
  </p>
</div>

```

---

## Component Catalog

### Project Cards (One-Per-Row)

Cards are not "boxed" in heavy borders. They are defined by the imagery and separated by the ledger dividers. 

```tsx
// The Project Container
<article className="w-full flex flex-col gap-4 text-left group cursor-pointer">
  {/* Large Image Bounding Box */}
  <div className="w-full aspect-[4/3] overflow-hidden rounded-lg bg-stone-100 shadow-[0_2px_8px_rgba(0,0,0,0.04)] ring-1 ring-stone-900/5">
    <img 
      src="/project.jpg" 
      className="w-full h-full object-cover transition-transform duration-700 ease-out group-hover:scale-[1.03]" 
    />
  </div>
  
  {/* Project Metadata & Typography */}
  <div className="flex flex-col gap-1">
    <h2 className="text-base font-medium text-stone-800 font-grotesk group-hover:text-stone-500 transition-colors">
      Project Nomenclature
    </h2>
    <p className="text-sm text-stone-500 font-sans">
      A short description detailing the specific problem and the editorial approach used to solve it.
    </p>
  </div>
</article>

```

### Capsule CTAs

Understated, highly rounded buttons that act as primary actions. Usually paired horizontally under the intro.

```tsx
// Primary Black Capsule
"inline-flex items-center justify-center px-6 py-2.5 rounded-full bg-stone-900 text-stone-50 text-sm font-medium hover:bg-stone-800 transition-transform active:scale-95"

// Secondary Outline Capsule
"inline-flex items-center justify-center px-6 py-2.5 rounded-full bg-transparent border border-stone-200 text-stone-800 text-sm font-medium hover:bg-stone-50 transition-transform active:scale-95"

```

### Section Bands

For grouping lists of experiences, writing, or archival projects outside the main visual ledger.

```tsx
// Full-bleed band with contained content
<section className="w-full bg-stone-100 py-16">
  <div className="mx-auto max-w-xl px-5">
    {/* Archival links or writing */}
  </div>
</section>

```

---

## Quality Checklist

* [ ] Is the page layout strictly a centered vertical ledger (no sidebars, no multi-column grids)?
* [ ] Does the background use a warm chalk-white (`stone-50`) instead of harsh `#FFFFFF`?
* [ ] Are all headlines set in a Grotesk typeface, and is body copy set in a highly legible Sans?
* [ ] Are the project images large, restrained by an aspect ratio, and completely devoid of heavy decorative drop shadows?
* [ ] Are the primary call-to-actions styled as minimal black or stone-gray capsules?
* [ ] Is the UI completely free of saturated colors (no bright blues, greens, or reds)?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Warm whites, stone grays, and graphite text.
* Large, expansive photography that serves as the only source of color.
* Fine, 1px horizontal dividers (`border-stone-200`).
* Circular, high-resolution avatars.
* Pill-shaped (capsule) buttons for CTAs.
* Single-column vertical scrolling layouts.

### ✗ Not Allowed

* Horizontal project carousels or masonry grids.
* System colors for states (no green "success" tags).
* Card containers with heavy borders or distinct background colors separating them from the canvas.
* Drop shadows larger than an ultra-subtle 8px blur at 4% opacity.
* More than two typeface families.
* Decorative geometric background shapes or abstract gradient meshes.