Mindmup

Overview

Mindmup is a free, distraction-free online mind mapping platform built for clarity and speed. It serves knowledge workers, students, and teams who value productivity over complexity. The design aesthetic is "Minimalist Pragmatism"—a philosophy that strips away unnecessary ornamentation to reveal pure function. The interface evokes the feeling of writing on a blank napkin: immediate, uncluttered, and focused. Every visual element exists to support the act of thinking and organizing ideas, never to impress. The emotional response is one of calm focus: users feel they can think clearly without fighting the tool.

The brand voice is direct, honest, and slightly irreverent. Mindmup speaks in short, punchy sentences that avoid jargon. The vocabulary emphasizes speed, simplicity, and authenticity—words like "pure," "fast," "just," and "that's it" appear frequently. The tone is conversational but never casual; it respects the user's intelligence and time. Example: "Just pure, fast mind mapping. It's the closest thing to writing on a napkin – if that napkin didn't suck."

Colors

The color system is anchored in a sophisticated grayscale palette with a single accent in deep purple, creating a "monochromatic-with-accent" hierarchy. Primary (#2c2e33, rgb(44, 46, 51)) is a near-black charcoal used for all interactive elements—buttons, links, and active states. It commands attention without aggression. Secondary grays (#6f7682, #999fa8, #dfe1e5) create a five-tier surface stack for depth: surface (#ffffff), surface-container-low (#ecedef), surface-container (#e9ecef), surface-container-high (#dfe1e5), and surface-container-highest (#d3d5da). This gradient allows subtle visual separation between layers without harsh contrast. Tertiary purple (#7a54ea) is reserved for accent highlights, badges, and future brand moments—it appears sparingly to maintain focus. Error red (#e

Typography

The type system uses Inter exclusively, a geometric sans-serif that conveys both efficiency and approachability. Display (64px, 500 weight, -0.04em tracking) anchors hero sections with commanding presence; headline-lg (40px, 500 weight) structures major sections; headline-md (32px, 500 weight) breaks content into digestible chunks; body-lg (18px, 400 weight) and body-md (16px, 400 weight) carry narrative content with 24px line-height for comfortable reading. Label-md (14px, 500 weight) and label-sm (12px, 500 weight) handle UI labels and metadata. The weight hierarchy is restrained: only 400 (regular) and 500 (medium) are used, avoiding the visual noise of multiple weights. On small labels over busy backgrounds or within interactive states, apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.08)

Layout

The layout uses a 12-column grid with a max-width of 1392px, centered on the viewport. The spacing scale is semantic: xs (4px) for micro-adjustments, sm (8px) for component padding, md (12px) for form fields, lg (16px) for section gutters, xl (24px) for major section separation, and 2xl/3xl/4xl (32px/40px/64px) for hero and footer spacing. White-space is generous: the hero section uses py-18 (72px) on mobile, scaling to py-0 lg:pb-24 (96px) on desktop, creating breathing room around the headline. Container padding is 24px on mobile (px-6), scaling to 128px on desktop (px-32), which creates a natural frame for content. The grid is fluid on mobile (100vw), fixed at 1392px on desktop. Section separation uses lg spacing (16px) for minor breaks and 2xl spacing (32px) for major transitions. This

Elevation & Depth

Depth is conveyed through subtle shadows and surface color shifts, never through dramatic layering. The elevation system has three levels: sm (0 1px 2px rgba(0, 0, 0, 0.04)) for hover states and minor elevation, md (0 2px 6px rgba(0, 0, 0, 0.08)) for cards and modals, and lg (0 3px 8px rgba(0, 0, 0, 0.15)) for dropdowns and overlays. The surface stack provides the primary depth cue: base surface is #ffffff, container-low is #ecedef (2% darker), container is #e9ecef (4% darker), container-high is #dfe1e5 (6% darker). Interactive elements like buttons and cards shift to container-high on hover,

Shapes

The shape philosophy is "Soft-Technical"—rounded corners are present but restrained, reflecting the brand's balance between approachability and precision. Border-radius follows a scale: sm (4px) for small UI elements like checkboxes, DEFAULT (8px) for buttons and input fields, md (12px) for cards and containers, lg (16px) for larger cards and modals, xl (24px) for hero sections and feature blocks, and full (9999px) for badges and pill-shaped elements. The 8px default radius is the workhorse: it appears on all primary buttons ("Create a free map"), secondary buttons ("Explore features"), and in

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons (button-primary) use backgroundColor: {colors.primary} (#2c2e33), textColor: {colors.on-primary} (#ffffff), rounded: 8px, padding: 10px 12px, height: 40px, and typography: label-md (14px, 500 weight). On hover, shift to button-primary-hover with backgroundColor: {colors.primary-container} (#37393f) and maintain textColor. The transition is instant (no delay) to feel responsive. Secondary buttons (button-secondary) use transparent background with a 1px border at {colors.outline} (#999fa8), textColor: {colors.primary}, and the same rounded/padding/height. On hover, shift to surface-container-high (#dfe1e5) with borderColor: {colors.outline-variant} (#bbbec4). Both button variants use font-weight: 500 and letter-

Do's and Don'ts

**Do**

• Do use the primary color (#2c2e33) exclusively for CTAs, active states, and focus indicators—it's the only color users should click on.
• Do maintain generous white-space: use lg spacing (16px) for section gutters and xl spacing (24px) for major breaks to avoid visual clutter.
• Do apply the 8px border-radius consistently across buttons, inputs, and cards—it's the signature shape of the system.
• Do use Inter 500 weight for all labels and buttons; reserve 400 weight for body text to create clear hierarchy without visual noise.
• Do apply the lg shadow (0 3px 8px rgba(0, 0, 0, 0.15)) only to dropdowns and overlays; use sm shadow for hover states on cards.
• Do test all interactive elements at 14px label-md size with 40px height for comfortable touch targets on mobile (minimum 44px recommended, but 40px is acceptable with adequate padding).

**Don't**

• Don't use the tertiary purple (#7a54ea) for primary CTAs—it's reserved for accents and badges only; primary buttons must be #2c2e33.
• Don't apply border-radius larger than 16px (lg) to cards or containers; the brand avoids the 'bubbly' aesthetic of 24px+ radii.
• Don't mix font weights within a single line of body text; use 400 for content and 500 only for labels, headings, and emphasis.
• Don't add drop shadows to every element; use elevation sparingly—sm shadow for hover, md for cards, lg for overlays only.
• Don't reduce padding below 10px on buttons or below 12px on input fields; the brand prioritizes touch-friendly, spacious interactions.
• Don't use color to convey information alone; always pair color changes with text labels or icons (e.g., error red must include an error message, not just a red border).