Limely

Overview

Limely is a conversion-focused ecommerce agency that transforms ambitious brands through technical excellence and bold visual storytelling. The design system embodies "Technical Optimism"—a movement that combines precision engineering with energetic, forward-thinking aesthetics. The brand serves UK-based enterprises seeking Magento, Hyvä, and Shopify Plus expertise, and the UI evokes confidence, velocity, and results-driven pragmatism. Every interaction reinforces the promise: conversion-driven, not just beautiful.

The voice is direct, knowledgeable, and slightly irreverent—never corporate-speak, never breathless hype. Limely speaks in active verbs and concrete outcomes. Example sentence: "We built a Shopify Plus store that increased AOV by 34% in six months—here's how." The brand personality balances technical credibility with approachable warmth, positioning the agency as expert peers rather than distant consultants.

Colors

The color system centers on a vibrant lime-green primary (#a7c838) paired with a bold lime-yellow accent (#d6d822), creating a high-contrast, energetic palette that signals innovation and conversion focus. Primary (#a7c838) is deployed on all call-to-action buttons, interactive states, and brand-critical UI elements—it's the color users click. Secondary (#fcbb00, a warm amber) supports highlights, badges, and secondary actions, while tertiary (#fb2c36, a vivid red) reserves for error states and critical alerts. The navy background (#1a1e2a) and off-white surface (#edf1f2) provide neutral anchors, with the navy-dark (#171a26) used for hero sections and high-contrast overlays. Surface stack follows Material 3 convention: surface-container-lowest (#f9fafb) for subtle backgrounds, surface-cont

Typography

The type system uses DM Sans exclusively, a geometric sans-serif that balances technical precision with friendly approachability. Display (60px, weight 500, -0.025em tracking) anchors hero sections and major announcements; headline-lg (40px, weight 500) breaks sections; headline-md (28px, weight 500) introduces subsections; title-lg (20px, weight 600) labels cards and components. Body-lg (18px, weight 400, 28px line-height) is used for long-form content and ensures 1.55 line-height ratio for readability on light backgrounds. Body-md (16px, weight 400) is the default paragraph text. Label-md (14px, weight 600, 0.01em tracking) is applied to button text, form labels, and UI microcopy; label-sm (12px, weight 500, 0.02em tracking) is reserved for badges, helper text, and footnotes. All headlin

Layout

The layout grid is a 12-column fluid system with a max-width of 1280px (container-max), centered with auto margins. Gutter spacing is 24px (md) on desktop, reducing to 12px (sm) on tablets and 8px (unit) on mobile. Section separation uses lg spacing (40px) vertically; internal card padding uses md spacing (24px). The design favors generous white space—never fill the viewport edge-to-edge. Hero sections span full-width with a 40px top/bottom padding buffer. Cards and containers use surface-container backgrounds with 1px outline-variant borders and md elevation shadows (0 4px 12px rgba(0, 0, 0, 0.08)). Responsive breakpoints follow Tailwind conventions: sm (640px), md (768px), lg (1024px), xl (1280px). The spacing scale is semantic: xs (4px) for micro-interactions, sm (12px) for component in

Elevation & Depth

Depth is conveyed through a three-tier shadow system and subtle background color shifts, avoiding glassmorphism in favor of clean, readable layering. Level 1 (Base): surface-container (#edf1f2) with no shadow, used for standard cards and containers. Level 2 (Elevated): surface-container-high (#e5e7eb) with md elevation shadow (0 4px 12px rgba(0, 0, 0, 0.08)), applied to hovered cards, modals, and floating elements. Level 3 (Modal/Overlay): surface-bright (#ffffff) with lg elevation shadow (0 8px 32px rgba(0, 0, 0, 0.12)), used for dialogs and top-layer components. Buttons use sm elevation (0 1

Shapes

The shape philosophy is "Technical Roundness"—a balance between approachable curves and geometric precision. Buttons and primary CTAs use full radius (9999px, pill-shaped) to signal action and friendliness; this is the most distinctive shape in the system. Cards and containers use xl radius (1.5rem / 24px) for a modern, soft-edged aesthetic without feeling organic. Input fields and secondary UI elements use DEFAULT radius (0.5rem / 8px) for a more technical, grid-aligned feel. Badges and small components use full radius (9999px) for visual consistency with buttons. The rationale: pill-shaped b

Components

Action Elements Buttons are the primary interaction mechanism and must always use the full-radius pill shape (9999px). Primary buttons (#a7c838 background, navy text, label-md typography, 48px height, 12px 24px padding) are deployed on all conversion-critical CTAs: "Start Your Project", "Get Started", "Contact". On hover, upgrade to primary-fixed-dim (#a7c838 with 10% opacity reduction) and increase box-shadow to 0 6px 16px rgba(0, 0, 0, 0.2) with a 150ms ease-out transition. Secondary buttons use transparent background with 1px outline-variant border, navy text, and the same 48px height; on hover, fill with surface-container-high (#e5e7eb). Ghost buttons (no border, transparent background) are used for tertiary actions; on hover, add surface-container-high background. All button text

Do's and Don'ts

**Do**

• Do use primary (#a7c838) exclusively for conversion-critical CTAs—buttons, links, and active states. Never dilute the signal by overusing it.
• Do maintain 1.55+ line-height on body text (28px line-height for 18px font) to ensure readability on light backgrounds; increase to 1.75 on dark backgrounds.
• Do apply full radius (9999px) to all primary buttons and pill-shaped elements; use 24px radius for cards and 8px for inputs to create a clear visual hierarchy.
• Do pair shadow elevation with background color shifts—never use shadows in isolation. Hover states should upgrade both shadow and background color simultaneously.
• Do use DM Sans weight 500 for all headlines and weight 600 for labels; never mix weights within a single component type.

**Don't**

• Don't use secondary colors (#fcbb00, #fb2c36) on primary CTAs—reserve them for badges, alerts, and secondary actions only.
• Don't apply transparency or glassmorphism effects; the system prioritizes clarity and technical precision through solid colors and clean shadows.
• Don't use border-radius values outside the defined scale (sm, DEFAULT, md, lg, xl, full). Custom radii break the grid alignment and weaken the technical aesthetic.
• Don't set line-height below 1.5 on body text or below 1.25 on headlines; tight leading reduces readability and contradicts the approachable brand voice.
• Don't mix DM Sans with system fonts or fallbacks in component definitions; always specify DM Sans as the primary fontFamily with a generic sans-serif fallback only.