DESIGN.md · Analysis

fwip

fwip.com · 31 Aug 2026 · 47 colors · Anton, Museo Sans

fwip

fwip is the world's smallest gelateria, disrupting the ice cream industry with compact, award-winning self-serve machines. The brand combines playful irreverence with technical precision, targeting businesses tired of complexity.

Colors

surface#ffffff

surface-dim#f6f6f6

surface-bright#ffffff

surface-container-lowest#fafafa

surface-container-low#f0f0f0

surface-container#e5e5e5

surface-container-high#dddddd

surface-container-highest#cccccc

on-surface#222222

on-surface-variant#8e8e8e

inverse-surface#202020

inverse-on-surface#f6f6f6

outline#8e8e8e

outline-variant#cccccc

surface-tint#3cdbc0

primary#3cdbc0

on-primary#ffffff

primary-container#40c1ac

on-primary-container#ffffff

inverse-primary#25d8c9

secondary#601cbd

on-secondary#ffffff

secondary-container#601cbd

on-secondary-container#ffffff

tertiary#ffad00

on-tertiary#222222

tertiary-container#f2c276

on-tertiary-container#222222

error#cf2d5a

on-error#ffffff

error-container#e31c79

on-error-container#ffffff

primary-fixed#40c1ac

primary-fixed-dim#25d8c9

on-primary-fixed#ffffff

on-primary-fixed-variant#222222

secondary-fixed#601cbd

secondary-fixed-dim#400e17

on-secondary-fixed#ffffff

on-secondary-fixed-variant#ffffff

tertiary-fixed#ffad00

tertiary-fixed-dim#f2c276

on-tertiary-fixed#222222

on-tertiary-fixed-variant#222222

background#ffffff

on-background#222222

surface-variant#f6f6f6

Typography

display: fontFamily: Anton · fontSize: 62px · fontWeight: 400 · lineHeight: 68px · letterSpacing: -0.02em
headline-lg: fontFamily: Anton · fontSize: 48px · fontWeight: 400 · lineHeight: 56px · letterSpacing: -0.015em
headline-md: fontFamily: Museo Sans · fontSize: 32px · fontWeight: 700 · lineHeight: 40px · letterSpacing: -0.01em
title-lg: fontFamily: Museo Sans · fontSize: 20px · fontWeight: 700 · lineHeight: 28px · letterSpacing: 0em
body-lg: fontFamily: Museo Sans · fontSize: 18px · fontWeight: 400 · lineHeight: 28px · letterSpacing: 0em
body-md: fontFamily: Museo Sans · fontSize: 16px · fontWeight: 400 · lineHeight: 24px · letterSpacing: 0em
label-md: fontFamily: -apple-system, sans-serif · fontSize: 14px · fontWeight: 700 · lineHeight: 20px · letterSpacing: 0.01em
label-sm: fontFamily: Museo Sans · fontSize: 12px · fontWeight: 500 · lineHeight: 16px · letterSpacing: 0.02em

Design guidance

Overview

