Future Three — Design System Reference

1. Visual Theme & Atmosphere

Future Three presents itself as “A Creative Studio” that crafts “brands & digital experiences that seamlessly blend functionality with aesthetics,” and the interface behaves like an editorial broadsheet that has been set in motion. A soft grey canvas (rgb(241, 241, 241)) alternates with full-bleed black sections (rgb(0, 0, 0)), so scrolling feels like turning between a printed page and a darkened screening room. Type does the heavy lifting: a Neue Haas Grotesk pair carries the interface, an Arizona-style serif appears at display size with extreme negative tracking, and a tiny uppercase mono handles labels. A single saturated red (#f12a2d) is declared as a token and held in reserve. The site is built on Webflow with GSAP, and a pair of custom easing curves (cubic-bezier(.625,.05,0,1) and cubic-bezier(.32,.12,.2,1)) suggests motion is a first-class part of the brand. Tone is confident, tightly typeset, and editorial rather than decorative.

2. Color Palette & Roles

Foundation

• rgb(241, 241, 241) / #f1f1f1 — page canvas and contact panel (--off-white)
• rgb(36, 32, 33) / #242021 — warm ink for links, button fills and input text (--off-black)
• rgb(51, 51, 51) — default body and main text colour
• rgb(0, 0, 0) — full-bleed section backgrounds and nav text (--black)
• white — --white token, and the thin div.line dividers at rgb(255, 255, 255)

Accent

• #f12a2d — signal red (--red), declared as a token and kept for emphasis only

Form surfaces

• rgb(227, 227, 227) — input background
• rgb(204, 204, 204) — input border
• rgb(36, 32, 33) — input text

Inverted treatment

• Buttons invert the page: rgb(36, 32, 33) background with rgb(241, 241, 241) text and border.
• The h1 is set in rgb(241, 241, 241), which means it lives on the black sections, not on the grey canvas.

The system is bi-tonal at the frame level (grey and black), with warm off-black ink softening the harshness of pure black on light surfaces.

3. Typography Rules

Three families form a clear division of labour: a grotesk for the interface, a serif for dramatic display moments, and a mono for micro-labels.

Typefaces

• Neue Haas Display (as declared: "Neuehaasdisplay Mediu", weight 500, and "Neuehaasdisplay Roman", weight 400) — headings, links, paragraphs, form controls; Arial fallback
• ABC Arizona Serif (Abcarizonaserif, weight 300) — the single serif voice, used on h2
• PP Supply Mono (Ppsupplymono-new) — labels only

Scale

Principles

• Line-height is set below the font size on most display roles (h1 53.7px on 50.5px, h2 65.2px on 52.2px), producing the tight, stacked headline look.
• The serif h2 carries tracking of -5.22px, about 8% of its size, an aggressive squeeze that turns a light serif into a graphic shape.
• Links are large (34.5px) and medium weight, so navigation reads as typography rather than UI.
• Labels drop to 9.6px mono, uppercase, with positive tracking, the only place tracking opens up.
• Sizes are fluid: --size-font is computed from --size-container (clamped between 992px and 2560px against a 1440 ideal and a 16 unit), so type scales with the viewport instead of jumping at breakpoints.

4. Component Stylings

Buttons

• Background rgb(36, 32, 33), text and border rgb(241, 241, 241)
• 15.35px Neue Haas Roman, weight 400, line-height 20px

Links

• Transparent background, ink rgb(36, 32, 33) text
• 34.53px medium weight with -1.04px tracking, which makes primary navigation (Studio, Work, Contact) a typographic gesture

Inputs and textarea

• Background rgb(227, 227, 227), border rgb(204, 204, 204), text rgb(36, 32, 33)
• 15.35px Neue Haas Roman with -0.46px tracking
• Contact form fields are Your Name, Company Name, Email Address and Your Message, with a Submit action and inline success and error messages

Labels

• PP Supply Mono, 9.59px, uppercase, +0.48px tracking

Border radius

• 3.83693px — a hairline softening, the only radius extracted

Shadows

• None detected.

Interactive states

• No hover or focus states were captured; interaction is expressed through GSAP-driven motion and the two easing curves.

5. Layout Principles

• body and main reset padding and margin to 0px, so sections run edge to edge and spacing is owned by the sections themselves.
• The layout is container-driven: width is clamp(992px, 100vw, 2560px) against a 1440 reference, and a root 16 unit scales proportionally.
• Sections alternate between grey (rgb(241, 241, 241)) and black (rgb(0, 0, 0)) bands.
• Thin div.line rules, in white and in rgb(36, 32, 33), divide content within sections.
• Content structure on the live site is numbered and editorial: a featured work block, an About block, a footer with address, phone, email, a local-time clock and language toggle.
• Breakpoints at 479 / 767 / 768 / 991, the standard Webflow set.

6. Depth & Elevation

Depth is flat. No box-shadow was extracted. The layering cues are:

• Surface swap — rgb(241, 241, 241) panels (the contact-inner block, luminance 0.945) against rgb(0, 0, 0) sections (luminance 0).
• Ink vs paper — rgb(36, 32, 33) (luminance 0.131) separates dark controls and dividers from pure black.
• Motion — GSAP and the custom easings supply the sense of layering during transitions, not static elevation.

7. Do’s and Don’ts

Do

• Alternate rgb(241, 241, 241) and rgb(0, 0, 0) sections for rhythm.
• Pair a medium-weight grotesk with one light serif at display size, and squeeze the serif hard (-5.22px at 65px).
• Keep display line-heights below the font size for stacked headlines.
• Use PP Supply Mono at under 10px, uppercase, for labels.
• Use rgb(36, 32, 33) rather than pure black for ink on light surfaces.
• Reserve #f12a2d for rare emphasis.
• Use cubic-bezier(.625,.05,0,1) for primary motion and cubic-bezier(.32,.12,.2,1) for softer movement.

Don’t

• Don’t add drop shadows; the system has none.
• Don’t use the serif for body or UI text; it appears only at display size.
• Don’t use bold weights; headings top out at 500.
• Don’t round corners beyond roughly 4px.
• Don’t spread the red across UI chrome.

8. Responsive Behavior

Four breakpoints at 479, 767, 768 and 991 follow Webflow’s defaults. Typography is the real responsive mechanism: font sizes derive from a container variable clamped between 992px and 2560px, so type grows and shrinks proportionally with the viewport rather than at fixed steps. Below the 992px container floor the layout falls to the Webflow breakpoints. The footer content (address, phone, email, language switch, local time) stacks as an information block on the live site.

9. Agent Prompt Guide

Build a UI that matches Future Three’s design language.

Use a light grey canvas rgb(241, 241, 241) alternating with full-bleed black rgb(0, 0, 0) sections, and warm ink rgb(36, 32, 33) for links and buttons on light surfaces. Set interface type in Neue Haas Display (medium 500 for headings, links and paragraphs, roman 400 for body, buttons and inputs) at around 15.35px body size. Make h1 about 53.7px with -1.6px tracking and line-height slightly below the size. Set h2 in ABC Arizona Serif weight 300 at about 65px with -5.2px tracking. Make navigation links large, around 34.5px medium with -1px tracking. Labels use PP Supply Mono at 9.6px, uppercase, +0.48px tracking. Buttons are rgb(36, 32, 33) with rgb(241, 241, 241) text and border. Inputs sit on rgb(227, 227, 227) with an rgb(204, 204, 204) border. Use a 3.8px radius and no shadows. Keep #f12a2d as a rare accent. Drive motion with cubic-bezier(.625,.05,0,1) and scale type fluidly from a clamped container width. Let the typography and the grey-black rhythm carry the identity.

Generated by Sparkbites — extracted from live CSS analysis