Skip to content
DesignMunkDesignMunk Submit a site

Slight Twist

slight-twist.co.nz
Brewed to be better. Naturally, with a slight twist.
Ecommerce Food & Drinks Webflow Homepage Nanjaune
Share Visit site
slight-twist.co.nz DESKTOP · 1440
Slight Twist

AI Breakdown

Design export

---
version: alpha
name: Slight Twist
description: Brewed to be better. Naturally, with a slight twist.
colors:
  primary: "#fff8b5"
  secondary: "#fca5d1"
  tertiary: "#ff258e"
  neutral: "#0a6a66"
  border: "#374151"
  brand-aggressive-salmon: "#fc7494"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Nanjaune
    fontSize: 72px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: -0.031em
  headline-md:
    fontFamily: Nanjaune
    fontSize: 68px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: -0.033em
  headline-sm:
    fontFamily: Nanjaune
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: -0.021em
  headline-xs:
    fontFamily: Nanjaune
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.19
    letterSpacing: -0.063em
  body-md:
    fontFamily: Nanjaune
    fontSize: 18px
    fontWeight: 300
    lineHeight: 1.5
rounded:
  sm: 8px
spacing:
  xs: 10px
  sm: 20px
  md: 32px
  lg: 46px
  xl: 72px
components:
  button-primary:
    backgroundColor: "#ffd4f6"
    textColor: "#cb1800"
    rounded: "{rounded.sm}"
    padding: 12px 24px 16px
    height: 59px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 12px 24px 16px
    height: 59px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 16px
---

# Slight Twist: Butter-Yellow Headlines on Botanical Teal

## Overview

Playful, confident, and product-first. The interface runs in dark mode with a teal surface and butter-yellow type, using bold display headlines and bright candy accents for calls to action. Spacing is generous; sections read in large, scannable blocks with simple claims and upbeat voice. When tokens are absent, prefer high contrast on teal, friendly 8px corners, and minimal chrome.

## Colors

