SweetTape design system

---
version: alpha
name: SweetTape
description: "Dark interface measured from sweet-tape.com: futura-pt-condensed type with Inter Tight Variable, vivid lime accents, flat surfaces and pill-shaped controls."
colors:
  background: "#034102"
  surface: "#034102"
  on-surface: "#FFFFFF"
  on-background: "#FFFFFF"
  outline: "#013900"
  primary: "#B6FE00"
  on-primary: "#000000"
  secondary: "#D7791A"
  warning: "#FFDC13"
typography:
  headline-display:
    fontFamily: futura-pt-condensed
    fontSize: 550px
    fontWeight: 800
    lineHeight: 0.82
    letterSpacing: -0.005em
  headline-lg:
    fontFamily: futura-pt-condensed
    fontSize: 293px
    fontWeight: 800
    lineHeight: 0.73
  headline-md:
    fontFamily: futura-pt-condensed
    fontSize: 40px
    fontWeight: 800
    lineHeight: 1
    letterSpacing: -0.018em
  body-md:
    fontFamily: futura-pt-condensed
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
  label-lg:
    fontFamily: futura-pt-condensed
    fontSize: 20px
    fontWeight: 700
    lineHeight: 0.9
    letterSpacing: -0.03em
  label-md:
    fontFamily: Inter Tight Variable
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
  label-sm:
    fontFamily: Inter Tight Variable
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1
  headline-lg-mobile:
    fontFamily: futura-pt-condensed
    fontSize: 125px
    fontWeight: 800
    lineHeight: 0.72
  headline-display-mobile:
    fontFamily: futura-pt-condensed
    fontSize: 357.5px
    fontWeight: 800
    lineHeight: 0.82
    letterSpacing: -0.005em
rounded:
  sm: 6.05px
  md: 25px
  lg: 77px
  xl: 175px
  full: 9999px
spacing:
  xs: 3.6px
  sm: 6px
  md: 9.76px
  lg: 25.6px
  xl: 37.44px
  gutter: 8.93px
  section: 148.84px
components:
  button-primary:
    backgroundColor: "#F4F3EF"
    textColor: "{colors.outline}"
    typography: "{typography.body-md}"
    rounded: 0px
    padding: 0px
    height: 88px
  button-secondary:
    backgroundColor: "{colors.on-surface}"
    textColor: "#E3E8E0"
    rounded: "{rounded.full}"
    padding: 0px
    height: 39px
  button-ghost:
    textColor: "{colors.outline}"
    typography: "{typography.body-md}"
    rounded: 0px
    padding: 0px
  card:
    textColor: "{colors.outline}"
    typography: "{typography.headline-display}"
    rounded: "{rounded.lg}"
    padding: 0px
  link:
    textColor: "{colors.outline}"
---

# SweetTape Design System

## Overview

