Skip to content
DesignMunkDesignMunk Submit a site

YouMind

youmind.com
Turn the ideas inside you into something real.
AI Software Next.js Tailwind Homepage Inter Libre Baskerville
Share Visit site
youmind.com DESKTOP · 1440
YouMind

AI Breakdown

Design export

---
version: alpha
name: YouMind
description: Turn the ideas inside you into something real.
colors:
  primary: "#000000"
  secondary: "#848484"
  neutral: "#ffffff"
  border: "#1f1f1f"
  brand-clouded-vision: "#d1d1d1"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Libre Baskerville
    fontSize: 72px
    fontWeight: 500
    lineHeight: 1.22
  headline-md:
    fontFamily: Inter
    fontSize: 49px
    fontWeight: 500
    lineHeight: 1.2
  headline-sm:
    fontFamily: Libre Baskerville
    fontSize: 34px
    fontWeight: 400
    lineHeight: 1.06
  headline-xs:
    fontFamily: Inter
    fontSize: 23px
    fontWeight: 400
    lineHeight: 1.22
  body-md:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  sm: 12px
  md: 40px
  full: 9999px
spacing:
  xs: 8px
  sm: 16px
  md: 28px
  lg: 80px
  xl: 140px
components:
  button-primary:
    backgroundColor: "{colors.border}"
    textColor: "{colors.neutral}"
    rounded: "{rounded.full}"
    padding: 22px 30px
    height: 60px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: 22px 30px
    height: 60px
  button-link:
    textColor: "#0078e8"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.border}"
    rounded: "{rounded.sm}"
    padding: 16px 20px 20px
---

# YouMind: Baskerville Headlines and a Floating Pill Search

## Overview

Taste-forward, minimal, and instructional. Black on white with sparse color lets examples lead. Inter keeps copy efficient while Libre Baskerville adds character to key headlines. Spacing is generous and sections feel airy rather than dense. Default to clarity and restraint when a case isn't tokenized: few colors, high contrast, and calm motion.

## Colors