- **primary (#fff8b5):** Butter-yellow for headlines and core text on dark teal surfaces.
- **secondary (#fca5d1):** Soft berry pink for supporting accents and secondary highlights.
- **tertiary (#ff258e):** Hot magenta for high-energy accents, badges, and emphasis moments.
- **neutral (#0a6a66):** Botanical teal surface used across the site and on cards.
- **border (#374151):** Slate border for hairlines and dividers when contrast is needed without shadows.
- **brand-aggressive-salmon (#fc7494):** Punchy salmon for promotional tags or flavour notes.
- **surface ({colors.neutral}):** Alias of Botanical Teal; use for page and card backgrounds to keep tone consistent.
- **on-surface ({colors.primary}):** Alias of Butter-yellow; the default text colour on teal surfaces.

## Typography

- Display and body styles use Nanjaune. In tokens: Headline sizes at 72/68/48/32px with tight negative letter-spacing; body at 18px, weight 300 for approachable copy.
- Availability: Nanjaune is self-hosted (custom). Treat it as proprietary in agent builds. Substitutes with similar warmth and rounded geometry: Bricolage Grotesque (Google), Fredoka (Google), or Rubik (Google). Pair bold weights for headlines with regular/300 for body to preserve contrast.
- Hierarchy: Headlines carry most of the personality; body stays large and airy for retail readability. Keep line-height near 1 for headlines and 1.5 for body as specified.

## Layout

Spacing follows a compact-to-generous scale: 10, 20, 32, 46, 72px. Use xl (72px) for section padding, lg (46px) for intra-section blocks, md (32px) for card gutters, and sm/xs for small controls. Layout tends to a two-column hero (text left, product image right) and single-column stacks below. Horizontal carousels use consistent card widths with md gaps to encourage drag.

## Elevation & Depth

No shadows are specified at any size. Depth is established through strong colour blocking (teal surfaces vs. butter text), 1px slate borders for separation, and generous whitespace. Emphasis shifts via accent colours rather than glow or blur.

## Shapes

Rounded.sm is 8px and is used universally on buttons, cards, input fields, and image masks. The consistent 8px corner keeps the brand friendly and modern without going full-pill; reserve circles only for small bullets and icons.

## Components

Buttons and cards are tokenised and should be used verbatim.

- Button — Primary: background #ffd4f6, text #cb1800, height 59px, padding 12px 24px 16px, 8px radius. Use for main CTAs.
- Button — Secondary: text #fff8b5 on transparent/teal, same dimensions and radius as primary.
- Button — Link: text #fff8b5, no radius, inline usage.
- Card: background #0a6a66, text #fff8b5, 8px radius, 16px internal padding.

Distinctive components on this page:

### Age Gate Modal
- Full-screen teal surface (#0a6a66) with butter text (#fff8b5). Two actions ("Yes", "No") styled as primary and secondary buttons at 59px height with 8px radius and sm (20px) spacing.

### Hero Can Spotlight
- Left column uses headline-lg (72px/700/-0.031em) over the teal surface with a single primary button. Right column hosts an angled product can image. Section padding: xl top/bottom.

### Claims Bands
- Two stacked strips with body-md (18px/300) in uppercase. Use on-surface text on teal; separate the bands with a border (#374151) and md (32px) vertical rhythm.

### Our Range — Horizontal Carousel
- Row of product cards using the card token, md (32px) gaps, xs (10px) internal item spacing. Drag/scroll horizontally; each card links to its PDP.

### Flavour Feature Panels
- For each flavour section: headline-sm (48px/700), body-md descriptors, a primary "Shop now" button, and supporting bullets. Maintain lg (46px) spacing between text blocks.

### Variety Four Pack CTA
- Headline-xs (32px/400) with stacked list items and a primary button. Use md spacing and 8px corners on any image tiles.

### Newsletter Signup Bar
- Footer band titled "Friendship is brewing" using headline-xs or strong body-md. Input and submit button inherit 8px corners; keep text in #fff8b5 on teal.

## Do's and Don'ts

- Do keep text on teal using on-surface butter (#fff8b5) for maximum legibility.
- Do use the 8px radius consistently across buttons, cards, inputs, and image masks.
- Do separate dense sections with slate borders (#374151) or xl spacing instead of drop shadows.
- Don't mix additional surface colours; the system relies on a single teal ground with accent pops.
- Don't reduce body text below 18px; readability is part of the brand's inclusive positioning.
- Don't introduce pill buttons; stay with the slightly-rounded 8px rectangle to match packaging angles.

## Agent Prompt Guide

Quick colour reference — Text: #fff8b5, Background: #0a6a66, Border: #374151, Accent: #ff258e.

1) Build the hero
- Background #0a6a66. H1 set in Nanjaune 72px, weight 700, letter-spacing -0.031em, color #fff8b5. If Nanjaune unavailable, use Bricolage Grotesque 800 at 72px with similar tracking. Primary button 59px tall with 8px radius, padding 12px 24px 16px, background #ffd4f6, text #cb1800.

2) Claims bands
- Two full-width strips on #0a6a66 with 1px borders in #374151. Type: body 18px/1.5, weight 300, color #fff8b5. Use middle dots as separators. Vertical rhythm: md (32px) between lines.

3) Our Range carousel
- Horizontal scroll area on #0a6a66. Each card: background #0a6a66, 8px radius, 16px internal padding, text #fff8b5. Gaps md (32px). CTA inside card uses the secondary button (text #fff8b5, 59px tall).

4) Flavour feature panel
- Section padding xl (72px). Title in Nanjaune 48px/700 (fallback Bricolage Grotesque 700), color #fff8b5. Supporting bullets in 18px/1.5. Primary CTA uses #ffd4f6 with #cb1800, 8px radius.

5) Newsletter signup
- Band on #0a6a66 with headline-xs 32px/400. Input field 8px radius, 16px internal padding. Submit button matches primary: 59px height, #ffd4f6 background, #cb1800 text.

## Similar Brands

- OLIPOP — DTC beverage with playful display type and candy accents; more off-white backgrounds versus Slight Twist's strict dark teal.
- HOP WTR — Minimal, flavour-forward cans and bold claims; uses cooler blues and more white space.
- Liquid Death — High-contrast, product-first layout; heavier metal aesthetic and serif headlines instead of rounded display.
- Sanzo — Bright fruit colour blocking and simple cans; runs lighter surfaces and softer sans usage compared to this dark-mode palette.

More like this

Browse Ecommerce →
wizcommerce.com
WizCommerce AI
WizCommerce
Built for Wholesale. Powered by AI.
Homepage · 2 days ago
checkoutpage.com
Checkout Page Ecommerce
Checkout Page
One platform for everything you sell
Homepage · 3 days ago
rodeo-labs.com
Rodeo Adventure Labs Ecommerce
Rodeo Adventure Labs
Ride. Explore. Create.
Homepage · 4 days ago
auntfannies.com
Aunt Fannie’s Ecommerce
Aunt Fannie’s
Cleaning differently: no harsh chemicals, plant-based, pet-friendly goodness
Homepage · 4 days ago