Fwmrm (FreeWheel) Design System Deep Dive

1. Brand Overview

FreeWheel (Fwmrm) is a business-to-business media technology brand — their website is aimed at enterprise clients, media companies, and advertisers. You're not here for lifestyle vibes; you're here for data, networks, and monetization. The design reflects that: restrained, slightly corporate, but with enough color pops to avoid feeling sterile.

The vibe is "functional with a flash of confidence." The base is neutral greys (#323232, #c8c8c8, #555555) and white (#ffffff). Into that, they inject a bold violet (#7a39cb) and a deep indigo (#2d0066). That violet isn't shy — it’s in buttons, links, and call-to-action elements. It’s almost the only saturated color in play, which makes it stand out even more.

Typography is consistent: Rubik in various weights, with occasional XfinityBrown (and DMSans fallback) for branded touches. The type scale is wide — from massive 120px headlines to micro 7.5px link text. That tells me they care about hierarchy and aren’t afraid of dramatic scale shifts.

The layout system is built on an 8px scale. This is good — predictable spacing keeps enterprise sites from feeling messy. Breakpoints are numerous and granular (from 98px to 1280px), which suggests they’re tuning for a wide range of devices, including some niche screen widths.

Buttons are surprisingly varied — multiple classes with different state handling. Some are flat, some have outlines, some change border colors on hover. There’s evidence of older styles and newer styles coexisting (e.g., flat grey buttons alongside violet rectangles).

Overall philosophy: functional clarity first, with branded color used as a signal. This is for a professional audience who needs to trust the brand’s reliability, but who can still be engaged by a confident color accent.

2. Color System

2.1 Primary Colors

The primary brand color is #7a39cb — a vivid violet. Psychologically, violet often conveys creativity, ambition, and premium positioning. In tech B2B, it’s less common than blue (which dominates competitors like Adobe Advertising Cloud or Google Ad Manager). This makes FreeWheel stand out visually.

That violet is paired with deep indigo #2d0066 in some buttons — the two together create a high-contrast, sophisticated look. Indigo serves as a darker anchor, violet as the energy pulse.

The rest of the palette is functional neutrals: #323232 for text and UI chrome, #c8c8c8 for dividers, #555555 for secondary text/icons, and #141417 for very dark UI elements. White #ffffff is the canvas.

2.2 Complete Palette

2.3 Color Relationships

• Contrast: Violet on white has excellent contrast (WCAG AA for large text, AAA for normal text). Violet on dark gray still passes for large text but might be borderline for small type.
• Accessibility: The dark gray #323232 on white is fine (contrast ~15:1). White text on violet is also good — contrast > 4.5:1.
• Dark mode: No evidence of a dedicated dark mode palette. The site uses dark neutrals against white, not reversed.

2.4 Usage Guide

Works well:

• Violet #7a39cb for primary actions, paired with white text.
• Dark gray #323232 for headings on white.
• Deep indigo #2d0066 for secondary CTAs — gives depth without shouting.

Avoid:

• White text on light gray #c8c8c8 — fails contrast.
• Violet on deep indigo — low contrast, visually muddy.

3. Typography

3.1 Font Families

Main family: Rubik in Light, Regular, Medium, SemiBold. No Google/Adobe font sources detected — likely self-hosted.
Secondary: XfinityBrown (with DMSans fallback) appears in some buttons — probably a brand-specific typeface for Comcast-related branding.

3.2 Type Scale

3.3 Hierarchy

The jump from 120px down to 60px is stark — great for hero sections. The mid-range sizes (20px–22px) work for subheadings and large body text. Small sizes (<14px) are mostly for captions and microcopy — they’re readable but need good contrast.

Line heights vary — sometimes tight for headlines (1.08), sometimes loose for buttons (up to 4.22 at 9px size — possibly icon buttons). This flexibility keeps UI elements balanced visually.

4. Spacing & Layout

4.1 Spacing Scale

Base unit: 8px grid (confirmed by multiples like 16px, 24px, 32px).

4.2 Layout

Breakpoints range from 98px (tiny screens) to 1280px (desktop). Many intermediate widths (400, 425, 480, etc.) show they’re tuning for device-specific quirks. This isn’t a “three breakpoints” approach — it’s granular, which is good for enterprise UI where clients might use odd screen sizes.

5. Visual Elements

Border Radius:

• Mostly sharp corners (0px) or tiny radii (2px).
• Special cases: 17px (filter), 20px (spans), 50px (search field), 100% (social icons).
• This is a square-corner brand with occasional rounded pills for specific UI elements.

Shadows:

• Few shadows, mostly subtle (rgba(0,0,0,0.29) 0px 3px 6px).
• Evidence of flat design preference — borders are more common than shadows.

Borders:

• 1px solid lines dominate.
• Colors vary: #141417, #c8c8c8, #323232, #ddd — used contextually.

6. Components

6.1 Buttons

btn btn-link

• Default: transparent bg, violet text, no radius.
• Hover: white bg, white text (opacity 0.6). Odd — white text on white bg? Likely a bug.
• Active: dark green bg, white text.
• Focus: #141417 outline, blue bg (#1eaedb), white text.

rectangle blue

• Default: deep indigo bg, dark gray text.
• Hover: transparent bg, violet text, violet border.
• Focus matches hover.

rectangle violet

• Default: violet bg, dark gray text.
• No defined hover/focus — static.

cmp-revoke-consent

• Default: black bg, light gray text.
• Hover: violet bg, white text.
• Focus: blue bg, white text, black outline.

button

• Default: white bg, deep indigo text, white border.
• Hover: white bg, white text (opacity 0.6).
• Focus: blue bg, white text.

Unnamed 14px button

• Default: light gray bg (#f6f6f9), dark gray text, 2px radius.
• Hover: violet bg, white text.
• Focus: blue bg, white text.

Unnamed 14px dark button

• Default: dark gray bg, white text, 2px radius.
• Hover: violet bg, white text.
• Focus: blue bg, white text.

6.2 Links

Multiple link styles:

• Violet #7a39cb links with underline on default, no underline on hover, hover color #3860be.
• Deep indigo #2d0066 links — no underline.
• White links — for dark backgrounds.
• Light gray #c8c8c8 links — disabled states.
• Dark gray #323232 links — body text.

6.3 Forms

No text input styles extracted — likely native styling with minimal overrides. Checkboxes, radios, selects not in data.

6.4 Cards

No explicit card component data — likely built from layout spacing + borders.

7. Design Tokens

:root {
  /* Colors */
  --color-dark-gray: #323232;
  --color-white: #ffffff;
  --color-violet: #7a39cb;
  --color-light-gray: #c8c8c8;
  --color-deep-indigo: #2d0066;
  --color-medium-gray: #555555;
  --color-black: #000000;
  --color-near-black: #141417;
  --color-mid-gray: #787878;
  --color-swiper-blue: #007aff;

  /* Typography */
  --font-rubik-light: 'Rubik-Light';
  --font-rubik-regular: 'Rubik-Regular';
  --font-rubik-medium: 'Rubik-Medium';
  --font-rubik-semibold: 'Rubik-SemiBold';
  --font-xfinitybrown: 'XfinityBrown', 'DMSans';

  /* Spacing */
  --space-1: 1px;
  --space-5: 5px;
  --space-6: 6px;
  --space-6-25: 6.25px;
  --space-7: 7px;
  --space-10: 10px;
  --space-11-52: 11.52px;
  --space-12: 12px;
  --space-14: 14px;
  --space-15: 15px;
  --space-20: 20px;
  --space-25: 25px;
  --space-30: 30px;
  --space-40: 40px;
  --space-50: 50px;
  --space-56: 56px;
  --space-60: 60px;
  --space-100: 100px;
  --space-160: 160px;
  --space-190: 190px;

  /* Radius */
  --radius-none: 0px;
  --radius-2: 2px;
  --radius-2-5: 2.5px;
  --radius-3: 3px;
  --radius-17: 17px;
  --radius-20: 20px;
  --radius-50: 50px;
  --radius-full: 100%;

  /* Shadows */
  --shadow-1: rgba(0, 0, 0, 0.29) 0px 3px 6px 0px;
  --shadow-2: rgba(0, 0, 0, 0.2) 0px 0px 18px 0px;
  --shadow-3: rgb(153, 153, 153) 0px 2px 10px -3px;
  --shadow-4: rgb(199, 197, 199) -3px -3px 5px -2px;
  --shadow-5: rgb(199, 197, 199) 0px 0px 12px 2px;
}

8. AI Coding Assistant Prompt

# Fwmrm Design System Specification

You are a Fwmrm (FreeWheel) design expert. Build UIs matching their visual language exactly.

## Brand Context
FreeWheel's design is functional, corporate, and precise. It uses a restrained neutral base with a single bold violet accent for energy. Layouts follow an 8px grid, typography is Rubik in multiple weights, and corners are mostly sharp with occasional pill shapes.

## Color Palette
- Dark Gray: #323232 — primary neutral for text, UI chrome
- White: #ffffff — page background, inverse text
- Violet: #7a39cb — primary brand accent for CTAs, links
- Light Gray: #c8c8c8 — dividers, disabled states
- Deep Indigo: #2d0066 — secondary accent for buttons
- Medium Gray: #555555 — secondary text/icons
- Black: #000000 — backgrounds for certain panels
- Near Black: #141417 — UI control backgrounds, focus outlines
- Mid Gray: #787878 — tertiary neutral for icons
- Swiper Blue: #007aff — swiper theme color

## Typography
- Headings: Rubik-SemiBold/Medium/Regular
- Body: Rubik-Regular/Light
- Button special: XfinityBrown, fallback DMSans
- Size scale from 120px (hero) to 7.5px (micro links)
- Maintain given line heights for balance

| Level | Font | Size | Weight | Line Height | Use |
|-------|------|------|--------|-------------|-----|
| H1 | Rubik-SemiBold | 120px | 500 | 1.08 | Hero titles |
| H2 | Rubik-Regular | 60px | 500 | 1.17 | Section titles |
| ... | ... | ... | ... | ... | ... |

## Spacing & Grid
Base: 8px grid  
Tokens: 1px, 5px, 10px, 12px, 14px, 15px, 20px, 25px, 30px, 40px, 50px, 60px, 100px, 160px, 190px  
Use multiples for padding, margins, gaps.

## Border Radius
- none: 0px — default for most components
- sm: 2px — buttons, inputs
- md: 17px — filters
- lg: 20px — spans
- xl: 50px — search fields
- full: 100% — social icons

## Shadows & Depth
Minimal shadows, mostly flat design. Use borders for separation.

## Components

### Primary Button (.rectangle.violet)
Default: background #7a39cb, color #323232, no radius, no border.  
Hover: no change (static).  
Focus: no change.

### Secondary Button (.rectangle.blue)
Default: background #2d0066, color #323232.  
Hover/Focus: transparent bg, color #7a39cb, border 2px solid #7a39cb.

### Link Button (.btn.btn-link)
Default: transparent bg, color #7a39cb, no radius.  
Hover: white bg, white text (opacity 0.6).  
Focus: outline 1px solid #141417, background #1eaedb, color white.

### Input Field
Border: 1px solid #323232, border-radius 2px, padding 10px.  
Focus: outline 2px solid #000000, background #1eaedb, color white.

## Layout & Responsive Rules
Breakpoints: 98px, 400px, 420px, 425px, 426px, 480px, 500px, 530px, 550px, 576px, 600px, 767px, 768px, 769px, 782px, 890px, 896px, 897px, 991px, 992px, 1023px, 1024px, 1199px, 1200px, 1280px.

## Interaction Rules
Transitions: 150ms ease for hover/focus changes.  
Focus indicators: solid outlines with brand or neutral colors.

## DO List
- Use ONLY colors from the palette.
- Maintain 8px grid spacing.
- Use Rubik for all UI text, XfinityBrown only where specified.
- Keep corners sharp unless specified radius token.
- Keep shadows subtle or avoid entirely.

## DON'T List
- Don’t invent new colors.
- Don’t mix rounded and sharp corners arbitrarily.
- Don’t use heavy shadows.
- Don’t alter line heights outside provided values.

## Code Examples

### Primary Button
```css
.rectangle.violet {
  background-color: #7a39cb;
  color: #323232;
  border: none;
  border-radius: 0;
  font-size: 18px;
  font-weight: 400;
  padding: 0;
}
```

### Secondary Button
```css
.rectangle.blue {
  background-color: #2d0066;
  color: #323232;
  border: none;
}
.rectangle.blue:hover,
.rectangle.blue:focus {
  background-color: transparent;
  color: #7a39cb;
  border: 2px solid #7a39cb;
}
```

### Input Field
```css
.input {
  border: 1px solid #323232;
  border-radius: 2px;
  padding: 10px;
}
.input:focus {
  outline: 2px solid #000000;
  background-color: #1eaedb;
  color: #ffffff;
}
```

9. Summary

TL;DR — FreeWheel’s design system is corporate-functional with a single bold violet accent. It’s all about clarity, precise spacing, and restrained use of color. Typography is Rubik-heavy, spacing is 8px-based, corners are square. Buttons vary in style but adhere to the palette.

Brand Keywords:

• corporate-functional
• violet-accented
• sharp-cornered
• grid-faithful
• restrained-color