The 11 Design Decisions That Define How Your App Looks (No Designer Required)

You don't need a designer. You need 11 decisions.

A professional designer makes hundreds of micro-decisions during product design: every pixel, every shadow, every transition, every hover state. But most of those decisions flow from 11 macro-level choices about visual style. Make those 11 choices well, and your app looks intentional and cohesive. Leave them to chance, and everything looks generic.

Here are the 11 decisions that actually matter, what each one controls, and how to pick the right option for your product without any design experience.

Decision 1: Corner Style (Border Radius)

What it controls: How sharp or rounded your corners are. It's one of the first things users notice about your visual style.

Options:

• Sharp (0px): No rounding at all. Enterprise, corporate, technical. Think Bloomberg Terminal or Stripe's dashboard. Says: serious, powerful, precision-focused.
• Subtle (4px): Barely noticeable rounding. Still professional. Works for fintech, analytics tools, productivity apps. Says: modern and professional, not playful.
• Standard (8px): The Goldilocks zone. Not sharp, not childish. Works for most consumer apps. Feels balanced and approachable.
• Rounded (12px+): Noticeably rounded. Warm, friendly, approachable. Works for consumer apps, wellness, education, social. Says: friendly and human.
• Pill-shaped (50% / 9999px): Fully rounded. Only use for buttons, badges, and avatars. Rarely for card corners.

When to pick each:

• Sharp: You're building enterprise software, admin dashboards, or developer tools. Your audience expects precision. Round the corners and you look less serious.
• Subtle: You want modern without being cute. Financial apps, project management, productivity software.
• Standard: You have no strong opinion and want a safe default. Most consumer apps start here.
• Rounded: You're building for consumers who value warmth over precision. Fitness apps, mental health tools, dating apps, consumer finance.

CSS token: --radius-sm, --radius-md, --radius-lg

Decision time: 2 minutes.

Decision 2: Button Style

What it controls: How buttons look: filled, outlined, ghost, or soft-filled. This affects the visual hierarchy and how clear actions are.

Options:

• Filled (solid background): <Button variant="default">Click me</Button>. Classic button with full background color and white text. Strong visual presence. Says "click me."
• Outline (border only): <Button variant="outline">Click me</Button>. Border with transparent background. Lighter weight. Secondary actions or when you don't want to dominate the screen.
• Ghost (text only): <Button variant="ghost">Click me</Button>. No background, no border, just colored text that changes on hover. Minimal. Works for tertiary actions or crowded interfaces.
• Soft-fill: <Button variant="soft">Click me</Button>. Background with lower opacity. Fills space but doesn't demand attention. Middle ground between outline and filled.

When to pick each:

• Filled: Primary actions that need to stand out. Sign up, submit form, pay now. Users should see this immediately.
• Outline: Secondary actions next to a filled button. Cancel, back, explore more. Lower priority but still important.
• Ghost: Tertiary actions or less important options. Delete (careful with this), skip, dismiss. Or when the interface is already dense with buttons.
• Soft-fill: Actions that need presence but not dominance. Use when filled feels too aggressive but outline feels too subtle.

CSS tokens: Button components with variant prop

Decision time: 2 minutes.

Decision 3: Element Separation

What it controls: How you visually separate content areas: with borders, shadows, or background color differences.

Options:

• Border only: Cards have a thin border, no shadow, flat background. Clean, minimal, technical. Works for data-heavy interfaces.
• Shadow only: Cards have a shadow, no border, flat background. Adds depth without visual weight. Modern, smooth.
• Background color: Cards don't have a border or shadow, just a different background color. Works with clear color hierarchy.
• All three (border + shadow + color): Maximum separation. Everything reads as a distinct element. Can feel busy if overused.

When to pick each:

• Border: You're building something technical or data-heavy (dashboards, spreadsheets, developer tools). Users expect clarity over depth.
• Shadow: You want modern and smooth. Consumer apps, content-focused sites, anything where hierarchy matters more than data organization.
• Background: You have a clear color system and want minimal UI chrome. Works when your color palette does the work.
• All three: You want maximum visual hierarchy and clarity. Complex UIs with many layers. But use sparingly or it feels cluttered.

CSS tokens: --shadow-md, --radius-md, --color-border

Decision time: 2 minutes.

Decision 4: Spacing Density

What it controls: How much breathing room elements have. Compact, default, or spacious. Affects how many items fit on screen and how the interface feels.

Options:

• Compact: Small padding and gaps. More content per screen. Dense, efficient, technical. Use for: data tables, dashboards, admin tools, productivity where users need to see lots of items at once.
• Default: Balanced padding and gaps. Most user interfaces. Not cramped, not wasteful. Use for: most consumer apps, marketing sites, content-driven products.
• Spacious: Large padding and gaps. Less content per screen. Luxurious, expensive-feeling, focus-driven. Use for: premium products, storytelling, design-forward sites, anything trying to feel high-end.

When to pick each:

• Compact: Your users scan lots of data. They prefer density over breathing room. Engineers using databases, traders reading stock tickers, developers reading code.
• Default: You're unsure. This is the safe choice. Most apps use this and it works fine.
• Spacious: You're emphasizing quality over quantity. You want users to feel like they're using something premium. Or your content is visual and needs room.

CSS tokens: --spacing-xs, --spacing-sm, --spacing-md, --spacing-lg, --spacing-xl

Decision time: 2 minutes.

Decision 5: Shadow Style

What it controls: How shadows look: none, subtle, or dramatic. Affects depth perception and how modern the design feels.

Options:

• No shadow: Cards are flat. Sharp dividing lines with borders instead. Minimal, clean, technical.
• Subtle shadow: Small, soft shadow. Depth without drama. Modern standard. Works everywhere.
• Hard shadow: Large, dark shadow with sharp edges. Dramatic, high-contrast, retro or playful. Less common in modern design.
• Offset shadow: Shadow offset to one side. Unusual, design-forward, trendy. Use sparingly or it feels gimmicky.

When to pick each:

• No shadow: You're building something technical or minimal. Flat design, data-heavy interfaces. Stripe's older designs used no shadow.
• Subtle: You want modern, smooth, and sophisticated. This is the current standard. Almost every contemporary app uses subtle shadows.
• Hard shadow: You want contrast and boldness. Playful brands, high-contrast designs. Less common now but still valid for certain audiences.
• Offset: You want to stand out and make a statement. Use rarely and intentionally. It draws attention, which can be good or bad depending on context.

CSS token: --shadow-sm, --shadow-md, --shadow-lg

Decision time: 1 minute.

Decision 6: Color Temperature

What it controls: Whether your color palette feels warm or cool. Affects the emotional tone of your product.

Options:

• Cool (blues, purples, grays): Calm, professional, trustworthy. Tech companies love cool colors. Apple, Google, Stripe, Figma all use cool primary colors.
• Warm (oranges, reds, yellows): Energetic, friendly, approachable. Consumer apps use warm. Airbnb (orange), Slack (warm brand colors), many wellness apps.
• Neutral (grays, blacks, whites): Safe, minimal, lets content shine. No emotional temperature. Works when you don't want color to dominate.
• Mixed: Warm primary, cool secondary. Or vice versa. More complex but more interesting. Higher risk of clashing.

When to pick each:

• Cool: B2B products, fintech, developer tools, enterprise. Your users value trust and professionalism. Or you're competing with other cool-colored tech.
• Warm: Consumer apps, food/beverage, wellness, lifestyle. Your users value approachability and energy.
• Neutral: Design-forward products, content-heavy sites, platforms that host user-generated content. You want the content, not the UI, to be the hero.
• Mixed: You have enough design expertise to pull it off and enough unique positioning that it makes sense. Otherwise stick to one.

CSS tokens: --color-primary, --color-secondary, --color-accent

Decision time: 3 minutes. Think about your audience and competition.

Decision 7: Color Saturation

What it controls: Whether your colors are muted (desaturated) or vibrant (saturated). Affects professionalism and energy.

Options:

• Muted (low saturation): Desaturated, earthy colors. Professional, sophisticated, vintage, calm. Think Figma (muted purples) or Basecamp (muted oranges and greens).
• Standard (medium saturation): Most modern apps. Balanced. Not too corporate, not too trendy. Works everywhere.
• Vibrant (high saturation): Saturated, punchy colors. Energetic, modern, attention-grabbing. Trending in 2024-2026. Instagram, TikTok, modern design-forward startups.
• Greyscale (zero saturation): No color at all besides black and white. Minimal, technical, high contrast. Works for developer tools, technical docs, accessibility-focused designs.

When to pick each:

• Muted: You want to feel premium and calm. Or you're targeting older audiences. Or you want to differentiate from vibrant competitors.
• Standard: Safe default. Works for most products. Not trendy but not dated either.
• Vibrant: You want energy and modernity. Your audience is younger. You're competing with other vibrant designs. Or you need to stand out.
• Greyscale: You're building something technical and minimalist. Or you're accessibility-focused. Or you want zero emotional color interference.

CSS tokens: Color definitions in OKLCH format. Adjust chroma to control saturation.

