Turnstyle

Interactive one-page music website celebrating Inc. Best Places to Work

Creator

ThreeSixtyEight

threesixtyeight.com

Platform

Webflow

Custom code + Webflow CMS

Type

Single Page

Interactive music experience

Dependencies

jQuery UI + Lottie

Draggable stickers, button animations

CSS Winner STAR One Page Love Award

Colors

Brand brushwork rooted in turnstyle culture: bold primaries against near-black

Core Brushwork

#1A171D

Near Black

Primary text, borders (0.15vw solid), dark backgrounds, button inner circles, hero welcome section

#F7594A

Red / Autopilot

Primary brand, logo background, button outer rings, text selection background, form input color, error messages

#0080DE

Blue

NOW SPINNING bar, progress bar fill, blue buttons, blue speaker, time text, second social square

#FFCD27

Yellow

Yellow buttons, yellow speaker, first social square, success message background

Supporting Brushwork

#FFE3E2

Light Pink

Volume section background, controls background, follow top bar, third social square, welcome text color

#FFFFFF

White

Navigation background, form block background, NOW SPINNING text, heading text

#C9C1A7

Tan

CTA / work button background

#E7E7E8

Light Gray

Progress bar track background

#C7C7CA

Placeholder Gray

Form input placeholder text

Text Selection

Try selecting this text to see the branded selection highlight: background #F7594A, text #1A171D, no text-shadow.

Typography

Dual typeface system using viewport-relative units throughout

Typefaces

Primary Body — Termina

Termina Bold — Aa Bb Cc Dd 0123

Termina Regular — Aa Bb Cc Dd 0123

Adobe Typekit (xix5dph) weight: 400, 700 body, labels, nav text

Note: Termina is not available via Google Fonts. This reference uses system sans-serif as a stand-in. The actual font is loaded via Typekit ID xix5dph.

Headings / Forms — Helvetica Now Display

Helvetica Now Display Black — Aa Bb Cc

Helvetica Now Display Medium — Aa Bb Cc

weight: 500, 900 form text, headings font-size: 210%

Type Scale

All sizes use viewport-relative units (vw, %). Body font-size is 0.8vw at desktop.

Turnstyle

300% / weight 900

Section Heading

160% / weight 700 / uppercase

Subsection Title

1.6em / weight 700

Small Heading / Label

14px / weight 700

Song Title Style

135% / weight 700

Body

Body text uses Termina Bold at 0.8vw with tight letter-spacing.

0.8vw / 700 / 1.4 / 0.1vw ls

Form

My name is Chris

210% / Helvetica Now Display

Form Head

Form heading at 2.4vw

2.4vw / weight 700 / line-height 1.1

Special Text Behaviors

Vertical Text

Song title, artist name, and time text in the desktop nav use writing-mode: vertical-rl with text-orientation: mixed. Rotated 180deg for right-to-left reading.

NOW SPINNING Label

Uses vertical writing mode on tablet/mobile (writing-mode: vertical-rl). Paystreamtal on desktop within the 5vw-tall blue bar.

Viewport Units

Everything scales with viewport width. Body is 0.8vw, headings use % of that base, letter-spacing is 0.1vw. This creates a fully fluid layout.

Buttons

Circular buttons with inner dark circle and colored outer ring, plus CTA offset-shadow buttons

Circular Buttons — Standard (5.8vw)

Red

Yellow

Blue

Circular Buttons — Large (8.2vw)

Play / Red

Shuffle / Yellow

Next / Blue

Hover: filter brightness(85%). Active: transform scale(0.95). Inner circle is #1A171D with border-radius: 100vw. Outer ring border: 0.12vw (std) / 0.15vw (large) solid #1A171D.

Button Anatomy

                            CSS
                        

/* Outer ring */
.c-button_img {
  background-color: #F7594A;    /* or #FFCD27 / #0080DE */
  border: 0.12vw solid #1A171D;
  border-radius: 100vw;
}

/* Inner dark circle */
.c-button_circle {
  width: 5vw;      /* 7vw for large */
  height: 5vw;     /* 7vw for large */
  background-color: #1A171D;
  border-radius: 100vw;
}

/* States */
.c-button:hover  { filter: brightness(85%); }
.c-button:active { transform: scale(0.95); }
                        

CTA / Work Button

