No preview available
Chalk Gray Mobile-First Classic

/chalkGrayMobile-firstClassic
A strictly achromatic, mobile-first design system with immaculate structure and clear hierarchy—ideal for landing pages focused on clarity, trust, and conversion. No gradients, blobs, or loud colors—just timeless, confident balance.
0 likes
0 bookmarks
Jun 16, 2026
Design System Content
# Chalk Gray Mobile-First Classic

A highly reusable, mobile-native design system for clean, conversion-focused landing pages.

---

## Philosophy

> "Restraint creates clarity; structure drives conversion."

This system relies on precise mobile-first hierarchy and immaculate spacing to build trust. It rejects the chaos of modern web trends—eschewing blobs, gradients, and loud colors in favor of a timeless, chalk-white canvas anchored by dark graphite elements. The design is linear, readable, and perfectly balanced, scaling up elegantly without ever resorting to dense desktop grids.

### Core Beliefs

1. **Mobile sets the rhythm** — Everything is designed for the phone first. Stacked layouts, centered alignments, and linear flows take precedence over complex multi-column grids.
2. **Graphite as gravity** — Deep, dark graphite acts as the anchor for the user's eye, driving all primary actions and drawing focus exactly where it belongs.
3. **Typographic confidence** — Headings are set in Inter or Helvetica with a confident semibold weight. We don't whisper; we state facts clearly and legibly.
4. **Structural isolation** — Lower sections use distinct, pale-gray rounded blocks with fine borders to organically separate information without heavy cognitive load.
5. **Glass and frost** — Depth is achieved through minimal frosted glass treatments (navbars and micro-labels) rather than muddy drop shadows.

### Strict Rules

* **No Gradients or Blobs** — Backgrounds and surfaces are strictly solid or frosted. No colorful amorphous shapes.
* **No Loud Colors** — The aesthetic relies exclusively on the interplay between chalk white, pale gray, and dark graphite.
* **No Dense Desktop Grids** — Layouts remain strictly centered and contained. Do not use 4-column or 5-column bento grids.
* **No Square Primary Buttons** — Primary calls to action must be fully rounded pills.
* **Hero Anchor Mandatory** — Every hero section must be anchored visually by a polished phone mockup directly beneath the centered text.

---

## Color Palette

### Chalk, Gray, and Graphite Scale

The palette is strictly achromatic, relying on subtle shifts in temperature from stark chalk-white down to a dense, near-black graphite. 

```css
/* Backgrounds (Lightest to Darkest) */
bg-white              /* Primary canvas, chalk-white hero surfaces (#ffffff) */
bg-zinc-50            /* Pale-gray blocks for lower sections (#fafafa) */
bg-zinc-100/70        /* Hover states for secondary interactive elements */
bg-zinc-100           /* Secondary device modules, alternating feature blocks */
bg-zinc-200           /* Fine borders, structural dividers */

/* Navigation & Overlays */
bg-white/70           /* Minimal glass navbar backdrop */
bg-zinc-50/50         /* Frosted micro-labels and floating utility badges */

/* Text Hierarchy */
text-zinc-900         /* Dark graphite: primary headings, hero text, CTAs (#18181b) */
text-zinc-600         /* Supporting copy, feature descriptions, FAQ answers */
text-zinc-400         /* Muted icons, micro-labels, subtle hints */

/* The Anchor: Dark Graphite */
bg-zinc-900           /* Primary pill CTAs, active toggles */
border-zinc-900       /* Focused states, selected structural elements */
hover:bg-zinc-800     /* Primary CTA hover state */

```

### Destructive Actions (If Required)

```css
hover:bg-red-50
text-red-600

```

---

## Typography

Typography relies strictly on **Inter** or **Helvetica**. The system uses a confident semibold weight to establish hierarchy, paired with centered, highly legible supporting text.

### Font Weights

```css
font-normal      /* Compact supporting copy, FAQ body, feature descriptions */
font-medium      /* Pill CTAs, secondary action items, frosted micro-labels */
font-semibold    /* Hero headlines (text-4xl), section headings, feature titles */

```

### Font Size Scale

```css
text-[11px]      /* Frosted micro-labels, floating utility tags */
text-xs          /* Fine print, footer links (12px) */
text-sm          /* Compact supporting copy on mobile, feature descriptions (14px) */
text-base        /* Standard FAQ answers, secondary button text (16px) */
text-lg          /* Pill CTA text, prominent feature bullet points (18px) */
text-xl          /* Sub-section headers, feature titles */
text-2xl         /* Main section headings in lower content blocks */
text-4xl         /* Mandatory Hero Headline (Centered, Semibold) */

```

### Letter Spacing & Transforms

```css
tracking-tight   /* text-2xl and text-4xl headings to bind words tightly */
tracking-normal  /* All body copy and supporting text */
tracking-wide    /* Frosted micro-labels */

uppercase        /* Exclusively for micro-labels above headings */

```

### Hierarchy Examples

| Element | Size | Weight | Color | Tracking | Alignment |
| --- | --- | --- | --- | --- | --- |
| Hero Headline | 4xl | semibold | zinc-900 | tight | center |
| Supporting Copy | sm/base | normal | zinc-600 | normal | center |
| Section Title | 2xl | semibold | zinc-900 | tight | center |
| CTA Button | base | medium | white | normal | center |
| Micro-label | [11px] | medium | zinc-600 | wide | center |

---

## Animation System

### Core Philosophy: Snappy and Grounded

