# SweetTape design system

> SweetTape design system measured from sweet-tape.com: futura-pt-condensed font, #B6FE00 primary, 7 color hex codes, type scale, spacing and a free DESIGN.md.

Canonical page: https://sitepeel.dev/design-md/sweet-tape.com/

SweetTape’s website (sweet-tape.com) uses the futura-pt-condensed font and #B6FE00 as its main color on a #034102 background. Measured by Sitepeel on November 6, 2026.

## What font does SweetTape use?

SweetTape uses futura-pt-condensed (weights 400, 700 and 800) and Inter Tight Variable (weights 400 and 500) on sweet-tape.com. Page titles are 550px at weight 800 (357.5px on phones) and body text is 16px. Measured on November 6, 2026.

- futura-pt-condensed (weights 400, 700, 800)
- Inter Tight Variable (weights 400, 500)

## SweetTape colors: palette and hex codes

SweetTape’s main colors are #034102 (deep green) for the background, #FFFFFF (white) for text and #B6FE00 (vivid lime) as the main accent, with #D7791A (orange) as another accent. Measured on November 6, 2026.

- #034102: deep green
- #FFFFFF: white
- #013900: deep green
- #B6FE00: vivid lime
- #000000: near black
- #D7791A: orange

## What is SweetTape built with?

SweetTape’s website (sweet-tape.com) is built with Payload, Next.js, React, GSAP and Three.js. Measured on November 6, 2026.

- Site builder & CMS: Payload
- JavaScript framework: Next.js 16.2.12, React 19.3.0-canary-3f0b9e61-2
- Animation & 3D: GSAP 3.15.0, Three.js r185
- Fonts & icons: Adobe Fonts
- Analytics: Google Analytics

## Questions and answers

### What font does SweetTape use?

SweetTape’s website uses futura-pt-condensed (weights 400, 700 and 800) and Inter Tight Variable (weights 400 and 500). Page titles are 550px at weight 800 (357.5px on phones) and body text is 16px. Measured on November 6, 2026.

### What are the SweetTape colors and hex codes?

On sweet-tape.com: #034102 (deep green) for the background, #FFFFFF (white) for text and #B6FE00 (vivid lime) as the main accent, with #D7791A (orange) as another accent. The color palette above lists all 7 colors with their hex codes and where each one is used.

### What is the SweetTape design system?

The design system on this page is sweet-tape.com’s, as measured on November 6, 2026: futura-pt-condensed type, #B6FE00 as the main color and pill-shaped corners, written down as a DESIGN.md. It is not SweetTape’s own documentation.

### What is SweetTape built with?

SweetTape’s website (sweet-tape.com) is built with Payload, Next.js, React, GSAP and Three.js. The full tech stack Sitepeel found: Payload, Next.js, React, GSAP, Three.js, Adobe Fonts and Google Analytics. Measured on November 6, 2026.

### What is the SweetTape DESIGN.md?

A plain-text file with SweetTape’s measured colors, type, spacing, corners and components as tokens, plus short rules, in the DESIGN.md format Google published with Stitch. Your AI coding agent reads it and builds in this style. More about DESIGN.md.

### How do I use it with Claude Code or Cursor?

Download the file and put it in your project’s root folder, then ask your agent to follow DESIGN.md. Step-by-step guides: Claude Code, Cursor, Codex, GitHub Copilot.

### Is this SweetTape’s official design system?

No. Sitepeel measured it from sweet-tape.com’s public page on November 6, 2026. It is an independent analysis, not made or approved by SweetTape.

### Can I use SweetTape’s style in my own product?

Use it to learn, prototype and compare. For a real product, make the style your own, and never copy SweetTape’s logo, name, pictures or text.

### How accurate are the values?

Each value was measured on the rendered page after it fully loaded, on desktop and mobile: colors where they appear, type with tracking, spacing, corners, shadows and hover states. Sites change, so check the date at the top.

## Files

- [DESIGN.md](https://sitepeel.dev/design-md/sweet-tape.com/DESIGN.md): the plain file to put in your project.
- [All brand DESIGN.md files](https://sitepeel.dev/design-md/examples/index.md)

Independent analysis by Sitepeel (sitepeel.dev), not affiliated with SweetTape.

## The DESIGN.md file

```markdown
---
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).

```