- **primary (#000000):** Core ink for headings, primary text, and high-contrast UI.
- **secondary (#848484):** Muted copy—helper text, notes, and quiet metadata.
- **neutral (#ffffff):** Paper-white canvas for pages and cards.
- **border (#1f1f1f):** Near-black used for strong outlines and as the dark fill for primary controls.
- **brand-clouded-vision (#d1d1d1):** Fog-grey separators, subtle dividers, and inactive tab/track states.
- **surface ({colors.neutral} → #ffffff):** Default card and control backgrounds.
- **on-surface ({colors.primary} → #000000):** Preferred text color on surfaces.

## Typography

- Headline LG — Libre Baskerville 72px/1.22, weight 500. Freely available via Google Fonts. Substitutes: none required in this system; if unavailable, fall back to the generic serif stack.
- Headline MD — Inter 49px/1.2, weight 500. Freely available via Google Fonts. Substitutes: Roboto (similar x-height) or Noto Sans SC for CJK locales.
- Headline SM — Libre Baskerville 34px/1.06, weight 400. Use for section intros and sub-heroes.
- Headline XS — Inter 23px/1.22, weight 400. Use for card titles and compact section headers.
- Body MD — Inter 16px/1.5, weight 400. Default for paragraphs, captions, tabs, and buttons. Locale coverage: Noto Sans SC is available for Simplified Chinese text; Roboto is an acceptable sans fallback where Inter isn't loaded.

## Layout

Spacing scale is compact to generous: 8, 16, 28, 80, 140. Use 80px as the default vertical section gap and 140px for major breaks (hero to content, or before footers). Horizontal gutters land at 16–28px depending on density; cards and tiles prefer 28px. Center the hero stack; subsequent sections use a responsive grid (12 columns at desktop, collapsing to 2–1 for cards). Keep copy widths moderate; headlines can span, but body should sit around 60–70ch.

## Elevation & Depth

Depth is mostly flat. A single soft shadow is available: rgba(2, 4, 26, 0.16) 0 4px 20px on floating controls like the hero composer or dropdowns. Larger shadows are none. Hierarchy otherwise relies on contrast (#000 on #fff), weight changes, and whitespace. Use Fog Grey (#d1d1d1) dividers for quiet separation without adding more elevation.

## Shapes

Three radii define tone: 12px for cards and media tiles (approachable but crisp), 40px for secondary buttons and pill containers, and 9999px for fully rounded primary CTAs. Pair radii with minimal borders; avoid mixing square and pill shapes within one cluster.

## Components

Buttons and card are the base primitives:
- Button — Primary: #1f1f1f background, #ffffff text, 60px height, 22px×30px padding, full (9999px) radius. Secondary: #000000 text on surface, 60px height, 22px×30px padding, 40px radius. Link: #0078e8 text, no radius.
- Card — #ffffff background, #1f1f1f text, 12px radius, 16px 20px 20px padding. Use for tiles and example works.

Distinctive patterns on this page:

### Hero Headline Block
- H1 uses Libre Baskerville 72px/1.22 with Inter 16px supporting line. Centered stack with lg (80px) vertical breathing room.

### Hero Composer (Search/Start)
- Surface container on #ffffff with 40px radius and the sm shadow (rgba(2, 4, 26, 0.16) 0 4px 20px). Internal spacing at md (28px). Right-aligned Start uses Button Primary (60px) inside.

### Category Tabs
- Horizontal list: For you, Research, Write, etc. Inter 16px. Pills at 40px radius; inactive text in #848484; active in #000000 with a subtle #d1d1d1 underline or chip.

### Inspiration Grid
- 5-up row of Cards using the card primitive. Thumbnails inherit the 12px radius; titles in Inter 16px; gutters at md (28px).

### Platform Download Row
- Four columns (iOS, Android, macOS, Browser). Labels in Inter 16px with small icons. Actions use Button Secondary (40px radius) to keep hierarchy below the hero CTA.

### Stats Band ("YouMind in numbers")
- Big numerals in Inter 49px/1.2 with labels in Inter 16px secondary (#848484). Use xl (140px) above and lg (80px) below to give the block air.

### Testimonial Stream
- Repeating quotes in Cards: 12px radius, #ffffff background, Inter 16px body. Names/roles can use Headline XS (Inter 23px) for emphasis.

## Do's and Don'ts

- Do keep copy in Inter 16px/1.5 and reserve Libre Baskerville for headlines only.
- Do use #1f1f1f as the fill for the main CTA and other high-commitment actions.
- Do separate dense areas with #d1d1d1 dividers instead of heavier borders or shadows.
- Don't add new colors; if a link needs emphasis, use #0078e8.
- Don't mix square and pill buttons in the same control group; use 40px or 9999px consistently.
- Don't apply larger shadows; only the sm shadow is supported for lift.

## Agent Prompt Guide

Quick color reference — Text: #000000; Background: #ffffff; Border/Action ink: #1f1f1f; Accent link: #0078e8; Muted: #848484; Divider: #d1d1d1.

1) Build the hero
- Set page background #ffffff. Add centered H1: Libre Baskerville, 72px, weight 500, line-height 1.22, color #000000. Add supporting line below in Inter, 16px/1.5, color #848484. Place a composer pill: container #ffffff, radius 40px, shadow rgba(2, 4, 26, 0.16) 0 4px 20px, internal padding 28px. Inside, right-align a primary button 60px tall, 22×30px padding, radius 9999px, background #1f1f1f, text #ffffff.

2) Category tabs + grid
- Row of tabs in Inter 16px. Inactive color #848484; active #000000 with a #d1d1d1 underline. Below, render a 5-column card grid (12px radius, padding 16px 20px 20px, background #ffffff, text #1f1f1f). Gutters: 28px.

3) Platform download row
- Four equal columns. Each shows platform icon + label in Inter 16px #000000. Actions use Secondary Button: 60px height, 22×30px padding, radius 40px, text #000000 on #ffffff.

4) Stats band
- Section padding: top 140px, bottom 80px. For each stat, number in Inter 49px/1.2 #000000, label in Inter 16px/1.5 #848484. Even spacing with 28px gutters.

5) Testimonial stream
- Stack Cards (12px radius, #ffffff background, 16px 20px 20px padding). Name in Inter 23px/1.22 #000000; quote in Inter 16px/1.5 #000000; optional metadata in #848484.

## Similar Brands

- Notion — similar monochrome palette and quiet UI; YouMind diverges with a serif display and pill composer up front.
- Perplexity — high-contrast black/white and pill controls; this page is calmer, with fewer blues and more editorial type.
- Gamma — minimal canvas with card-driven examples; YouMind is less neon and relies on Baskerville for character.
- Readwise Reader — content-first and typographic; YouMind is more promotional, with a hero composer and download row.

More like this

Browse AI →
thelevel.ai
Level AI About AI
Level AI About
A minimalist hero uses extreme whitespace, centering attention on a large, high-contrast headline with an orange eyebrow tag for context. The top…
About · 27 minutes ago
every.to
Every AI
Every
Build Faster With AI
Blog · 27 minutes ago
strata.ws
Strata Productivity
Strata
The all-in-one real-time platform for your knowledge archive
Homepage · 2 hours ago
adapt.com
Adapt About AI
Adapt About
A minimal header with announcement bar and dual CTAs leads into a centered, punchy mission headline, followed by a friendly collage of…
About · 2 hours ago