Local Social Value

Overview

Local Social Value is a B2B consultancy brand that transforms abstract social value commitments into concrete, deliverable action plans. The brand serves procurement professionals, corporate leadership, and public sector organisations across Essex who need to move from commitment to execution. The aesthetic is 'Warm Professional Minimalism'—a deliberate departure from austere corporate design. The UI combines soft, warm neutrals (cream, sand, paper tones) with strategic pops of teal and coral, creating an approachable yet authoritative presence. The emotional response is one of clarity and partnership: users feel guided, not lectured; supported, not overwhelmed. The brand personality is conversational and grounded. Voice: direct, practical, confident without arrogance. Vocabulary favours concrete nouns ('plan', 'delivery', 'relationships') over abstract jargon. Example sentence: 'We've worked with 40+ Essex organisations—we know what actually works on the ground.'

Colors

The colour system is built on a warm, desaturated foundation that evokes trust and approachability. Primary (#1c2b3a, a deep navy-ink) anchors all interactive elements and typography, providing contrast and authority. Secondary (#1f6169, a muted teal) is used for accent highlights, focus states, and supporting CTAs—it signals action without aggression. Tertiary (#ffb27c, a warm peach-orange) is reserved for highlights, badges, and decorative accents; it appears in the hero illustration and as a dot on the logo, creating visual warmth and personality. The surface stack is built from warm off-whites and creams: surface (#fbf8f3) is the page background, surface-container-low (#f4eee5) is used for input fields and subtle containers, and surface-bright (#ffffff) is reserved for elevated cards a

Typography

The type system uses General Sans exclusively, a humanist sans-serif that balances geometric precision with warmth. Display (56px, 600 weight, -0.028em tracking) is reserved for hero headlines and major section titles; it uses a tight line-height (58px) to create visual impact and is always set in primary (#1c2b3a). Headline-lg (40px, 600 weight) is used for section headings and card titles. Body-md (17px, 400 weight, 26px line-height) is the default paragraph text and is set in on-surface (#475467) for optimal readability over light backgrounds. Label-md (15px, 600 weight) is applied to all button text and form labels. All headings use text-wrap: balance to prevent orphans and improve visual rhythm. Body text uses text-wrap: pretty for improved line-breaking. Small labels over busy backgr

Layout

The layout uses a 12-column grid with a max-width of 1216px (76rem). The container has responsive padding: clamp(1.25rem, 4vw, 2.5rem) on inline edges, ensuring the design breathes on mobile while maintaining density on desktop. Sections (panels) are separated by lg spacing (40px) on mobile and clamp(3.5rem, 8vw, 5rem) on larger viewports, creating a rhythm that feels generous without being wasteful. The hero section uses a two-column layout on desktop (lg:grid-cols-12 with lg:col-span-6 for text and image) and stacks on mobile. Gap between columns is lg spacing (40px on desktop, 24px on tablet). White-space is used strategically: the hero has 14px (py-14) padding on mobile and 20px (py-20) on tablet, scaling to 16px on large screens (lg:py-16). The minimum hero height on large viewports i

Elevation & Depth

Depth is conveyed through subtle shadows and layering rather than dramatic effects. The shadow system uses three levels: sm (0 1px 2px rgba(28, 43, 58, 0.06)) for minimal elevation on hover states and subtle borders; md (0 1px 2px rgba(28, 43, 58, 0.08), 0 8px 24px -12px rgba(28, 43, 58, 0.15)) for standard cards and lifted containers; and lg (0 2px 4px rgba(28, 43, 58, 0.08), 0 20px 40px -16px rgba(28, 43, 58, 0.18)) for modals and prominent overlays. The hero section uses a white background (surface-bright) with md shadow to separate it from the page background. Cards use md shadow by defaul

Shapes

The shape philosophy is 'Soft-Technical Warmth'—rounded corners are used generously to soften the professional aesthetic, but not so much that the brand feels playful or casual. Buttons use full rounding (9999px) to create pill-shaped CTAs that feel inviting and modern. Cards and panels use lg rounding (16px) for standard containers and panel rounding (32px) for hero and major section backgrounds, creating visual hierarchy through radius scale. Input fields use DEFAULT rounding (8px) for a more utilitarian feel. Focus outlines use 8px border-radius to match the input aesthetic. Decorative elem

Components

Action Elements Buttons are the primary interactive element. Button-primary uses primary (#1c2b3a) background with on-primary (#ffffff) text, label-md typography (15px, 600 weight), full rounding (9999px), and padding 12px 24px (height 44px). On hover, the background transitions to primary-container (#2b4052) over 0.5s with cubic-bezier(0.16, 1, 0.3, 1) easing. On active/press, scale is reduced to 0.97 with a 0.12s transition. Button-secondary uses transparent background with primary text, a 1px outline in outline (#e8e1d6), and the same padding and rounding. On hover, the background becomes surface-container-high (#ede8df). All buttons use the press component class, which applies transition: scale 0.5s var(--ease-out), background-color 0.5s var(--ease-out), box-shadow 0.5s var(--ease-

Do's and Don'ts

**Do**

• Do use primary (#1c2b3a) for all CTAs and interactive focus states—it's the brand's authority colour and must remain consistent.
• Do apply full rounding (9999px) to buttons and secondary rounding (16–32px) to containers; this softness is core to the brand's approachability.
• Do use the warm surface palette (#fbf8f3, #f4eee5) as the foundation; it creates a welcoming, non-corporate feel that differentiates the brand.
• Do animate all interactive elements with 0.5s cubic-bezier(0.16, 1, 0.3, 1) easing; the ease-out curve is deliberate and must not be replaced with linear or ease-in-out.
• Do use General Sans exclusively for all typography; no fallbacks to system fonts in component definitions.
• Do apply text-wrap: balance to all headings and text-wrap: pretty to all body paragraphs to improve visual rhythm and readability.

**Don't**

• Don't use secondary (#1f6169) or tertiary (#ffb27c) as primary button backgrounds; they are accents only and would dilute the primary's authority.
• Don't apply shadows larger than lg (0 2px 4px rgba(28, 43, 58, 0.08), 0 20px 40px -16px rgba(28, 43, 58, 0.18)); the brand favours subtlety and restraint.
• Don't use sharp corners (border-radius: 0) on any interactive element; the soft aesthetic is non-negotiable.
• Don't mix animation easing curves; always use cubic-bezier(0.16, 1, 0.3, 1) for interactive transitions and cubic-bezier(0.4, 0, 1, 1) for entrance animations.
• Don't apply more than one accent colour (tertiary) to a single component; visual hierarchy depends on restraint.
• Don't use on-surface (#475467) for headings; headings must always use primary (#1c2b3a) to maintain visual hierarchy and brand consistency.