Kaggle design system

---
version: alpha
name: Kaggle
description: "Light monochrome interface measured from kaggle.com: FG Futurist type with Google Sans Flex, tonal surfaces and 24px corners."
colors:
  background: "#FFFFFF"
  surface: "#FFFFFF"
  on-surface: "#1F1F1F"
  on-background: "#1F1F1F"
  on-surface-variant: "#3D3D3D"
  on-surface-muted: "#5A5A5A"
  surface-container-low: "#FBF7EF"
  overlay: "#4D94FF33"
  outline: "#B8B8B8"
  outline-variant: "#D9D9D9"
  primary: "#1F1F1F"
  on-primary: "#FFFFFF"
typography:
  headline-display:
    fontFamily: FG Futurist
    fontSize: 44px
    fontWeight: 400
    lineHeight: 1.12
  headline-lg:
    fontFamily: FG Futurist
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.12
  headline-md:
    fontFamily: FG Futurist
    fontSize: 24px
    fontWeight: 300
    lineHeight: 1.4
  body-md:
    fontFamily: Google Sans Flex
    fontSize: 14px
    fontWeight: 300
    lineHeight: 1.4
  body-lg:
    fontFamily: Google Sans Flex
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.4
  body-sm:
    fontFamily: Google Sans Flex
    fontSize: 12px
    fontWeight: 300
    lineHeight: 1.4
  label-md:
    fontFamily: Google Sans Flex
    fontSize: 16px
    fontWeight: 400
  label-sm:
    fontFamily: Google Sans Flex
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.4
  code:
    fontFamily: Google Sans Code
    fontSize: 14px
    fontWeight: 300
    lineHeight: 1.2
  headline-display-mobile:
    fontFamily: FG Futurist
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.12
  headline-lg-mobile:
    fontFamily: FG Futurist
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.12
rounded:
  sm: 12px
  md: 20px
  lg: 22px
  xl: 24px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 48px
  gutter: 8px
  section: 80px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.xl}"
    padding: 0px
    height: 44px
  button-primary-hover:
    backgroundColor: "#FFC412"
    textColor: "{colors.on-surface}"
  button-outline:
    textColor: "{colors.on-surface}"
    typography: "{typography.headline-md}"
    padding: 0px
    height: 44px
  button-outline-hover:
    backgroundColor: "#E6E6E6"
  button-ghost:
    textColor: "{colors.on-surface}"
    typography: "{typography.headline-md}"
    padding: 0px
  link:
    textColor: "{colors.on-surface-muted}"
---

# Kaggle Design System

## Overview

