Design System

Brutalist
Hover Pop.Pop.

Everything is black and gray at rest. Color is earned through interaction. The gradient is the reward for engagement — never decoration.

Core Principle

01

Gray at Rest

Every element starts monochrome. No color until interaction. Dots = data. Silence = opportunity.

02

Color on Hover

The gradient is capital flowing through data. 6 colors from AI buyers. Color = value being unlocked.

03

Dissolve Back

Mouse leave drains the color in 300ms. Capital retreats. The data goes quiet again. Discovery resets.

Color Palette

Ink

Primary text, buttons, UI chrome

Paper

Backgrounds, negative space

OpenAI Green

Gradient accent

Google Blue

Gradient accent

Databricks Red

Gradient accent, FY hub hover

Scale Purple

Gradient accent

Mistral Orange

Gradient accent, FY hub hover

Meta Blue

Gradient accent

Muted

Section labels, secondary text

Ghost

Borders, dividers at 6% black

The Gradient

6 colors, 300% background-size, 8s cycle. Only visible on hover states.

Typography

Inter. One family. Weight and size create hierarchy.

H1 / Hero

96px / 900 (Black)

YOUR DATA.

H2 / Section

48px / 900 (Black)

SELLING.

H3 / Card Title

15px / 700 (Bold)

Private Deal Flow

Body

13px / 400 (Regular)

Choose listing visibility and discuss requirements with interested buyers.

Label / Nav

10px / 700 (Bold)

THE MARKET

Mono Detail

10px / 500 (Medium)

COMPLIANCE INCLUDED

Char Field — Discovery Mechanic

Nearly invisible characters that breathe on their own. Your cursor awakens them — dots morph to symbols, gray becomes color. Data is everywhere. You just have to look.

Shapes

Circle

Drip

Arc

Wave

Placements

Button drip

The Market

Heading + wave accent

Feature Card

With circle corner accent

Char progression: . : - + $ X — dots = dormant data, X = activated capital. Chars breathe and cycle on their own. Cursor makes them react more.

Interactive Elements

Buttons

Accent Words

Hover this word.word.

Card Style A — Invert Grid

Private Deal Flow

Listing descriptions and direct messages with interested buyers.

Fair Market Pricing

Asking prices are seller proposals, not verified valuations.

Usage Enforcement

Parties are responsible for agreeing and enforcing license terms.

Card Style B — Border Lift

$4.2B

Healthcare

Medical records, imaging, genomic data

$3.8B

Financial Services

Transaction logs, market data, compliance

$1.9B

Legal

Case filings, contracts, regulatory docs

Card Style C — Gradient Border on Hover

Data Valuation

AI assistance with listing descriptions and questions for a potential buyer. No verified valuation.

Deal Structuring

Discuss license structures with your buyer and qualified advisers before accepting terms.

Card Style D — Dark with Number

01

Submit Data

Describe your data; no file uploads

02

Prepare Details

AI help with a listing description

03

Match Buyers

Browse listings and buyer requests

04

Discuss Terms

Arrange payment and delivery separately

Industry Rows

Healthcare
$4.2B
Finance
$3.8B
Legal
$1.9B

Deal Card

Reddit→Google

$60M/yr

Entire Reddit post and comment corpus — decades of conversational data for Gemini training.

2024

Dividers

Standard: 1px, 6% black

Gradient: subtle flowing colors, sparingly between major sections

Animations & Motion

01

AccentWord Hover

Text is solid color at rest. On hover, a flowing multi-color gradient bleeds in. On mouse leave, it dissolves back.

Section headings only. Never body text.
02

Brutalist Button

Black fill at rest. On hover, gradient bg fades in via ::before (0.4s ease). Button lifts 1px + colored shadow.

All CTA buttons.
03

Char Field

Grid of '.' characters at 3-4% opacity. On cursor proximity, chars morph: . → : → - → + → $ → X. Color radiates from cursor as ripple.

Corners, button drips, section accents. Discovery mechanic.
04

Magnetic Letters

H1 characters shift toward cursor via spring physics (stiffness: 150, damping: 15). Spring back on leave.

Hero headline only.
05

Network Graph

77 flat gray dots, gradient lines on hover. FileYield hub = orange/red. All draggable.

Hero right side. Canvas, 60fps.
06

Reveal Text

Characters slide up from 115% Y with staggered delay. Once on viewport entry.

Section headings on scroll.
07

Card Invert

Light bg flips to dark on hover. Text color inverts. Lift 1px. 300ms transition.

Feature cards, industry rows.
08

Logo Grayscale

Grayscale 40% at rest. Full color on hover. 300ms.

Logo grids only.

Do / Don't

Do

  • Keep everything gray/black at rest
  • Use gradient only on hover interactions
  • Blend 2-3 brand colors, never flat
  • Use char fields for discovery texture
  • Lift elements 1px on hover
  • Use 1px borders and gaps for structure
  • FY hub = orange/red gradient on hover
  • . = dormant data, X = activated capital
  • Auto-animate char fields in pre-CTA and footer
  • Use gradient boxes to command attention

Don't

  • Use gold (#c9a96e) anywhere
  • Rainbow gradients on text
  • Glow, shadow, or blur on elements
  • Show color without hover
  • Flat/single brand colors
  • Hover effects on body text
  • Rounded corners — square only
  • Auto-animate above the fold (pre-CTA/footer only)

Spacing System

Section Padding

py-24 lg:py-32

96-128px

Content Max Width

max-w-7xl

1280px

Grid Gap

gap-[1px]

1px (structural)

Card Padding

p-8

32px

Nav Height

h-[72px]

72px

Horizontal Pad

px-6 lg:px-8

24-32px

Section Label MB

mb-4

16px

Heading MB

mb-16

64px

Card Style E — Gradient Boxes (Always Alive)

These animate without interaction. Use pre-CTA, pre-footer, or anywhere you want to command attention.

Describe your data

Organize the scope and permitted uses of your dataset.

Explore requirements

Browse buyer requests; no match is guaranteed.

Agree your terms

Review rights, price, payment, and delivery with the buyer.

Pre-CTA Banner (Always Alive)

Ready to price
your data?

Describe your data and explore possible uses. No buyer, price, or sale is guaranteed.

FileYield Brand Guidelines v2.0 — Brutalist Hover Pop

Color = capital. Dots = data. Interaction = discovery.

Back to site →