# Future Tropical Design System
**Future Tropical** is Sam Feldt's warm-weather house imprint under **Heartfeldt Records** —
tropical house × progressive house, festival-energy, Miami cool, seriously fun but not cheesy.
Nothing pre-existed (no deck, logo, or photography); this system was designed from scratch.
**Relationship to the parent:** a curated sub-imprint with its own identity — new palette, new
type, no shared tokens with Heartfeldt's black/yellow system — running on the parent's
infrastructure. Built on the Foundation-pillar model: FT inherits the backbone (real logo assets,
Sun Yellow `#F6E911`, rounded-terminal radii, fast no-bounce motion, warm feel-good voice,
full-bleed sunny imagery) and flexes only its accent world (fire/night/cream palette + "endless summer"). The deliberate tie-back on every asset is the **Heartfeldt lockup +
Sun Yellow "FUTURE TROPICAL" pill**, top-center (`guidelines/brand/corner-credit.card.html`).
**Subset rule:** everything FT is also Heartfeldt, but not every Heartfeldt release is FT — a
track qualifies only if it passes the 10-point test in
`guidelines/brand/imprint-relationship.card.html`. The parent system sits at `_ds/` purely as a
lockup-convention cross-reference, not a token source.
## Artist brand layer (Sam Feldt Brand Deck v4, 2023)
Between Heartfeldt and FT sits the artist brand — integrated July 2026 from the official deck
(`uploads/Sam Feldt - Brand Deck 2023 - part2.pdf`; distilled in
`guidelines/brand/artist-brand.card.html`):
- **Creative direction: "Seriously Fun"** — a movement of positivity; "if you do something, do
it with your whole heart." Keywords: uplifting, genuine, premium, modern, warm. FT's "endless
summer" is this direction applied to one genre room.
- **Palette lineage:** FT fire-500 is the imprint's warmed take on the artist's Hot Orange
(`#FF6100`); Sunny Yellow (`#F5E90F`) is the same family as the Heartfeldt Sun Yellow pill.
The other artist colors (Party Purple, Lightning Green, Sky Blue) never appear on FT surfaces.
- **Photography rule (adopted verbatim):** feel good · summer · bright · daylight · positive;
artwork adds strong angles + color contrast.
- **Type lineage:** artist brand = Maison Neue Extended + Galaxie Copernicus Italic; FT's
Unbounded/Sora echo the extended-sans-for-titles logic as Google substitutes.
- **Logo rules inherited:** single color, no gradients/effects/multicolor/mirroring/rotation/new
variations.
## Messaging & voice
One throughline drives everything: **the listener is the hero, FT is the
guide**. Controlling idea: *"Future Tropical presses play on endless summer."* Each asset leads
with a different beat (homepage = want + success; cover = success + title; flyer = plan + CTA;
Canvas = success, no text). Full research in `strategy/Messaging-StoryBrand.dc.html`; distilled
in `guidelines/brand/voice.card.html`.
**Voice:** breezy, playful, summer-slang, still credible — never emoji, exclamation stacking, or
corporate tone. Lower-case-led imperative CTAs ("grab tickets", "hear it first", "get the summer
drop"). Talk *to* the crowd about *their* feeling. Sentence case everywhere except the wordmark.
## Visual foundations
**Color — one warm palette, UI and release art unified** (reworked July 2026; supersedes the
original pink/cyan "Miami dusk" direction, which read too neon for the brand):
- **Fire** (`--fire-500`, hover `--fire-600`) is the primary accent/CTA — the release-art glow
brought into the UI. **Ember gold** (`--ember-500`) is the secondary. **Night navy**
(`--night-950/900` — the release-art night sky) is the dark-surface scale; **Sand-050** cream
stays the light paper default. The one signature gradient is now a warm sunset
(fire-700 → fire-500 → amber); max one gradient moment per surface, never a full-bleed wash.
- *Release art* (covers/Canvas/flyers — confirmed by "Need That Love"): **Fire** glow over
**Night-navy**, **Cream** (`--cream-100`) titles — same tokens, deeper register.
- **Sun Yellow** (`--sun-yellow`, `#F6E911`) is reserved system-wide for the FUTURE TROPICAL
pill only.
**Type — two faces, distinct jobs.** **Unbounded** (700–900) for display/headlines and the
wordmark; **Sora** (400–600) for body/UI/captions. Google Fonts substitutions (flagged) — swap if
custom type is commissioned. All sizing runs on one token scale (`tokens/typography.css`):
`--display-2xl…xs` (18–96px), `--text-body-lg/body/body-sm`, `--text-label`, `--eyebrow-size`.
See `guidelines/type/scale.card.html`.
**Layout & imagery:** full-bleed photography by default (poolside, festival, sunset), left as
`<image-slot>` placeholders pending real photography. No illustration, texture, stock, or
AI-generated imagery.
**Shape, shadow, motion:** generous radii (14–22px cards, pill buttons); warm-tinted shadows;
interactive elements get a signature **glow shadow** (`--shadow-glow-fire/-ember`) on hover/press
only — FT's one shape flex. Motion inherited from Heartfeldt: fast, no-bounce (120–200ms,
`--ease-out`), same radii scale (10/16/24/32/pill).
## Iconography & logo
No icon set yet — `Icon.jsx` renders any Lucide glyph via CSS mask (flagged neutral placeholder,
swappable with no consumer-code changes). No emoji or unicode glyphs-as-icons.
**Wordmark:** "FUTURE TROPICAL" as live text in Unbounded 800 — never an image asset.
**Mark (CONFIRMED July 2026):** the **Beam F**
(`assets/logos/future-tropical-mark.svg`; cream variant `-cream.svg` for export/embed contexts —
in UI, render the mark via CSS mask so any token recolors it): a stem with both arms drawn as
concentric arcs swung from one construction center at its base — beams from a single root, like
fronds off a trunk — plus a short left stub at the top for the F/T dual read. The one-center
beam construction descends from the Sam Feldt "beams" logo icon, keeping FT visually family
with the artist and Heartfeldt marks. **One color only** (fire-500 on light, cream-100 on dark; always cream when adjacent to the Sun Yellow pill — fire + yellow clash) — never gradients, effects,
multicolor, or rotation (rules inherited from the artist brand deck).
**Horizontal lockup (official signature, the only sanctioned arrangement):** FUTURE TROPICAL set
on one wide-tracked line (Unbounded 700, .14em letter-spacing) with the solo mark
(`future-tropical-mark.svg` / `-cream.svg`) trailing at the end, like a stamp. Never mirror or
redraw the mark for other arrangements — earlier stacked/tucked lockup concepts are retired.
Scope: UI chrome + owned surfaces; release-facing identity remains the Heartfeldt lockup + Sun
Yellow pill. See `guidelines/brand/mark.card.html`.
## Components, UI kit, templates
Standard primitive set, authored here (none was provided): **Core** (`Button`, `IconButton`,
`Badge`, `Tag`, `Card`, `Icon`) · **Forms** (`Input`, `Select`, `Checkbox`, `Radio`, `Switch`) ·
**Navigation** (`Tabs`) · **Feedback** (`Dialog`, `Toast`, `Tooltip`). Components read only CSS
custom properties from `styles.css`.
`ui_kits/website/` — interactive click-through: Home, Releases (filterable grid), Events (list +
ticket dialog), built entirely from the components above.
Templates: `release-cover/` (social square), `event-flyer/` (portrait poster),
`release-canvas-vertical/` (9:16 Spotify Canvas/Stories/Reels).
## First real release: "Need That Love" (Sam Feldt)
Official final assets (3000×3000 cover, 1080×1920 Canvas still + 8s loop, lyric sheet) live in
`assets/imagery/records/`, `assets/video/`, `assets/lyrics/`. They are the source of truth for
release-art convention and **set the palette the whole system now runs on**:
- Official Heartfeldt lockup top-center on every release asset (never redrawn).
- FUTURE TROPICAL pill in parent-system Sun Yellow with black text, under the lockup.
- Titles set in **Unbounded** (the display face), warm cream, no drop shadow — one face for UI
headlines and cover titles alike (standardized July 2026; the earlier Abril Fatface
release-title serif was retired for consistency).
- Photography: fire-orange/red glow over dusk-navy night — silhouettes, embers, warm/premium.
See `guidelines/brand/first-release.card.html` and `corner-credit.card.html`. The release-cover
and event-flyer templates match, and the website features "Need That Love" as the lead single.
## Release asset specs (researched July 2026)
- **Store cover master:** 3000×3000 px, 1:1, sRGB, JPG/PNG (Spotify caps 4 MB; never upscale).
The 1080×1080 template is design-scale — export masters at 3000×3000.
- **No URLs, dates, prices, brand logos, or barcodes** on cover art (rejection triggers). Test
thumbnail legibility at ~100 px.
- **Spotify Canvas:** 9:16, 1080×1920 (720px min height), 3–8s MP4 loop. Avoid artist/title text
in the Canvas — hence the `showText` toggle on `ReleaseCanvasVertical` (OFF for Spotify, ON
for Stories/Reels). Exactly-8s files sometimes fail upload — the real
`need-that-love-canvas.mp4` is ≈8s; check it uploads, or trim slightly.
Sources: Beatport Greenroom, Moda 2026, Orphiq, MergeImages 2026, Symphonic, Calvin West.
## Index
```
styles.css → entry point (@import list only)
tokens/ → fonts, colors, typography, spacing, effects, base
assets/logos/ → future-tropical-mark.svg + -cream.svg (Beam F)
guidelines/
colors/ → primary, neutrals, signature-gradient
type/ → display, release-title, body, scale
spacing/ → scale, in-use
brand/ → brand-architecture (10-point test), artist-brand (Sam Feldt deck),
first-release, mark & wordmark,
lockup + pill, voice & messaging, shape & motion, motion
strategy/ → Messaging-StoryBrand.dc.html (SB7 BrandScript)
components/ → core/, forms/, navigation/, feedback/
ui_kits/website/ → Home / Releases / Events, interactive
templates/ → release-cover/, event-flyer/, release-canvas-vertical/ (9:16)
SKILL.md → Claude Code-compatible skill wrapper
```