Kaggle describes itself as: “Discover what actually works in AI. Join millions of builders, researchers, and labs evaluating agents, models, and frontier technology through crowdsourced benchmarks, competitions, and hackathons.” The interface is light, built on **White (#FFFFFF)** with **Charcoal (#1F1F1F)** text and almost no color: actions are carried by contrast, not hue.

Type is set in **FG Futurist** and **Google Sans Flex**, with **Google Sans Code** for code. Headlines run large; body text is 14px. Depth comes from hairline borders and inset highlights rather than drop shadows. Corners are mostly 24px.

Measured from [kaggle.com](https://www.kaggle.com/) on November 7, 2026 at 1440×900 and 390×844 from 266 rendered elements. Values are computed styles from the live page, not the original source files.

## Colors

The palette has 10 roles.

- **White (#FFFFFF):** Page background, seen 16 times. Token `background`.
- **Charcoal (#1F1F1F):** Primary text and headings, seen 77 times. Token `on-surface`.
- **Graphite (#3D3D3D):** Secondary text, seen 17 times. Token `on-surface-variant`.
- **Slate (#5A5A5A):** Muted text and metadata, seen 35 times. Token `on-surface-muted`.
- **Warm Snow (#FBF7EF):** Raised areas one step from the page, seen 1 time. Token `surface-container-low`.
- **Blue 20% (#4D94FF33):** Translucent fill for cards and controls, seen 1 time. Token `overlay`.
- **Silver (#B8B8B8):** Borders and dividers, seen 13 times. Token `outline`.
- **Silver (#D9D9D9):** Secondary dividers, seen 2 times. Token `outline-variant`.
- **Charcoal (#1F1F1F):** Primary buttons and calls to action, seen 95 times. Token `primary`.
- **White (#FFFFFF):** Text and icons on primary. Token `on-primary`.

## Typography

**FG Futurist**, **Google Sans Flex** and **Google Sans Code** (monospace) share the interface. Fallback stack: `FG Futurist, Google Sans Flex, sans-serif`. Other loaded fonts: Google Symbols.

- **headline-display:** FG Futurist 44px at weight 400, line height 1.12 (32px on mobile). Page title (h1).
- **headline-lg:** FG Futurist 32px at weight 400, line height 1.12 (24px on mobile). Section headings (h2).
- **headline-md:** FG Futurist 24px at weight 300, line height 1.4. Sub-section headings.
- **body-md:** Google Sans Flex 14px at weight 300, line height 1.4. Body text.
- **body-lg:** Google Sans Flex 18px at weight 400, line height 1.4. Lead paragraphs.
- **body-sm:** Google Sans Flex 12px at weight 300, line height 1.4. Secondary and small text.
- **label-md:** Google Sans Flex 16px at weight 400. Buttons, navigation and labels.
- **label-sm:** Google Sans Flex 12px at weight 500, line height 1.4. Small labels and badges.
- **code:** Google Sans Code 14px at weight 300, line height 1.2. Code and technical values.

## Layout

Spacing is mostly on a 4px grid (89% of measured values), with some off-grid steps. Match the measured scale rather than rounding everything.

- **Scale:** xs 4px, sm 8px, md 16px, lg 24px, xl 48px.
- **Sections:** 80px vertical padding between major sections.
- **Gaps:** 8px is the most common gap in flex and grid layouts.
- **Breakpoints:** 479px, 480px, 599.95px, 600px, 615px, 719px, 839px, 959px, 1022px, 1023px, 1231px, 1232px, 1279px, 1280px.

## Elevation & Depth

The design avoids drop shadows. Layers are separated by tonal surface steps (#FBF7EF) and hairline rings:

- `rgba(31, 31, 31, 0.08) 0px 0px 0px 1px inset`

## Shapes

Most elements use 24px corners. Measured radii, most used first:

- **xl (24px):** 56 elements.
- **sm (12px):** 30 elements.
- **full (9999px):** 20 elements.
- **md (20px):** 4 elements.
- **lg (22px):** 4 elements.

## Components

Measured from the rendered page. Token values reference the tokens above.

- **button-primary (“Sign Up”):** #1F1F1F fill, #FFFFFF text, 16px/400, 24px radius, padding 0px.
- **button-primary-hover:** background #FFC412, text #1F1F1F on hover.
- **button-outline (“Search on Kaggle”):** transparent fill, #1F1F1F text, 24px/300, 50% radius, padding 0px, border 1px solid #B8B8B8.
- **button-outline-hover:** background #E6E6E6, text #1F1F1F on hover.
- **button-ghost (“more_horiz”):** transparent fill, #1F1F1F text, 24px/300, 50% radius, padding 0px.
- **link:** transparent fill, #5A5A5A text, padding 0px.

## Do's and Don'ts

- Do use #FFFFFF for the page and lift surfaces in small steps: #FBF7EF.
- Do keep text in 3 levels: #1F1F1F, #3D3D3D, #5A5A5A.
- Do let contrast carry emphasis; primary actions use #1F1F1F on #FFFFFF.
- Do reuse the measured spacing steps (8px, 16px, 24px).
- Do use 24px corners on most elements; larger surfaces also use 12px, 20px and 22px.
- Don't add drop shadows for depth; use hairline rings and tonal surfaces.
- Don't introduce new font families beyond FG Futurist, Google Sans Flex and Google Sans Code.
- Don't add saturated accent colors; the measured palette is almost entirely neutral.
- Don't make interface transitions slower than 0.3s.

## Motion

Interface transitions are quick: 0.3s, 0.25s, 0.1s, 0.0416667s.

- **Easing:** `ease`, `ease-out`, `cubic-bezier(0, 0, 0.2, 1)`.
- **Reduced motion:** the page responds to `prefers-reduced-motion`.

Generated by [Sitepeel](https://sitepeel.dev/design-md/kaggle.com/), the free DESIGN.md generator (engine 2026.10.29+b828a475ee10).