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)

Your data never hits a public marketplace. Direct connection to vetted enterprise AI 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

Direct connection to vetted enterprise AI buyers.

Fair Market Pricing

We know what data is worth. Don't leave money on the table.

Usage Enforcement

License terms are tracked and audited.

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-powered assessment of your data's market value. Know what buyers will pay before you sell.

Deal Structuring

License, one-time sale, or revenue share. We find the right model for your data and risk tolerance.

Card Style D — Dark with Number

01

Submit Data

Upload or connect your data sources

02

We Appraise

AI-driven market valuation

03

Match Buyers

Connect with vetted AI companies

04

Get Paid

Structured deal, enforced terms

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.

Your data has value

Every company generates data AI wants to buy.

We find the buyers

Direct connections to OpenAI, Google, Anthropic, and more.

You get paid

Structured deals. Enforced terms. Fair pricing.

Pre-CTA Banner (Always Alive)

Ready to price
your data?

Get a free valuation. See what AI companies will pay for your data assets.

FileYield Brand Guidelines v2.0 — Brutalist Hover Pop

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

Back to site →