Checkers Sixty60

Overview

Checkers Sixty60 is South Africa's rapid-delivery grocery service, built on a design language that balances energetic optimism with functional clarity. The brand embodies 'Friendly Efficiency'—a visual aesthetic that combines a vibrant teal header (#38a8ae) with warm coral CTAs (#f18070) to convey speed, reliability, and approachability. The interface prioritizes rapid task completion: users should locate, select, and order within seconds. The emotional response is one of relief—the service removes friction from grocery shopping, and the design reinforces this through generous whitespace, clear hierarchies, and decisive action buttons. Voice: conversational, encouraging, never corporate. Example: 'Shop in 60 seconds. Delivered in 60 minutes. That's the Sixty60 promise.'

Colors

The color system operates on a dual-accent model: teal (#38a8ae) anchors the header and secondary actions, signaling trust and speed; coral (#f18070) dominates primary CTAs ('Shop Now', 'Join now'), creating visual urgency and warmth. The palette is grounded in neutral surfaces: white (#ffffff) for content areas, light gray (#e9ecef) for containers and disabled states, and dark gray (#6c757d) for secondary text. Primary (#f18070) is used exclusively on high-priority CTAs and hover states to maintain visual focus. Secondary (#38a8ae) appears in headers, badges, and supporting interactive elements. Tertiary (#505050) handles body text and structural elements. The surface stack uses minimal contrast: surface-container (#e9ecef) for form fields and dropdowns, surface-container-high (#f0f9fa) f

Typography

The type system uses Open Sans exclusively, a humanist sans-serif that conveys approachability and modern efficiency. Display (60px, 700 weight) anchors hero sections; Headline-lg (40px, 700) introduces major sections; Headline-md (28px, 700) breaks up content areas; Title-lg (24px, 700) labels feature cards; Body-lg (18px, 400) carries primary content; Body-md (16px, 400) fills form labels and secondary text; Label-md (14px, 600) marks buttons and badges; Label-sm (12px, 500) handles fine print and disabled states. Letter-spacing is minimal (-0.04em on display to tighten large text, 0em on body) to maintain warmth. Line-height is generous (1.5 on body, 1.33 on headlines) to improve scannability on mobile. Apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) on white text over teal backgrounds

Layout

The layout uses a 12-column responsive grid with a max-width of 1280px, centered on desktop. Mobile-first breakpoints: full-width on small screens (<576px), 8-column on medium (576–768px), 10-column on large (768–1024px), 12-column on xl (1024px+). Spacing follows a semantic scale: unit (8px) as the base increment, xs (4px) for micro-interactions, sm (12px) for form field padding, md (24px) for section gutters and card padding, lg (40px) for major section separation, xl (64px) for hero-to-content transitions. Container max-width is 1280px with 24px horizontal gutters on desktop, 16px on tablet, 12px on mobile. White-space is generous: 40px vertical rhythm between sections, 24px between cards, 12px between form elements. The header bar (64px height, teal background) is sticky on scroll to m

Elevation & Depth

Depth is achieved through subtle layering and soft shadows rather than dramatic elevation. Level 1 (Base): flat white surfaces with no shadow, used for body backgrounds and primary content areas. Level 2 (Standard Cards): 1px solid border at #d0d0d0 + box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), applied to cards, dropdowns, and form containers. Level 3 (Elevated/Modals): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), used for modals, overlays, and hover states on interactive cards. Hover transitions use 200ms ease-in-out timing to smoothly shift from Level 2 to Level 3. The teal header bar (#38a8ae

Shapes

The design philosophy is 'Soft-Technical'—rounded corners signal friendliness and approachability, while consistent radii maintain structural clarity. Buttons use rounded.lg (1rem / 16px) for a soft, inviting appearance; cards use rounded.xl (1.5rem / 24px) for a more prominent, contained feel; form inputs use rounded.DEFAULT (0.5rem / 8px) for functional simplicity; badges and pills use rounded.full (9999px) for maximum softness. The header bar has no border-radius (0px) to anchor the page visually. Dropdown panels use rounded.DEFAULT (8px) to match input fields. This hierarchy—larger radius

Components

Action Elements Buttons are the primary interaction mechanism. Button-primary uses coral (#f18070) background, white text, 24px font-size, 700 weight, 10px vertical / 24px horizontal padding, and rounded.lg (16px). On hover, background shifts to #e06b5f with a 200ms transition. Button-secondary uses transparent background with a 2px coral border and coral text; on hover, it fills with primary-container (#ffe8e0) and text becomes on-primary-container (#c85a42). Button-tertiary uses teal (#38a8ae) background with white text; hover state darkens to #2d8a92. All buttons have height: 48px for touch-friendly sizing on mobile.

Containers & Surfaces Cards use white background (#ffffff), 1px solid border (#d0d0d0), rounded.xl (24px), 24px padding, and box-shadow: 0 3px 8px rgba(0, 0, 0, 0.

Do's and Don'ts

**Do**

• Do use coral (#f18070) exclusively on primary CTAs—'Shop Now', 'Join now', 'Download'—to create visual urgency and guide users to key actions.
• Do maintain 40px vertical spacing between major sections and 24px between cards to create breathing room and improve scannability on mobile.
• Do apply 200ms ease-in-out transitions on all interactive state changes (hover, focus, active) to signal interactivity without jarring shifts.
• Do use Open Sans 700 weight (bold) for all headlines and button text to convey confidence and speed.
• Do ensure white text on teal backgrounds includes text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) to maintain 4.5:1 contrast for accessibility.

**Don't**

• Don't use teal (#38a8ae) on primary CTAs—it's reserved for secondary actions and headers; using it on CTAs dilutes the visual hierarchy.
• Don't apply border-radius > 1.5rem (24px) on buttons or form inputs; it reads as overly playful and undermines functional clarity.
• Don't use shadows > 0 8px 24px rgba(0, 0, 0, 0.12); deeper shadows create visual clutter and distract from content.
• Don't mix Open Sans with other typefaces; the system relies on a single, consistent family to maintain brand coherence.
• Don't reduce spacing below 12px (sm) between interactive elements; cramped layouts increase mobile interaction errors and reduce perceived quality.