Work with us

Default

Submit

Submit Variant

Background: #C9C1A7. Border: 0.15vw solid #1A171D. Border-radius: 0.7vw. Padding: 0.8vw 1vw. Shadow layer is a #1A171D div at z-index 1, face at z-index 2 offset right by -1vw.

Navigation

Fixed left sidebar (desktop) or bottom bar (mobile) with audio player integration

Desktop & Mobile Variants

DaDa - Ian Post

NOW SPINNING

Desktop (10vw sidebar)

DaDa

Ian Post

NOW SPINNING

Mobile (bottom bar)

Nav Specifications

Desktop Sidebar

Width: 10vw, fixed left, full viewport height. Background: #FFFFFF. Border-right: 0.15vw solid #1A171D. Z-index: 1000.

Logo Block

10vw x 10vw square. Background: #F7594A. Border-bottom: 0.15vw solid #1A171D. Logo SVG at 55% width.

NOW SPINNING Bar

Height: 5vw. Background: #0080DE. Border-top: 0.15vw solid #1A171D. White text, centered.

Album Art

6vw x 6vw. Object-fit: cover. Border: 0.15vw solid #1A171D. Rotated -90deg to match vertical orientation.

Mobile Variant

Full-width bottom bar. Logo: 100px x 100px. Border-top: 1.5px solid #1A171D. NOW SPINNING becomes 52px wide vertical strip.

Progress Bar

Audio playback progress indicator

Fill Levels

25%

50%

75%

100%

Track: #E7E7E8. Fill: #0080DE. Height: 0.5vw (min-height: 8px). Border-radius: 100vw (pill shape). Uses HTML5 <progress> element with custom WebKit/Moz styling.

Vertical Variant (Desktop Nav)

35%

65%

In the desktop sidebar, the progress bar is vertical (width: 0.5vw, height: 9vw). Fill grows from bottom to top.

Speakers

Large and small speaker components with frame overlays and corner plus icons

Speaker Layout

Speaker Specifications

Large Speaker

40vw x 40vw. Border-right: 0.15vw solid #1A171D. Contains frame overlay SVG, video background at 75% size, and speaker image at 74% width.

Small Speakers

20vw x 20vw each, stacked vertically. First: #0080DE blue background. Second: #FFCD27 yellow with top border. Speaker image at 60%.

Corner Plus Icons

4vw x 4vw at each corner of the large speaker. Hover: rotate(45deg) with transition: all 0.2s. Active: scale(1.2) rotate(45deg).

Frame Overlay

Full-size absolute positioned SVG overlay (speaker-frame.svg). Background-size: cover. Creates the physical speaker grille effect over video content.

Stickers

14 draggable decorative SVG elements scattered across the left panel

Sticker Field (Interactive Demo)

368

INC

PLAY

VINYL

TSE

MIX

BPM

SPIN

14 SVG stickers positioned absolutely within a 30vw container. Width ranges from 8vw to 23vw. Cursor: move. Active: scale(1.07) with 0.15s transition. Z-index increases on click (jQuery UI draggable). Stickers container sits at z-index: 300.

Sticker Sizes

Variant	Width	Position (top / left)
Default (is--1)	`12vw`	6vw / 5vw
is--5	`17vw`	14vw / 12vw
is--7	`22vw`	19vw / 4vw
is--9	`23vw`	28vw / -5vw
is--10, is--14	`8vw`	varies
is--11	`14vw`	17vw / -1vw
is--12	`15vw`	6vw / -2vw
is--16	`22vw`	0 / -6vw

Forms

Inline form with conversational layout using Helvetica Now Display

Form Input Pattern

My name is

and my email is

Form Specifications

Form Block

Width: 60vw. Background: #FFFFFF. Border-bottom: 0.15vw solid #1A171D. Padding: 0 2vw / 0 4vw.

Input Fields

Width: 22vw. Height: 4vw. Color: #F7594A. Border-bottom only: 0.15vw solid #1A171D. Font: Helvetica Now Display, 210%, weight 900.

Placeholder

Color: #C7C7CA. Same font size and family as input value.

Labels

Inline with inputs. Font: Helvetica Now Display, 210%, weight 500. Color: #1A171D. White-space: nowrap.

Success State