SweetTape describes itself as: “Six tapes made in Malaysia, one for every job — cloth, masking, stationery, double-sided and more. Three generations of tape; meet the one who sticks.” The interface is dark, built on **Deep Green (#034102)** with **White (#FFFFFF)** text, and **Vivid Lime (#B6FE00)** as the main accent.

Type is set in **futura-pt-condensed** and **Inter Tight Variable**. Headlines run large with tight negative tracking; body text is 16px. Depth comes from soft drop shadows. Controls are pill-shaped.

Measured from [sweet-tape.com](https://sweet-tape.com/) on November 6, 2026 at 1440×900 and 390×844 from 202 rendered elements. Values are computed styles from the live page, not the original source files.

## Colors

The palette has 7 roles, plus gradient stops #B6FE00, #013900, #D7791A.

- **Deep Green (#034102):** Page background, seen 4 times. Token `background`, CSS `--about-bg`.
- **White (#FFFFFF):** Primary text and headings. Token `on-surface`.
- **Deep Green (#013900):** Borders and dividers, seen 2 times. Token `outline`, CSS `--sb-track`.
- **Vivid Lime (#B6FE00):** Brand color on large areas, seen 21 times. Token `primary`, CSS `--sb-thumb`.
- **Near Black (#000000):** Text and icons on primary. Token `on-primary`.
- **Orange (#D7791A):** Accent in text, fills and borders, seen 4 times. Token `secondary`.
- **Vivid Amber (#FFDC13):** Warnings and highlights, seen 4 times. Token `warning`.

## Typography

**futura-pt-condensed** and **Inter Tight Variable** share the interface. Fallback stack: `futura-pt-condensed, Futura PT Condensed, Futura PT Cond, Futura`. Other loaded fonts: Nothing You Could Do.

- **headline-display:** futura-pt-condensed 550px at weight 800, line height 0.82, tracking -0.005em (357.5px on mobile). Page title (h1).
- **headline-lg:** futura-pt-condensed 293px at weight 800, line height 0.73 (125px on mobile). Section headings (h2).
- **headline-md:** futura-pt-condensed 40px at weight 800, line height 1, tracking -0.018em. Sub-section headings.
- **body-md:** futura-pt-condensed 16px at weight 400, line height 1.5. Body text.
- **label-lg:** futura-pt-condensed 20px at weight 700, line height 0.9, tracking -0.03em, uppercase. Large buttons and tabs.
- **label-md:** Inter Tight Variable 16px at weight 400, line height 1.5. Buttons, navigation and labels.
- **label-sm:** Inter Tight Variable 13px at weight 500, line height 1. Small labels and badges.

## Layout

Spacing does not follow a strict grid: 0% of measured values are multiples of 4px, so match the measured steps rather than rounding to a grid.

- **Scale:** xs 3.6px, sm 6px, md 9.76px, lg 25.6px, xl 37.44px.
- **Sections:** 148.84px vertical padding between major sections.
- **Gaps:** 8.93px is the most common gap in flex and grid layouts.
- **Breakpoints:** 743px, 744px, 1279px.

## Elevation & Depth

Raised elements use soft drop shadows. The most used recipes:

- `rgba(0, 0, 0, 0.34) -10.0099px 14.2998px 0.288px 0px`
- `rgb(255, 255, 255) 0px 0px 0px 2.016px inset, rgba(0, 0, 0, 0.14) 0px 4.32px 12.96px 0px`

## Shapes

Interactive controls are pill-shaped. Measured radii, most used first:

- **full (9999px):** 40 elements.
- **sm (6.05px):** 24 elements.
- **md (25px):** 16 elements.
- **lg (77px):** 12 elements.
- **xl (175px):** 4 elements.

## Components

Measured from the rendered page. Token values reference the tokens above.

- **button-primary (“PULL ME”):** #F4F3EF fill, #013900 text, 16px/400, padding 0px.
- **button-secondary (“Sound”):** #FFFFFF fill, #E3E8E0 text, 16.56px/400, 1440px radius, padding 0px, border 1px solid #013900.
- **button-ghost (“PULL ME”):** transparent fill, #013900 text, 16px/400, padding 0px.
- **card:** transparent fill, #013900 text, 549.994px/800, 76.9991px radius, padding 0px, shadow `rgba(0, 0, 0, 0.34) -10.0099px 14.2998px 0.288px 0px`.
- **link:** transparent fill, #013900 text, padding 0px.

## Do's and Don'ts

- Do use #034102 for the page.
- Do use #B6FE00 as the brand accent: header, logo and key highlights.
- Do set headlines in futura-pt-condensed with tight tracking (-0.005em).
- Do reuse the measured spacing steps (6px, 9.76px, 25.6px).
- Do make buttons and chips fully rounded (9999px); most other elements use 6.05px corners.
- Don't introduce new font families beyond futura-pt-condensed and Inter Tight Variable.
- Don't use #B6FE00 for large backgrounds or body text.
- Don't make interface transitions slower than 0.4s.

## Motion

Interface transitions are quick: 0.22s, 0.4s, 0.25s. Longer ambient animations run 0.75s.

- **Easing:** `cubic-bezier(0.16, 0.84, 0.3, 1)`, `cubic-bezier(0.34, 1.56, 0.64, 1)`, `cubic-bezier(0.22, 1, 0.36, 1)`.
- **Reduced motion:** the page responds to `prefers-reduced-motion`.

Generated by [Sitepeel](https://sitepeel.dev/design-md/sweet-tape.com/), the free DESIGN.md generator (engine 2026.10.29+b828a475ee10).