MCP.so

Overview

MCP.so is a marketplace platform designed to help developers discover, integrate, and manage AI tools, data sources, and automated workflows. The brand serves technical audiences—AI engineers, product builders, and integration specialists—who need clarity and speed when evaluating tools. The aesthetic is 'Accessible Minimalism': a light, airy interface with soft geometric accent shapes (circles and rounded rectangles in pale blues and purples) that evoke approachability without sacrificing professionalism. The design conveys trustworthiness through generous whitespace, clear typography hierarchy, and a restrained color palette anchored by a confident Google Blue primary (#1a73e8). Voice: direct, practical, and encouraging. Example: 'Browse featured integrations to connect your AI app in minutes.'

Colors

The color system balances clarity with visual warmth through a light-dominant palette and strategic accent use. Primary (#1a73e8, Google Blue) is reserved exclusively for interactive elements—call-to-action buttons ('Advertise', 'Submit'), links, and focus states—ensuring users always know where to click. Secondary (#4285f4, a lighter blue) and Tertiary (#38bdf8, sky blue) provide supporting accents for badges, highlights, and secondary actions without competing for attention. The surface stack progresses from pure white (#ffffff) at the base through subtle grays (surface-container-low #f3f3f3, surface-container #eeeeee) for layered depth, never exceeding 8% darkness to maintain the airy aesthetic. On-surface text is set to #1a1a1a (near-black, not pure black) to reduce eye strain on light

Typography

The type system uses Inter Variable as the primary typeface across all weights and sizes, ensuring consistent letterform quality and excellent screen rendering. Display (60px, 700 weight, -0.04em tracking) anchors hero sections and major headings with confident scale and negative letter-spacing to tighten the visual mass. Headline-lg (48px, 700 weight) is used for page titles like 'Discover useful MCP servers'; headline-md (32px, 600 weight) for section headers. Body-md (16px, 400 weight, 24px line-height) is the workhorse for card descriptions and UI copy, chosen for its 1.5 line-height ratio to ensure readability in dense layouts. Label-md (14px, 600 weight) is applied to button text and form labels, with 0.01em tracking to add subtle emphasis. Label-sm (12px, 500 weight) is reserved for

Layout

The page uses a 12-column fluid grid with a max-width of 1280px, centered on the viewport with symmetric gutters of 24px on desktop and 16px on tablet. Sections are separated by lg spacing (40px) vertically to create clear rhythm and breathing room; within sections, cards and list items use md spacing (24px) for grouping. The hero section occupies the full viewport height with a soft background gradient (light blue to lavender, using surface-container-highest as the base) and decorative geometric shapes (circles and rounded rectangles in pale blues at 60% opacity) positioned absolutely to create visual interest without distraction. The search bar (input-field) is centered in the header with a max-width of 400px, flanked by primary CTAs ('Advertise', 'Submit') at 40px height. Cards in the s

Elevation & Depth

Depth is conveyed through a subtle shadow system and layered surface colors rather than dramatic z-index stacking. Level 1 (Base): the body background is pure white (#ffffff) with no shadow; decorative shapes use 0% opacity to sit flat. Level 2 (Standard Card): cards use elevation.sm (0 1px 2px rgba(0, 0, 0, 0.06)) with a 1px solid border at {colors.outline} (#cccccc) to define edges without heaviness. Level 3 (Elevated/Hover): on hover, cards transition to elevation.md (0 4px 12px rgba(0, 0, 0, 0.1)) and background shifts to surface-bright (#fafafa), creating a subtle lift. Focus states on in

Shapes

The shape philosophy is 'Soft-Technical': rounded corners are used consistently but conservatively, balancing approachability with professional clarity. Buttons and inputs use lg radius (1rem / 16px) to feel friendly and clickable, with no sharp edges that might feel cold or corporate. Cards use md radius (0.75rem / 12px) to create visual distinction from buttons while maintaining the soft aesthetic. Badges and chips use full radius (9999px) to emphasize their compact, self-contained nature. The decorative geometric shapes in the hero (circles and rounded rectangles) use full radius for circle

Components

Action Elements Buttons are the primary interaction pattern. Button-primary uses {colors.primary} (#1a73e8) background with white text, 12px vertical / 24px horizontal padding, and lg radius (16px). On hover, the background darkens to #1557b0 and elevation.md shadow appears (0 4px 12px rgba(0, 0, 0, 0.1)), creating a tactile lift. On focus (keyboard navigation), a 3px inset box-shadow at rgba(26, 115, 232, 0.12) appears without moving the button. Button-secondary uses a transparent background with a 1px border at {colors.outline} and primary text color; on hover, the background fills with surface-container-low (#f3f3f3) and the border darkens to on-surface-variant (#5f5f5f). All button state transitions use 200ms ease timing. ### Containers & Surfaces Cards are the primary content cont

Do's and Don'ts

**Do**

• Do use primary (#1a73e8) exclusively for interactive elements—buttons, links, focus states—to create a clear visual hierarchy and guide user attention.
• Do maintain generous whitespace (lg spacing, 40px) between sections to create visual breathing room and reduce cognitive load.
• Do apply 200ms ease transitions to all interactive state changes (hover, focus, active) to provide tactile feedback and signal responsiveness.
• Do use the full rounded radius (9999px) only for decorative shapes and badges; use lg (16px) for buttons and md (12px) for cards to maintain visual distinction.
• Do apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) to small labels over busy backgrounds to ensure sufficient contrast and readability.

**Don't**

• Don't use colors outside the defined palette (primary, secondary, tertiary, status colors) for UI elements; the palette is intentionally constrained to maintain clarity.
• Don't apply shadows heavier than elevation.md (0 4px 12px rgba(0, 0, 0, 0.1)) to avoid creating visual clutter or suggesting false depth hierarchy.
• Don't use pure black (#000000) or pure white (#ffffff) for text on colored backgrounds; use on-primary, on-secondary, etc., to ensure sufficient contrast and accessibility.
• Don't mix rounded radii inconsistently—buttons should always use lg (16px), cards should use md (12px), and decorative shapes should use full (9999px).
• Don't animate state transitions faster than 200ms or slower than 400ms; slower transitions feel sluggish, faster transitions feel jarring and inaccessible to users with motion sensitivity.