Animations should feel mechanical and responsive. Nothing floats or drifts slowly. Elements slide into place with precision and disappear cleanly.

### Scroll Reveal (Lower Sections)

As the user scrolls down, pale-gray blocks and feature modules slide up slightly while fading in.

```tsx
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, margin: "-10%" }}
transition={{ duration: 0.4, ease: "easeOut" }}

```

### Interactive Feedback

Buttons and interactive modules scale down instantly to mimic physical compression.

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

```

---

## UI Components

### Minimal Glass Navbar

A razor-thin, frosted navigation bar that floats at the top, ensuring the chalk-white canvas is never visually interrupted by hard header lines.

```tsx
<nav className="fixed top-0 inset-x-0 h-14 backdrop-blur-md bg-white/70 border-b border-zinc-100 flex items-center justify-between px-4 z-50">
  {/* Logo and minimal links */}
</nav>

```

### Frosted Micro-Label

Used directly above the hero headline or section titles to establish context without visual weight.

```tsx
<span className="inline-flex items-center px-3 py-1 rounded-full bg-zinc-50/50 backdrop-blur-sm border border-zinc-200 text-[11px] font-medium uppercase tracking-wide text-zinc-600">
  System Architecture
</span>

```

### The Phone Mockup Anchor

The mandatory visual anchor placed directly underneath the centered hero text and CTA.

```tsx
<div className="relative mx-auto mt-12 max-w-[300px] rounded-[3rem] border-[8px] border-zinc-900 bg-zinc-100 shadow-xl overflow-hidden aspect-[9/19]">
  <img src="/app-interface.png" alt="App interface" className="w-full h-full object-cover" />
</div>

```

---

## Component Catalog

### Blocks & Containers

Lower sections are housed in rounded pale-gray blocks to differentiate from the chalk-white hero canvas.

```tsx
// Lower Section Block Container
"mx-auto max-w-3xl w-full bg-zinc-50 rounded-3xl border border-zinc-200 p-8 sm:p-12 mb-8"

// Alternating Feature-and-Device Module
"flex flex-col sm:flex-row items-center gap-8 py-10 border-b border-zinc-200 last:border-0"

```

### Calls to Action

Strictly dark graphite, fully rounded pills. No square edges.

```tsx
// Primary Pill CTA
"inline-flex items-center justify-center px-8 py-3.5 rounded-full bg-zinc-900 text-white font-medium text-base hover:bg-zinc-800 transition-colors"

// Secondary Action Pill
"inline-flex items-center justify-center px-8 py-3.5 rounded-full bg-white border border-zinc-200 text-zinc-900 font-medium text-base hover:bg-zinc-50 transition-colors"

```

### Simple Icon-Led Feature Grid

A highly contained, non-dense grid for lower sections. Stacked on mobile, 2-column max on desktop.

```tsx
<div className="grid grid-cols-1 sm:grid-cols-2 gap-8 mt-12">
  <div className="flex flex-col items-center sm:items-start text-center sm:text-left">
    <div className="h-10 w-10 rounded-full bg-zinc-100 flex items-center justify-center mb-4 text-zinc-900">
      <Icon name="zap" className="w-5 h-5" />
    </div>
    <h3 className="text-lg font-semibold text-zinc-900 mb-2">Instant Sync</h3>
    <p className="text-sm text-zinc-600 font-normal">Data reflects across all your devices the moment you press save.</p>
  </div>
</div>

```

### Refined FAQ Rows

Generously spaced, highly legible dropdown lists with fine borders.

```tsx
<details className="group border-b border-zinc-200 py-6 last:border-0 cursor-pointer">
  <summary className="flex items-center justify-between font-semibold text-lg text-zinc-900 outline-none">
    How does the syncing process work?
    <span className="text-zinc-400 group-open:rotate-45 transition-transform duration-200">+</span>
  </summary>
  <p className="mt-4 text-zinc-600 text-base font-normal leading-relaxed">
    {/* Answer content */}
  </p>
</details>

```

---

## Quality Checklist

* [ ] Is the hero heading strictly set to `text-4xl`, `font-semibold`, and perfectly centered?
* [ ] Is there a polished phone mockup sitting immediately below the hero text/CTA?
* [ ] Are all primary buttons styled as perfectly rounded dark graphite pills (`bg-zinc-900`, `rounded-full`)?
* [ ] Is the navigation bar using the minimal glass treatment (`bg-white/70`, `backdrop-blur-md`)?
* [ ] Are lower sections housed in pale-gray rounded blocks (`bg-zinc-50`, `rounded-3xl`)?
* [ ] Did you avoid using dense 3+ column desktop grids in favor of centered, linear flows?
* [ ] Are there absolutely zero gradients, blobs, or loud colored accents?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Chalk-white hero backgrounds seamlessly transitioning into pale-gray lower blocks.
* Fine, 1px structural borders (`border-zinc-200`).
* Confident semibold typography in Inter or Helvetica.
* Fully rounded pill buttons.
* Minimal frosted glass elements for floating UI.
* Generous vertical padding between sections (e.g., `py-24`).

### ✗ Not Allowed

* Gradients of any kind (no text gradients, no background gradients).
* Amorphous background blobs or decorative organic shapes.
* Vivid colors (blue, green, purple, etc.) used for buttons or backgrounds.
* Dense masonry or bento grids designed specifically for wide desktop monitors.
* Square or slightly-rounded (`rounded-md`) primary CTA buttons.
* Left-aligned hero sections (hero must be completely centered).