# Kaggle design system

> Kaggle design system measured from kaggle.com: FG Futurist font, 10 color hex codes, type scale, spacing and a free DESIGN.md. Light theme with 24px corners.

Canonical page: https://sitepeel.dev/design-md/kaggle.com/

Kaggle’s website (kaggle.com) uses the FG Futurist font on a white background. Measured by Sitepeel on November 7, 2026.

## What font does Kaggle use?

Kaggle uses FG Futurist (weights 300 and 400) and Google Sans Flex (weights 300, 400 and 500), with Google Sans Code for code on kaggle.com. Page titles are 44px at weight 400 (32px on phones) and body text is 14px. Measured on November 7, 2026.

- FG Futurist (weights 300, 400)
- Google Sans Flex (weights 300, 400, 500)
- Google Sans Code (weights 300)

## Kaggle colors: palette and hex codes

Kaggle’s main colors are #FFFFFF (white) for the background and #1F1F1F (charcoal) for text. Measured on November 7, 2026.

- #FFFFFF: white
- #1F1F1F: charcoal
- #3D3D3D: graphite
- #5A5A5A: slate
- #FBF7EF: warm snow
- #B8B8B8: silver
- #D9D9D9: silver

## What is Kaggle built with?

Kaggle’s website (kaggle.com) is built with React, React Router, styled-components, Emotion and MUI. Measured on November 7, 2026.

- JavaScript framework: React 18.3.1, React Router 7.18.5
- UI & CSS: styled-components 6.4.2, Emotion, MUI
- Hosting & CDN: Google Cloud
- Fonts & icons: Google Fonts
- Analytics: Google Analytics

## Questions and answers

### What font does Kaggle use?

Kaggle’s website uses FG Futurist (weights 300 and 400) and Google Sans Flex (weights 300, 400 and 500), with Google Sans Code for code. Page titles are 44px at weight 400 (32px on phones) and body text is 14px. Measured on November 7, 2026.

### What are the Kaggle colors and hex codes?

On kaggle.com: #FFFFFF (white) for the background and #1F1F1F (charcoal) for text. The color palette above lists all 10 colors with their hex codes and where each one is used.

### What is the Kaggle design system?

The design system on this page is kaggle.com’s, as measured on November 7, 2026: FG Futurist type and 24px corners, written down as a DESIGN.md. It is not Kaggle’s own documentation.

### What is Kaggle built with?

Kaggle’s website (kaggle.com) is built with React, React Router, styled-components, Emotion and MUI. The full tech stack Sitepeel found: React, React Router, styled-components, Google Cloud, Emotion, MUI, Google Fonts and Google Analytics. Measured on November 7, 2026.

### What is the Kaggle DESIGN.md?

A plain-text file with Kaggle’s measured colors, type, spacing, corners and components as tokens, plus short rules, in the DESIGN.md format Google published with Stitch. Your AI coding agent reads it and builds in this style. More about DESIGN.md.

### How do I use it with Claude Code or Cursor?

Download the file and put it in your project’s root folder, then ask your agent to follow DESIGN.md. Step-by-step guides: Claude Code, Cursor, Codex, GitHub Copilot.

### Is this Kaggle’s official design system?

No. Sitepeel measured it from kaggle.com’s public page on November 7, 2026. It is an independent analysis, not made or approved by Kaggle.

### Can I use Kaggle’s style in my own product?

Use it to learn, prototype and compare. For a real product, make the style your own, and never copy Kaggle’s logo, name, pictures or text.

### How accurate are the values?

Each value was measured on the rendered page after it fully loaded, on desktop and mobile: colors where they appear, type with tracking, spacing, corners, shadows and hover states. Sites change, so check the date at the top.

## Files

- [DESIGN.md](https://sitepeel.dev/design-md/kaggle.com/DESIGN.md): the plain file to put in your project.
- [All brand DESIGN.md files](https://sitepeel.dev/design-md/examples/index.md)

Independent analysis by Sitepeel (sitepeel.dev), not affiliated with Kaggle.

## The DESIGN.md file

```markdown
---
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).

```