fwip is a disruptive B2B ice cream technology brand that transforms the frozen dessert retail experience through compact, self-serve machines. The design system embodies 'Playful Precision'—a fusion of vibrant, energetic color (turquoise #3cdbc0, deep purple #601cbd) with clean, geometric typography and minimal surfaces. The brand speaks to business owners exhausted by complexity; the UI evokes confidence, approachability, and irreverent joy. Every interaction feels intentional and fast.

The voice is conversational yet authoritative: direct, punchy, never corporate. fwip uses active verbs and concrete benefits ('Scooping up more revenue,' 'Fwipping the industry on its cone'). The tone balances playfulness with respect for the user's time and intelligence. Example sentence in brand voice: 'Your ice cream machine shouldn't require a PhD—or a warehouse.'

Colors

The color system is built on a high-contrast, energetic palette designed to cut through retail noise. Primary (#3cdbc0, a vivid turquoise) is the signature accent—applied to all CTAs, interactive states, and brand moments. It commands attention without aggression, evoking freshness and innovation. Secondary (#601cbd, deep purple) provides sophisticated contrast and is reserved for premium messaging, modal overlays, and secondary navigation. Tertiary (#ffad00, warm gold) adds warmth and is used sparingly for highlights, badges, and tertiary CTAs.

The surface stack is deliberately minimal: pure white (#ffffff) as the dominant background, with subtle grays (#f6f6f6, #e5e5e5, #cccccc) for layering and depth. On-surface text is near-black (#222222) for maximum legibility. Accent colors are nev

Typography

The type system pairs Anton (a bold, geometric sans-serif) for headlines and display text with Museo Sans (a humanist sans-serif) for body and UI text. Anton at 62px, 400 weight, with -0.02em letter-spacing creates commanding hero statements; Museo Sans at 16px, 400 weight, 24px line-height ensures comfortable reading in dense product descriptions. The hierarchy is steep: display (62px) → headline-lg (48px) → headline-md (32px) → body-lg (18px) → body-md (16px) → label-md (14px, 700 weight for buttons). Use Museo Sans 700 for all button labels and interactive text to ensure clickability is visually obvious. On small labels over busy product images, apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) to maintain contrast. Never use Anton for body text; it fatigues at small sizes.

Layout

The layout follows a 12-column grid with a max-width of 1400px, using fluid margins on mobile (24px gutter) and fixed gutters on desktop. Section separation uses lg spacing (40px) vertically; card-to-card spacing uses md spacing (24px). The hero section spans full-width with a split layout: turquoise background on the left (containing headline and CTA), product imagery on the right. Container padding is consistently 24px on tablet, 40px on desktop. Whitespace is generous—never crowd cards or buttons. The page rhythm alternates between full-width hero sections and constrained content containers (max 1090px) to create visual breathing room. Use the spacing scale semantically: xs (4px) for micro-interactions, sm (12px) for component internal spacing, md (24px) for card padding and section mar

Elevation & Depth

Depth is achieved through subtle shadows and layering, not darkness. Base surfaces (cards, inputs) use elevation.md (0 3px 8px rgba(0, 0, 0, 0.15)) to lift slightly from the white background. Elevated surfaces (modals, dropdowns, hover states) use elevation.lg (0 8px 24px rgba(0, 0, 0, 0.12)) to create clear separation. The shadow is always soft and spread, never sharp—this maintains the approachable, friendly aesthetic. Hover states on cards transition the shadow from md to lg over 200ms. Modals use a semi-transparent overlay (rgba(0, 0, 0, 0.5)) with a 4px blur backdrop-filter to focus atten

Shapes

The shape philosophy is 'Geometric Friendliness'—sharp enough to feel modern and technical, rounded enough to feel approachable. Buttons use full border-radius (9999px) to signal interactivity and playfulness; this is the most distinctive shape in the system. Cards and containers use 24px radius (1.5rem) for a balanced, modern look that's not overly soft. Input fields use 23px radius to match button curvature and create visual cohesion. Smaller UI elements (badges, toggles) use 12px to 16px radius. The rationale: full-radius buttons are instantly recognizable as clickable; moderate radius on c

Components

Action Elements Buttons are the primary interaction pattern. The primary button uses turquoise background (#3cdbc0), white text, 48px height, 8px 32px padding, full border-radius, and label-md typography (14px, 700 weight). On hover, the background transitions to the primary-fixed-dim (#25d8c9) over 200ms. Secondary buttons use a light gray background (#cccccc), dark text, 40px height, 6px 34px padding, and 6px border-radius (not full). Tertiary buttons (for premium actions) use the deep purple (#601cbd) with white text and full border-radius. All buttons must have a minimum touch target of 44px height on mobile.

Containers & Surfaces Cards are the primary container pattern: white background, 24px border-radius, 24px padding, 1px border in outline-variant (#cccccc), and elevation.

Do's and Don'ts

**Do**

Do use the turquoise primary (#3cdbc0) on all CTAs, focus states, and brand moments—it's the signature color and must be instantly recognizable.
Do pair Anton headlines with Museo Sans body text; never reverse this pairing or mix them within a single text block.
Do use full border-radius (9999px) exclusively on buttons to signal interactivity; use 24px radius on cards and containers.
Do apply elevation.md shadow (0 3px 8px rgba(0, 0, 0, 0.15)) to all cards and elevated surfaces; never use harsh or inset shadows.
Do maintain 24px gutter spacing on mobile and 40px on desktop; never compress whitespace to fit content.
Do use the deep purple (#601cbd) sparingly—only for secondary CTAs, modals, and premium messaging—to preserve its impact.

**Don't**

Don't use the turquoise primary on backgrounds or large surface areas; it's an accent color for interactive elements only.
Don't mix Anton and Museo Sans weights arbitrarily; follow the typography hierarchy strictly (Anton for headlines, Museo Sans for body).
Don't use sharp corners (0px border-radius) on buttons, cards, or inputs; minimum radius is 6px, full radius for buttons.
Don't apply multiple shadows or layer shadows; use only one shadow value from the elevation scale per element.
Don't use the tertiary gold (#ffad00) on interactive elements; reserve it for badges, highlights, and non-critical accents.
Don't reduce padding or margins to fit content; instead, redesign the layout or break content into multiple sections.

---
version: alpha
name: fwip
description: >-
  fwip is the world's smallest gelateria, disrupting the ice cream industry with compact, award-winning self-serve
  machines. The brand combines playful irreverence with technical precision, targeting businesses tired of complexity.
logo:
  src: https://cdn.prod.website-files.com/603e5c8dcbd79f51068e0504/60670bf71131821bd3d565a8_webclip.png
colors:
  surface: '#ffffff'
  surface-dim: '#f6f6f6'
  surface-bright: '#ffffff'
  surface-container-lowest: '#fafafa'
  surface-container-low: '#f0f0f0'
  surface-container: '#e5e5e5'
  surface-container-high: '#dddddd'
  surface-container-highest: '#cccccc'
  on-surface: '#222222'
  on-surface-variant: '#8e8e8e'
  inverse-surface: '#202020'
  inverse-on-surface: '#f6f6f6'
  outline: '#8e8e8e'
  outline-variant: '#cccccc'
  surface-tint: '#3cdbc0'
  primary: '#3cdbc0'
  on-primary: '#ffffff'
  primary-container: '#40c1ac'
  on-primary-container: '#ffffff'
  inverse-primary: '#25d8c9'
  secondary: '#601cbd'
  on-secondary: '#ffffff'
  secondary-container: '#601cbd'
  on-secondary-container: '#ffffff'
  tertiary: '#ffad00'
  on-tertiary: '#222222'
  tertiary-container: '#f2c276'
  on-tertiary-container: '#222222'
  error: '#cf2d5a'
  on-error: '#ffffff'
  error-container: '#e31c79'
  on-error-container: '#ffffff'
  primary-fixed: '#40c1ac'
  primary-fixed-dim: '#25d8c9'
  on-primary-fixed: '#ffffff'
  on-primary-fixed-variant: '#222222'
  secondary-fixed: '#601cbd'
  secondary-fixed-dim: '#400e17'
  on-secondary-fixed: '#ffffff'
  on-secondary-fixed-variant: '#ffffff'
  tertiary-fixed: '#ffad00'
  tertiary-fixed-dim: '#f2c276'
  on-tertiary-fixed: '#222222'
  on-tertiary-fixed-variant: '#222222'
  background: '#ffffff'
  on-background: '#222222'
  surface-variant: '#f6f6f6'
typography:
  display:
    fontFamily: Anton
    fontSize: 62px
    fontWeight: '400'
    lineHeight: 68px
    letterSpacing: '-0.02em'
  headline-lg:
    fontFamily: Anton
    fontSize: 48px
    fontWeight: '400'
    lineHeight: 56px
    letterSpacing: '-0.015em'
  headline-md:
    fontFamily: Museo Sans
    fontSize: 32px
    fontWeight: '700'
    lineHeight: 40px
    letterSpacing: '-0.01em'
  title-lg:
    fontFamily: Museo Sans
    fontSize: 20px
    fontWeight: '700'
    lineHeight: 28px
    letterSpacing: 0em
  body-lg:
    fontFamily: Museo Sans
    fontSize: 18px
    fontWeight: '400'
    lineHeight: 28px
    letterSpacing: 0em
  body-md:
    fontFamily: Museo Sans
    fontSize: 16px
    fontWeight: '400'
    lineHeight: 24px
    letterSpacing: 0em
  label-md:
    fontFamily: '-apple-system, sans-serif'
    fontSize: 14px
    fontWeight: '700'
    lineHeight: 20px
    letterSpacing: 0.01em
  label-sm:
    fontFamily: Museo Sans
    fontSize: 12px
    fontWeight: '500'
    lineHeight: 16px
    letterSpacing: 0.02em
rounded:
  sm: 0.25rem
  DEFAULT: 0.375rem
  md: 0.75rem
  lg: 1rem
  xl: 1.5rem
  full: 9999px
spacing:
  unit: 8px
  xs: 4px
  sm: 12px
  md: 24px
  lg: 40px
  xl: 64px
  gutter: 24px
  container-max: 1400px
elevation:
  sm: 0 1px 2px rgba(0, 0, 0, 0.06)
  md: 0 3px 8px rgba(0, 0, 0, 0.15)
  lg: 0 8px 24px rgba(0, 0, 0, 0.12)
layout:
  containerMaxWidth: 1400px
  gridColumns: 12
components:
  button-primary:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.label-md}'
    rounded: '{rounded.full}'
    padding: 8px 32px
    height: 48px
    border: none
  button-primary-hover:
    backgroundColor: '{colors.primary-fixed-dim}'
    textColor: '{colors.on-primary}'
    transition: background-color 200ms ease-out
  button-secondary:
    backgroundColor: '{colors.surface-container-highest}'
    textColor: '{colors.on-surface}'
    typography: '{typography.label-md}'
    rounded: 6px
    padding: 6px 34px
    height: 40px
    border: none
  button-secondary-hover:
    backgroundColor: '{colors.surface-container-high}'
    transition: background-color 200ms ease-out
  button-tertiary:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.on-secondary}'
    typography: '{typography.label-md}'
    rounded: '{rounded.full}'
    padding: 8px 32px
    height: 48px
  button-tertiary-hover:
    backgroundColor: '{colors.secondary-fixed-dim}'
    transition: background-color 200ms ease-out
  card:
    backgroundColor: '{colors.surface}'
    rounded: 24px
    padding: '{spacing.md}'
    boxShadow: '{elevation.md}'
    border: 1px solid {colors.outline-variant}
  card-hover:
    backgroundColor: '{colors.surface-dim}'
    boxShadow: '{elevation.lg}'
    transition: all 200ms ease-out
  input-field:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.on-surface}'
    typography: '{typography.body-md}'
    rounded: 23px
    padding: 8px 16px
    border: 1px solid {colors.outline-variant}
    height: 40px
  input-field-focus:
    borderColor: '{colors.primary}'
    boxShadow: 0 0 0 3px rgba(60, 219, 192, 0.1)
    transition: border-color 200ms ease-out, box-shadow 200ms ease-out
  badge:
    backgroundColor: '{colors.tertiary-container}'
    textColor: '{colors.on-tertiary-container}'
    typography: '{typography.label-sm}'
    rounded: '{rounded.full}'
    padding: 4px 12px
    display: inline-block
  list-item:
    backgroundColor: transparent
    rounded: '{rounded.md}'
    padding: '{spacing.sm}'
    textColor: '{colors.on-surface}'
  list-item-hover:
    backgroundColor: '{colors.surface-container-low}'
    textColor: '{colors.primary}'
    transition: all 150ms ease-out
  modal-overlay:
    backgroundColor: rgba(0, 0, 0, 0.5)
    backdropFilter: blur(4px)
  modal-content:
    backgroundColor: '{colors.surface}'
    rounded: 24px
    padding: '{spacing.lg}'
    boxShadow: '{elevation.lg}'
    border: 1px solid {colors.outline-variant}
---

## Overview

## Colors

## Typography

## Layout

## Elevation & Depth

## Shapes

## Components

### Action Elements
Buttons are the primary interaction pattern. The primary button uses turquoise background (#3cdbc0), white text, 48px height, 8px 32px padding, full border-radius, and label-md typography (14px, 700 weight). On hover, the background transitions to the primary-fixed-dim (#25d8c9) over 200ms. Secondary buttons use a light gray background (#cccccc), dark text, 40px height, 6px 34px padding, and 6px border-radius (not full). Tertiary buttons (for premium actions) use the deep purple (#601cbd) with white text and full border-radius. All buttons must have a minimum touch target of 44px height on mobile.

### Containers & Surfaces
Cards are the primary container pattern: white background, 24px border-radius, 24px padding, 1px border in outline-variant (#cccccc), and elevation.

## Do's and Don'ts

**Do**
- Do use the turquoise primary (#3cdbc0) on all CTAs, focus states, and brand moments—it's the signature color and must be instantly recognizable.
- Do pair Anton headlines with Museo Sans body text; never reverse this pairing or mix them within a single text block.
- Do use full border-radius (9999px) exclusively on buttons to signal interactivity; use 24px radius on cards and containers.
- Do apply elevation.md shadow (0 3px 8px rgba(0, 0, 0, 0.15)) to all cards and elevated surfaces; never use harsh or inset shadows.
- Do maintain 24px gutter spacing on mobile and 40px on desktop; never compress whitespace to fit content.
- Do use the deep purple (#601cbd) sparingly—only for secondary CTAs, modals, and premium messaging—to preserve its impact.

**Don't**
- Don't use the turquoise primary on backgrounds or large surface areas; it's an accent color for interactive elements only.
- Don't mix Anton and Museo Sans weights arbitrarily; follow the typography hierarchy strictly (Anton for headlines, Museo Sans for body).
- Don't use sharp corners (0px border-radius) on buttons, cards, or inputs; minimum radius is 6px, full radius for buttons.
- Don't apply multiple shadows or layer shadows; use only one shadow value from the elevation scale per element.
- Don't use the tertiary gold (#ffad00) on interactive elements; reserve it for badges, highlights, and non-critical accents.
- Don't reduce padding or margins to fit content; instead, redesign the layout or break content into multiple sections.

Edit, then copy or download.