Chalk White Device Blocks

/chalkWhiteDeviceBlocks
A clean, modular system for device-focused landing pages. Alternates chalk-white and gray, bold device mockups, and Manrope/DM Sans typography for high conversion and clarity—strictly no gradients or saturated accents, always centered and approachable.
0 likes
0 bookmarks
Jun 16, 2026
Design System Content
# Chalk White Device Blocks Design System

A design language for clean, highly reusable, and modular device-led landing pages.

---

## Philosophy

> "Clarity through rhythm; impact through structure."

This system is engineered for conversion-focused landing pages that feel modern, approachable, and highly dependable. It relies on a predictable modular rhythm, crisp solid colors, and striking device mockups to tell a story. The aesthetic avoids decorative clutter, relying instead on generous gutters and confident typography to guide the user seamlessly from the hero to the final call-to-action.

### Core Beliefs

1. **Rhythm over decoration** — Alternating sections of chalk-white and soft gray create a dependable scrolling cadence. Generous gutters provide immense breathing room.
2. **Solid foundations** — Backgrounds are strictly solid. We completely reject gradients in favor of flat, unwavering color fills to keep the focus on the device mockups and typography.
3. **Typography dictates personality** — *Manrope* provides geometric, confident structure to headings, while *DM Sans* ensures warm, frictionless readability in paragraph blocks.
4. **Device-led visual anchors** — Modular phone mockups serve as the primary visual storytelling mechanism, placed deliberately against stark, solid backgrounds.
5. **Charcoal contrast** — Instead of vibrant, saturated primary colors, deep dark charcoal drives user action, ensuring the interface remains polished and mature.

### Strict Rules

* **No Gradients** — Absolutely zero gradient treatments on backgrounds, text, or buttons. All fills must be 100% solid.
* **No Heavy Shadows** — Use low-contrast micro-borders and soft off-white surface layers to define separation, never heavy drop shadows.
* **Centered, Direct Heroes** — The top of the funnel must remain uniform: minimal navbar, stacked text, charcoal CTA pair, and a large centered device mockup.
* **Line Icons Only** — Feature grids must use ultra-simple, unembellished line icons. No multi-color or 3D illustrative icons.

---

## Color Palette

### The Chalk & Charcoal Scale

The palette eschews bright accents for a high-contrast, editorial feel. Chalk whites and soft grays form the architecture, while deep charcoal commands interactive focus.

```css
/* Core Backgrounds */
bg-[#FFFFFF]          /* Pure chalk-white; primary surface */
bg-neutral-50         /* Soft gray sectioning; alternating bands */
bg-neutral-100        /* Off-white feature blocks and rounded containers */

/* Structural Borders */
border-neutral-100    /* Low-contrast feature grid borders */
border-neutral-200    /* Thin FAQ dividers and standard component outlines */
border-neutral-300    /* Hover state boundaries */

/* Interactive & CTA (The Charcoal Pair) */
bg-neutral-900        /* Primary CTA dark charcoal fill */
hover:bg-neutral-800  /* Primary CTA hover state */
bg-white              /* Secondary CTA paired fill */
border-neutral-900    /* Secondary CTA paired border */
bg-neutral-950        /* Final dark CTA band background at page bottom */

/* Text Hierarchy */
text-neutral-950      /* Confident hero headings, primary titles */
text-neutral-700      /* Friendly body paragraphs, feature descriptions */
text-neutral-500      /* Muted metadata, minimal navbar links, placeholders */
text-white            /* Inverse text for Primary CTAs and the final dark band */

```

---

## Typography

A dual-font system balancing structural authority with approachable readability. 

### Font Families

* **Primary (Headings):** `font-manrope` — Geometric, confident, precise.
* **Secondary (Body):** `font-dmsans` — Friendly, open, highly readable.

### Font Weights

```css
font-normal      /* DM Sans: Default paragraph blocks, FAQ answers */
font-medium      /* DM Sans: Buttons, navbar links, subtle UI text */
font-semibold    /* Manrope: Feature grid titles, accordion triggers */
font-extrabold   /* Manrope: Confident hero headings */
```

### Font Size Scale

```css
text-sm          /* Minimal navbar items, footer links (14px) */
text-base        /* Standard friendly paragraphs, accordion content (16px) */
text-lg          /* Feature grid descriptions (18px) */
text-xl          /* Feature titles, FAQ questions (20px) */
text-3xl         /* Standard section headlines */
text-4xl         /* The primary hero heading anchor (responsive, scales up securely) */
```

### Hierarchy Examples

| Element | Font Family | Size | Weight | Color | Tracking |
| --- | --- | --- | --- | --- | --- |
| Hero Headline | Manrope | 4xl | extrabold | neutral-950 | tight |
| Section Title | Manrope | 3xl | extrabold | neutral-950 | normal |
| Feature Title | Manrope | xl | semibold | neutral-950 | normal |
| Body Paragraph | DM Sans | base | normal | neutral-700 | normal |
| CTA Button | DM Sans | base | medium | white/neutral-900 | normal |

---

## Animation System

### Core Philosophy: The Subtle Reveal

Motion should feel lightweight, polished, and strictly vertical. Elements ease into place without demanding undue attention.

### Section Fade-Up Motion

Used as the user scrolls into alternating feature sections and FAQs.