Background: #FFCD27. Full z-index: 20 overlay. Contains red heading text (#F7594A) and TSE sticker.

Error State

Color: #F7594A. Background: transparent. Centered text. Padding: 1.9em 1vw.

Grid & Sizing

Viewport-relative sizing system with universal border treatment

Page Structure

NAV
10vw

Full page content area padding-left: 10vw

Hero Section

Hero Left 30vw

Hero Right (Record / Turntable) 60vw

Speaker Section

Merch30vw

Large Speaker40vw

Blue 20vw

Yellow 20vw

Footer Section

Follow30vw x 20vw

Social 20vw

Universal Border

All section dividers and component borders use 0.15vw solid #1A171D. On tablet (max-width: 991px), this changes to fixed 1.5px solid #1A171D. The .is--outlined utility class applies 0.1vw solid #1A171D.

Key Dimensions

Element	Width	Height
Navigation sidebar	`10vw`	`100vh`
Logo block	`10vw`	`10vw`
NOW SPINNING bar	`100%`	`5vw`
Hero left	`30vw`	auto
Hero right	`60vw`	auto
Welcome section	`30vw`	auto (padded 3.5vw)
Volume section	`20vw`	`32.5vw`
Large speaker	`40vw`	`40vw`
Small speakers	`20vw`	`20vw` each
Social squares	`20vw`	`20vw`
Follow section	`30vw`	`20vw`
Merch section	`30vw`	auto
Form heading	`30vw`	auto
Form block	`60vw`	auto

Breakpoints

Responsive adaptations from full desktop to mobile

Breakpoint	Trigger	Key Changes
Desktop	`> 992px`	Full layout. Nav: 10vw left sidebar. Body font-size: 0.8vw. All borders: 0.15vw. Vertical text in nav.
Tablet	`≤ 991px`	Body font-size: 10px. Nav moves to bottom (100vw wide). Borders switch to 1.5px fixed. H1: 270%. Logo: 100px fixed. Album art goes paystreamtal.
Small Tablet	`≤ 767px`	H1: 3.6vw. Further layout compression. Form blocks reduce padding.
Mobile	`≤ 479px`	H1: 8.5vw. Full-width stacked sections. Speaker and social sections stack vertically. Stickers reposition for narrow viewport.

CSS Variables

Copy-paste ready custom properties block

                        CSS Custom Properties
                    

:root {
  /* ---- Colors ---- */
  --color-black:           #1A171D;
  --color-red:             #F7594A;
  --color-blue:            #0080DE;
  --color-yellow:          #FFCD27;
  --color-pink:            #FFE3E2;
  --color-white:           #FFFFFF;
  --color-tan:             #C9C1A7;
  --color-gray-light:      #E7E7E8;
  --color-gray-placeholder: #C7C7CA;

  /* ---- Typography ---- */
  --font-body:             Termina, sans-serif;
  --font-heading:          Helvetica Now Display, sans-serif;
  --font-size-body:        0.8vw;
  --font-weight-body:      700;
  --line-height-body:      1.4;
  --letter-spacing-body:   0.1vw;

  /* ---- Borders ---- */
  --border-width:          0.15vw;
  --border-color:          #1A171D;
  --border:                0.15vw solid #1A171D;
  --border-outlined:       0.1vw solid #1A171D;
  --border-radius-pill:    100vw;
  --border-radius-cta:     0.7vw;

  /* ---- Layout ---- */
  --nav-width:             10vw;
  --hero-left-width:       30vw;
  --hero-right-width:      60vw;
  --speaker-large:         40vw;
  --speaker-small:         20vw;
  --social-square:         20vw;
  --logo-size:             10vw;
  --spinning-height:       5vw;

  /* ---- Buttons ---- */
  --button-standard:       5.8vw;
  --button-large:          8.2vw;
  --button-circle-std:     5vw;
  --button-circle-lg:      7vw;
  --button-border-std:     0.12vw;
  --button-border-lg:      0.15vw;

  /* ---- Transitions ---- */
  --transition-fast:       0.15s ease;
  --transition-standard:   0.2s ease;

  /* ---- Progress Bar ---- */
  --progress-height:       0.5vw;
  --progress-min-height:   8px;
  --progress-track-color:  #E7E7E8;
  --progress-fill-color:   #0080DE;

  /* ---- Tablet Overrides (max-width: 991px) ---- */
  /* --border-width: 1.5px;
     --font-size-body: 10px;
     --nav-width: 100vw (bottom bar); */
}
                    

                        Text Selection Override
                    