Decision time: 2 minutes.

Decision 8: Font Personality

What it controls: Whether your font feels geometric/mechanical or rounded/human. One of the most noticeable design decisions.

Options:

• Geometric sans-serif (mechanical): Straight lines, consistent angles, mathematical. Examples: Inter, Instrument Sans, IBM Plex Sans. Says: modern, technical, precise. Developers love these.
• Humanist sans-serif (organic): Slightly irregular, warmer feel, slightly more character. Examples: Calibre, Benton Sans, Public Sans. Says: friendly and modern but still professional.
• Rounded sans-serif (playful): Rounded letterforms, approachable, youthful. Examples: DM Sans, Nunito, Quicksand. Says: approachable, friendly, consumer-focused.
• Serif (traditional): Old-school, literary, premium. Examples: Georgia, Garamond. Says: established, trustworthy, traditional. Most modern apps avoid serif for body text.
• Monospace (technical): Fixed-width font, clearly technical. Examples: Monaco, Fira Code. Use only for code, data, technical content. Never for body text unless building a dev tool.

When to pick each:

• Geometric: You're building tech products, developer tools, fintech, anything wanting to feel modern and precise. This is the current standard for tech.
• Humanist: You want friendly professionalism. Productivity apps, health tech, education. More personality than geometric, still professional.
• Rounded: Consumer apps, wellness, playful brands, anything targeting younger audiences. Says warm and approachable.
• Serif: You're positioning as established and premium. Luxury brands, news sites, traditional business. Rare for modern products.
• Monospace: You're building for developers or content is technical. Otherwise avoid.

CSS token: --font-family-sans

Decision time: 3 minutes. This shapes your entire vibe.

Decision 9: Font Weight Bias

What it controls: Whether you use regular weight (400) for most text or bold weight (600-700) for emphasis. Affects readability and visual hierarchy.

Options:

• Light (weight bias toward 300-400): Delicate, sophisticated, premium. Used by luxury brands. Less common now. Risk: can feel thin and hard to read.
• Regular (weight bias toward 400): Standard weight for body text. Readable, clean, neutral. Most apps use this.
• Medium bias (default 500 for body): Slightly heavier. More presence, easier to read. Common in modern design.
• Bold bias (default 600+ for body): Heavy text everywhere. Punchy, energetic, modern. Trendy. High risk of looking juvenile or hard to read.

When to pick each:

• Light: Premium luxury brands targeting design-forward audiences. Risk overfitting to aesthetic.
• Regular: Safe default. Always works. Standard approach.
• Medium: You want better readability and visual weight without bold. Modern approach, slightly trendier than regular.
• Bold: You want maximum impact and modernity. Bold is trending in design right now. But can backfire on dense text.

CSS tokens: --font-weight-normal (400), --font-weight-semibold (600), --font-weight-bold (700)

Decision time: 2 minutes.

Decision 10: Motion Speed

What it controls: How fast animations and transitions are. Snappy (100-200ms) or smooth (300-500ms). Affects perceived performance and vibe.

Options:

• Fast/snappy (100-150ms): Quick, responsive, feels performant. Used by technical products, trading platforms, anything wanting to feel responsive.
• Standard (200-300ms): Default. Smooth but snappy. Most contemporary apps.
• Slow/smooth (400-500ms+): Luxurious, premium, cinematic. Feels high-end. Used by design-forward products. Risk: can feel sluggish on slower devices.
• None (instant): No transitions, instant state changes. Technical products, accessibility-focused. Disorienting for most users but sometimes correct.

When to pick each:

• Fast: You're building something data-heavy, technical, or performance-sensitive. Your users want snappy response.
• Standard: Default choice. Smooth but responsive. Works everywhere.
• Slow: You're going for premium, luxury feel. Or your UI is narrative and cinematic. Be careful not to slow perception of actual performance.
• None: You're building for accessibility. Or you're building something ultra-minimal. Otherwise avoid.

CSS tokens: Tailwind duration-* utilities or custom CSS transitions.

Decision time: 1 minute.

Decision 11: Border Weight

What it controls: How thick borders are on elements like inputs, cards, and buttons. Affects visual weight and style.

Options:

• Hairline (1px): Thin, minimal, sophisticated. Clean look. Modern standard.
• Light (2px): Slightly more present. Balanced. Works for most UI.
• Medium (3px): Noticeable borders. More visual weight. Playful or bold designs.
• Heavy (4px+): Very noticeable borders. Bold, retro, design-forward. Use intentionally.

When to pick each:

• Hairline: Modern, minimal, sophisticated. Tech products, financial apps. Current standard.
• Light: Balanced. Works everywhere. Safe default if unsure.
• Medium: You want borders to be visible and structural. More playful products.
• Heavy: You want borders to be a design feature, not just functional dividers. Intentional, bold.

CSS token: Tailwind border utilities or custom CSS border properties.

Decision time: 1 minute.

How These 11 Decisions Interact

These 11 decisions don't exist in isolation. They work together to create your overall visual identity.

Example 1: Enterprise SaaS

• Sharp corners (0px, Decision 1)
• Filled buttons with outline secondaries (Decision 2)
• Border-only separation (Decision 3)
• Compact spacing (Decision 4)
• No shadows (Decision 5)
• Cool colors (Decision 6)
• Muted saturation (Decision 7)
• Geometric sans-serif (Decision 8)
• Regular weight (Decision 9)
• Snappy motion (Decision 10)
• Hairline borders (Decision 11)

Result: Professional, technical, trustworthy. Think Stripe, Figma, Linear.

Example 2: Consumer Wellness App

• Rounded corners (12px+, Decision 1)
• Soft-fill buttons (Decision 2)
• Shadow separation (Decision 3)
• Spacious spacing (Decision 4)
• Subtle shadows (Decision 5)
• Warm colors (Decision 6)
• Vibrant saturation (Decision 7)
• Rounded sans-serif (Decision 8)
• Medium weight bias (Decision 9)
• Smooth motion (Decision 10)
• Hairline borders (Decision 11)

Result: Friendly, approachable, premium. Think Headspace, Calm, modern Airbnb.

Example 3: Developer Tool

• Subtle rounding (4px, Decision 1)
• Filled buttons with ghost options (Decision 2)
• Border or shadow separation (Decision 3)
• Compact spacing (Decision 4)
• Subtle shadows (Decision 5)
• Cool colors (Decision 6)
• Vibrant saturation (Decision 7)
• Geometric sans-serif (Decision 8)
• Regular weight (Decision 9)
• Snappy motion (Decision 10)
• Hairline borders (Decision 11)

Result: Modern, technical, builder-focused. Think VS Code theme, GitHub, contemporary dev tools.

Presets: Named Combinations as Starting Points

Instead of making all 11 decisions individually, you can start with a preset that combines them coherently:

Clarity: Sharp, structured, enterprise. All 11 decisions tuned for clarity and technical precision. Best for: B2B, fintech, developer tools, admin dashboards.

Soft: Rounded, warm, friendly. All decisions tuned for approachability. Best for: consumer apps, wellness, social, lifestyle.

Glass: Translucent, modern, layered. Combines sharp corners with soft shadows and glass-morphism effects. Best for: contemporary design-forward products, trendy startups.

Brutal: Bold, angular, edgy. Heavy borders, saturated colors, sharp angles. Best for: experimental, design-forward, attention-grabbing products.

Each preset is a coherent starting point. Adjust individual decisions after choosing a preset if needed.

Frequently Asked Questions

Q: What design decisions do I need to make for my app?

A: Eleven decisions cover 95% of your app's visual identity: corner style (sharp to round), button style (filled, outline, ghost, soft-fill), element separation (border, shadow, or background), spacing density (compact, default, spacious), shadow style (none to hard-offset), color temperature (warm to cool), color saturation (muted to vibrant), font personality (geometric or rounded), font weight bias (regular to bold), motion speed (smooth or snappy), and border weight (hairline to medium). Make these 11 decisions, and your app looks intentional and cohesive.

Q: How do I choose the right font for my app without a designer?

A: Match font personality to your product's character. Geometric fonts (Instrument Sans, Inter, Plus Jakarta Sans) communicate modern precision, making them good for developer tools, fintech, and B2B products. Rounded fonts (DM Sans, Nunito, Quicksand) communicate warmth and approachability, fitting consumer apps, wellness, and education products. Pick one and commit.

Q: What's the fastest way to make these 11 decisions?

A: Use a preset as a starting point, then adjust. Matchkit offers four: Clarity (sharp, structured, enterprise), Soft (rounded, warm, friendly), Glass (translucent, modern, layered), and Brutal (bold, angular, edgy). Pick the closest match to your product's personality, then tweak individual decisions in the configurator. Total time: about 60 seconds.

Ready to stop overthinking design? Open Matchkit and use the visual configurator to make these 11 decisions visually. See changes in real-time. Download a complete design system with tokens and components ready for Claude Code and Cursor.

Once you've made your 11 design decisions, learn how to encode them so your AI coding tools actually follow them. Read "How to Build a Design System Your AI Coding Tool Actually Follows."