allwhere

Overview

allwhere is a zero-touch IT logistics company: it sources, deploys, retrieves, refreshes and retires employee laptops across offices, hybrid and fully remote teams. The aesthetic is an illustrated editorial minimalism: a warm cream canvas (#faf7f0) carries ink-black type (#131414) and flat, hand-drawn city-skyline illustrations in cyan, coral and ochre, with the golden CTA (#f9c54d) doing the decisive work. Surfaces are flat and tactile rather than glassy; the emotional response is calm competence, as if a well-run operations desk had been drawn by hand.

The voice is plain, operational and confident: short declarative headlines ("Automate the employee device lifecycle"), concrete nouns (devices, workflows, retrieval) and no hype. Sentences favour verbs of action over adjectives. Example: "With just a click, equipment gets where it needs to go."

Colors

The brand runs on a warm neutral base. The canvas is cream #faf7f0 with a deeper cream #f8eed3 for alternate bands, and ink #131414 is the sole text colour. Primary (#f9c54d) is the golden-yellow used on the 'BOOK A DEMO' and 'GET A DEMO' CTAs; it always carries ink text (#131414), never white. Its hover shifts to #e8b23e (primary-fixed-dim). Secondary (#8fc8cf) is the pale cyan used for badges, illustration accents and the custom form accent-color; it is never used for body text. Tertiary (#f27058) is the coral used for blog-headline underline hovers and warm illustration fills, and error uses the deeper brick #cf5646. Muted body copy uses #647076 (on-surface-variant) and hairline dividers use #13141433 (outline-variant at 20% alpha).

Surface stacking is flat: sections alternate #faf7f0

Typography

The type pairing contrasts a geometric display face with a humanist text face. PP Pangram Sans at 700 carries headings, CTAs and navigation labels (h2 at 47px / 56px line-height, letter-spacing -0.02em to tighten large display lines), while IBM Plex Sans at 400 carries body copy at 15.67px / 26.6px. Use the bold display weight for any line that must be scanned, never for paragraphs. Small labels over imagery should receive text-shadow: 0 1px 2px rgba(0,0,0,0.15) to stay legible over the illustrated backgrounds.

Layout

The grid is fluid up to a fixed container of 1215px max-width with 12 columns and a 32px gutter. Root font-size is fluid (calc(0.625rem + 0.4167vw)), so every rem-based dimension scales with viewport. Whitespace is generous: section separation uses the lg (32px) and 2xl (64px) spacing steps, hero copy uses md (24px) between paragraph and CTA, and card internal padding is lg (32px). The unit is 8px; sm (20px) is reserved for input and list padding.

Elevation & Depth

Hierarchy is conveyed mostly by colour blocks, not shadows. Where lift is needed, the brand uses layered ink-tinted shadows: the card shadow is 0px 2px 4px rgba(19,20,20,0.2), 0px 4px 12px rgba(19,20,20,0.12), 0px 6px 24px rgba(19,20,20,0.12); the modal/overlay shadow is 0px 4px 8px rgba(0,0,0,0.2), 0px 16px 32px rgba(0,0,0,0.14), 0px 32px 64px rgba(0,0,0,0.12). The cookie-banner-style floating panel uses 0 8px 28px rgba(0,0,0,0.28). Do not invent glass blur; the system is opaque.

Shapes

The shape language is soft-organic: pill-shaped (200px / full) CTAs and tags, 16px to 18px radii on cards and feature imagery, and 8px on inputs and small chips. The 50% radius is reserved for avatars and circular icon badges. Pills signal action; rounded rectangles signal content.

Components

Action Elements Primary buttons are full pills (border-radius 200px) in #f9c54d with ink label, 65px tall on the hero and 48px in the header, padded 0 31px. Hover moves to #e8b23e over 200ms ease. Secondary buttons are outlined pills with a 1px #131414 border and transparent fill; hover fills with #f8eed3.

Containers & Surfaces Feature cards use #ffffff at 16px radius with 32px padding and the allwhere-shadow stack. On hover, cards transition to #f5f8fa and the medium elevation over 600ms cubic-bezier(0.22, 1, 0.36, 1). Blog headlines reveal a 10% coral underline that grows to 100% height on hover over 600ms.

Inputs & Interaction Form fields use 8px radius, 1px #8c9496 border, 20px padding and a focus ring tinted with the cyan accent (#8fc8cf, 3px). Nav links carry an animate

Do's and Don'ts

**Do**

• Do pair every #f9c54d CTA with ink #131414 text and keep it in a pill shape.
• Do alternate #faf7f0 and #f8eed3 section bands instead of adding shadows between sections.
• Do use PP Pangram Sans 700 for headlines and IBM Plex Sans 400 for all body copy.
• Do keep illustrations flat with cyan, coral and ochre fills on the cream canvas.

**Don't**

• Don't place white text on the golden CTA; contrast fails and it breaks the brand.
• Don't use cyan (#8fc8cf) for body text or long links; reserve it for accents and badges.
• Don't introduce glassmorphism or background blur; surfaces are opaque.
• Don't use radii between 20px and 50% on rectangular content cards; stay with 8px, 16px or 18px.