::selection {
  background: #F7594A;
  color: #1A171D;
  text-shadow: none;
}

::-webkit-scrollbar {
  width: 0px;  /* Hidden scrollbar */
}
                    

Interactions & Animations

Motion design, hover states, and interactive behaviors

Component Interactions

Button Hover

filter: brightness(85%)
Applied to the entire button container. Subtle darkening effect on all color variants.

Button Active

transform: scale(0.95)
Press-in effect. Combined with brightness reset to default.

Sticker Drag

cursor: move
jQuery UI draggable. Active state: scale(1.07) with 0.15s transition. Z-index stacking on mousedown.

Speaker Plus (+) Icons

Hover: rotate(45deg) via transition: all 0.2s
Active: scale(1.2) rotate(45deg). Becomes an X shape.

Audio Player

Custom HTML5 <audio> with <progress> element. ontimeupdate fires initProgressBar(). Mouse click/up sounds on UI interactions.

Lottie Animations

Shuffle, next, and prev button icons use Lottie JSON animations. Power button also has a Lottie toggle animation (6vw wide).

Record Arm

Positioned absolutely with transform-origin: 100% 0. Rotated -26deg. Webflow IX2 animation controls arm movement on play/pause.

Hand Animation

Width: 24vw. Origin: 100% 100% (bottom-right). Default rotation: 36deg. Webflow IX2 animates the hand scratching motion.

Volume Slider

Custom <input type="range">. Rotated -90deg for vertical orientation. Thumb: 10vw x 3vw with custom SVG background image. Track is invisible (transparent).

Page Scroll

Hidden scrollbar via ::-webkit-scrollbar { width: 0px }. Content scrolls freely within .c-contain (overflow: hidden on container).

Sound Effects

Two <audio> elements for mouse-down and mouse-up click sounds. Triggered on button interactions for tactile feedback.

No-Click Zones

.c-hero_sticker, .c-record, .c-merch, .c-form_heading all use pointer-events: none. Prevents interaction with decorative elements.

Tailwind Mapping

The paired JSON export now includes a tailwind section with theme extensions and component recipes. Use these mappings instead of default Tailwind tokens when recreating this system.

// tailwind.config.js
import designSystem from './design-system.json';

export default {
  theme: {
    extend: designSystem.tailwind.website.theme.extend,
  },
};

// Swap to designSystem.tailwind.app.theme.extend for app/portal surfaces.

Scope	Primary	Body Font	Radius	Shadow	Breakpoint
Website	`—`	`—`	`—`	`—`	`—`

Scope	Recipe	Class Pattern	Notes
Website	`buttonPrimary`	`inline-flex items-center justify-center gap-2 rounded-md bg-brand-primary text-text-inverse shadow-sm px-4 py-2 font-semibold transition-colors`	Primary action button using exported brand, radius, and shadow tokens.
Website	`surfaceCard`	`rounded-md bg-surface-base text-text-primary border border-border-subtle shadow-sm p-6`	Default surface/card treatment for high-visibility content areas.
Website	`inputField`	`rounded-md border border-border-subtle bg-surface-base text-text-primary px-3 py-2 focus:outline-none focus:ring-2 focus:ring-focus-ring`	Base text input treatment aligned to the exported radius, border, and focus tokens.

Turnstyle

Colors

Core Brushwork

Supporting Brushwork

Text Selection

Typography

Typefaces

Type Scale

Special Text Behaviors

Buttons

Circular Buttons — Standard (5.8vw)

Circular Buttons — Large (8.2vw)

Button Anatomy

CTA / Work Button

Navigation

Desktop & Mobile Variants

Nav Specifications

Progress Bar

Fill Levels

Vertical Variant (Desktop Nav)

Speakers

Speaker Layout

Speaker Specifications

Stickers

Sticker Field (Interactive Demo)

Sticker Sizes

Forms

Form Input Pattern

Form Specifications

Social Squares

Grid & Sizing

Page Structure

Universal Border

Key Dimensions

Breakpoints

CSS Variables

Interactions & Animations

Component Interactions

Tailwind Mapping