```tsx
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, margin: "-50px" }}
transition={{ duration: 0.5, ease: [0.22, 1, 0.36, 1] }}
```

### FAQ Accordion Expansion

A smooth, constraint-based opening mechanism that feels polished and definitive.

```tsx
initial={false}
animate={{ height: isOpen ? "auto" : 0, opacity: isOpen ? 1 : 0 }}
transition={{ duration: 0.3, ease: "easeInOut" }}
className="overflow-hidden"
```

---

## Layout & Rhythm Architecture

### Generous Gutters

Every major section must breathe.

```css
/* Standard Section Padding */
"py-24 px-6 md:px-12 lg:px-24 max-w-7xl mx-auto"
```

### The Centered Hero Container

The top of the funnel relies on strict central alignment.

```tsx
<section className="bg-neutral-50 pt-24 pb-0 flex flex-col items-center text-center overflow-hidden">
  <NavBar className="mb-16" />
  <h1 className="font-manrope text-4xl font-extrabold text-neutral-950 max-w-3xl">...</h1>
  <p className="font-dmsans text-lg text-neutral-700 mt-6 max-w-2xl">...</p>
  <div className="flex gap-4 mt-8">
    <PrimaryCTA />
    <SecondaryCTA />
  </div>
  {/* Solid background behind device, no gradients */}
  <div className="mt-16 bg-neutral-200 w-full flex justify-center pt-12 rounded-t-3xl border-t border-neutral-300">
    <DeviceMockup />
  </div>
</section>
```

### Alternating Block Rhythm

Sections immediately following the hero should strictly alternate backgrounds to naturally divide information.

```tsx
<Section className="bg-white" />
<Section className="bg-neutral-50" />
<Section className="bg-white" />
```

---

## Component Catalog

### Buttons (The Charcoal Pair)

Placed side-by-side in heroes and prominent feature blocks.

```tsx
// Primary CTA
"font-dmsans font-medium text-base bg-neutral-900 text-white px-6 py-3 rounded-full hover:bg-neutral-800 transition-colors"

// Secondary CTA
"font-dmsans font-medium text-base bg-white text-neutral-900 border border-neutral-200 px-6 py-3 rounded-full hover:border-neutral-900 hover:bg-neutral-50 transition-colors"
```

### Feature Grids

Rounded off-white blocks with low-contrast borders and simple line icons.

```tsx
<div className="bg-neutral-100 border border-neutral-200 rounded-2xl p-8 flex flex-col gap-4">
  <LineIcon className="w-6 h-6 text-neutral-900 stroke-[1.5px]" />
  <h3 className="font-manrope text-xl font-semibold text-neutral-950">...</h3>
  <p className="font-dmsans text-base text-neutral-700">...</p>
</div>
```

### FAQ Accordion Rows

Lightweight, stacked rows separated by ultra-thin dividers.

```tsx
<div className="border-b border-neutral-200 py-6 group cursor-pointer">
  <div className="flex justify-between items-center">
    <h4 className="font-manrope text-xl font-semibold text-neutral-950 group-hover:text-neutral-700 transition-colors">...</h4>
    <ChevronIcon className="w-5 h-5 text-neutral-400 group-hover:text-neutral-900 transition-transform" />
  </div>
  <div className="font-dmsans text-base text-neutral-700 mt-4 overflow-hidden">
    {/* Animated content */}
  </div>
</div>
```

### Final Dark CTA Band

The definitive end of the page, acting as the ultimate anchor.

```tsx
<section className="bg-neutral-950 py-24 px-6 flex flex-col items-center text-center rounded-t-3xl">
  <h2 className="font-manrope text-4xl font-extrabold text-white mb-6">...</h2>
  <PrimaryCTA className="bg-white text-neutral-950 hover:bg-neutral-100" />
</section>
```

---

## Quality Checklist

* [ ] Is the hero completely centered, featuring a `text-4xl` Manrope heading and a dark charcoal CTA pair?
* [ ] Does the hero device mockup sit on a 100% solid background with zero gradient application?
* [ ] Are all headings using **Manrope** and all paragraphs using **DM Sans**?
* [ ] Did you alternate section backgrounds strictly between chalk-white (`#FFFFFF`) and soft gray (`bg-neutral-50`)?
* [ ] Do the feature grids use rounded, off-white (`bg-neutral-100`) blocks with low-contrast borders?
* [ ] Are all icons simple, monochromatic line vectors?
* [ ] Do the FAQs use thin dividers with a subtle fade-up entrance motion?
* [ ] Does the landing page terminate with the final dark CTA band?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Chalk-white, soft off-white, and pale gray section backgrounds.
* Dark charcoal for primary actions, buttons, and confident typography.
* Flat, solid background color treatments behind modular phone mockups.
* Symmetrical, centrally aligned top-of-funnel hero configurations.
* Subtle Y-axis fade-up motions for scroll-triggered section entries.

### ✗ Not Allowed

* Gradients of any kind (radial, linear, or mesh) on backgrounds, text, or buttons.
* Saturated accent colors (no bright blues, greens, or reds) outside of the core grayscale/charcoal spectrum.
* Left-aligned hero layouts (the hero must remain firmly centered).
* Heavy drop shadows on feature blocks or device mockups.
* Filled, multi-colored, or 3D icons in the feature grids.