MadeByShape

Overview

MadeByShape is an award-winning web design and branding agency based in Manchester, UK, founded in 2010. The brand embodies a "Contemporary Maximalism" aesthetic—bold, confident typography paired with vibrant lime-green accents (#d0ff71) against a clean white canvas. The visual language celebrates geometric precision and high contrast, creating an energetic yet professional presence that appeals to ambitious businesses seeking transformative digital experiences. The UI evokes clarity, confidence, and forward momentum through deliberate use of negative space and striking color moments.

The brand voice is direct, approachable, and human-centered. MadeByShape speaks with the confidence of seasoned practitioners who care deeply about relationships and outcomes. Vocabulary is conversational yet precise—avoiding jargon while respecting client intelligence. The tone balances professionalism with warmth, as seen in greetings like "Hiya, we're Shape 👋" and calls-to-action like the rotating eye emoji (👀) that invites curiosity. Example sentence in brand voice: "We've spent 14 years building digital experiences that don't just look good—they drive real business growth."

Colors

The color system is built on a high-contrast foundation: pure white (#ffffff) as the dominant surface, deep charcoal (#010202) for primary text, and a signature lime-green (#d0ff71, rgb(208, 255, 113)) as the primary accent. This lime-green is the brand's most distinctive token—used exclusively on primary CTAs ("Start a project"), interactive hover states, and moments requiring visual emphasis. It creates an immediate, energetic focal point against the neutral palette.

Secondary colors include a professional blue (#2563eb) for secondary actions and informational elements, and a near-black tertiary (#010202) for depth and contrast. The surface stack progresses from pure white (surface) through carefully calibrated grays (#f5f5f5, #e2e2e2, #b1b1b1) to support layering and elevation. Error s

Typography

The type system is anchored in Oldschool Grotesk, a geometric sans-serif that communicates contemporary confidence and precision. The typeface is used at a single weight (400 regular) for body copy and headlines, with occasional 500-weight for labels and emphasis—this restraint reinforces the brand's clarity-first philosophy. Display sizes (72px) are reserved for hero headlines with generous line-height (80px, 1.11x) to prevent visual crowding; body copy (16px) uses 24px line-height (1.5x) for comfortable reading. Letter-spacing is minimal (0 to -0.02em on large sizes) to maintain the geometric tightness that defines the aesthetic. Apply text-rendering: optimizeLegibility on all typography to ensure crisp rendering of Oldschool Grotesk's distinctive letterforms. On small labels over busy b

Layout

The layout system uses a 12-column grid with a maximum container width of 1280px, providing flexibility for both desktop and mobile experiences. The grid is fluid on mobile (full bleed with 24px gutters) and fixed at 1280px on desktop, ensuring content remains scannable and focused. White-space is treated as a design element—the lg spacing (40px) is used liberally between major sections to create breathing room and visual hierarchy. The gutter (24px) is consistent throughout, creating a predictable rhythm. Hero sections use full-width backgrounds with centered content containers, allowing the lime-green accent to extend edge-to-edge for maximum impact. Cards and content blocks use md spacing (24px) for internal padding, with lg spacing (40px) between sections. Mobile-first approach: start

Elevation & Depth

Depth is conveyed through subtle shadows and layering rather than dramatic effects. The elevation system uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for subtle depth on interactive elements like buttons, md (0 3px 8px rgba(0, 0, 0, 0.15)) for cards and modals, and lg (0 8px 24px rgba(0, 0, 0, 0.12)) for floating elements and sticky components. Shadows are soft and diffuse, never harsh or dark—they suggest depth without drawing attention. The sticky contact button (the rotating 👀 emoji) uses lg elevation to float above content. Hover states on cards transition from md to lg shadow (3

Shapes

The shape philosophy is "Geometric Precision with Approachable Warmth"—combining sharp, defined corners with selective rounding to balance professionalism and friendliness. Primary CTAs use full rounding (border-radius: 9999px) to create pill-shaped buttons that feel inviting and clickable; this is the most rounded element in the system, reserved for the highest-priority actions. Secondary buttons and cards use lg rounding (1rem / 16px) to soften edges while maintaining geometric clarity. Input fields use DEFAULT rounding (0.5rem / 8px) for a more structured, form-like appearance. List items a

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons use {colors.primary} (#d0ff71) background with {colors.on-primary} (#010202) text, rounded to 9999px, with 12px vertical and 24px horizontal padding for a 48px total height. On hover, the background transitions to {colors.primary-fixed-dim} (#b8e64d) over 200ms with ease-out timing, maintaining the lime-green family while signaling state change. Secondary buttons use {colors.surface-container-low} (#f5f5f5) background with a 1px border in {colors.outline-variant} (#999a9a), rounded to 1rem. Ghost buttons are transparent with {colors.on-surface} text, gaining a light background on hover. All buttons use {typography.label-md} (14px, 500-weight) for consistent labeling.

Containers & Surfaces Cards are the pr

Do's and Don'ts

**Do**

• Do use the lime-green primary (#d0ff71) sparingly and strategically—reserve it for CTAs, focus states, and moments requiring visual emphasis to maintain impact.
• Do maintain high contrast between text and background (minimum 4.5:1 WCAG AA compliance) by pairing {colors.on-surface} (#010202) on light surfaces and {colors.surface} (#ffffff) on dark surfaces.
• Do apply generous white-space (lg spacing: 40px) between major sections to create visual breathing room and guide user attention through the page hierarchy.
• Do use the full rounding (9999px) exclusively on primary CTAs and interactive elements; avoid over-rounding secondary components to preserve visual hierarchy.
• Do transition all interactive states over 200–300ms with cubic-bezier(0.4, 0, 0.2, 1) easing to create smooth, confident interactions that feel responsive without being jarring.

**Don't**

• Don't use the primary lime-green (#d0ff71) for body text, backgrounds, or non-interactive elements—it's reserved for high-priority interactions and will lose impact if overused.
• Don't apply shadows darker than {elevation.lg} (0 8px 24px rgba(0, 0, 0, 0.12)) or use harsh, high-spread shadows; the brand favors subtle depth that suggests layering without visual drama.
• Don't mix typefaces or weights excessively; Oldschool Grotesk at 400-weight is the default, with 500-weight reserved for labels and emphasis. Avoid serif fonts or decorative typefaces that conflict with the geometric aesthetic.
• Don't use border-radius: 0 (sharp corners) on interactive elements; the brand favors approachability, so even secondary components should have at least md rounding (0.75rem).
• Don't apply instant state changes (transition: none) on interactive elements; all hover, focus, and active states must transition smoothly over 200–300ms to maintain the confident, polished feel.