# Kaggle — Design System
> The World's AI Proving Ground
- **Canonical:** https://uiuxskills.com/library/kaggle
- **Source:** https://www.kaggle.com/
- **Category:** AI & LLM Platforms
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 72%
- **License:** MIT
- **Last updated:** 2026-07-10T21:55:27.543Z

---

---
version: alpha
name: Kaggle
tagline: The World's AI Proving Ground
description: >-
  The world's largest data science and machine learning community, offering datasets, notebooks, and
  competitive AI benchmarks.
tone: Professional, collaborative, academic, and highly technical yet approachable.
color-scheme: light
colors:
  primary: "#20BEFF"
  secondary: "#1A73E8"
  tertiary: "#FDD835"
  neutral: "#202124"
  surface: "#FFFFFF"
  surface-container: "#F8F9FA"
  on-primary: "#FFFFFF"
  on-surface: "#202124"
  outline: "#BDC1C6"
  error: "#D93025"
typography:
  display-lg:
    fontFamily: Inter, sans-serif
    fontSize: 44px
    fontWeight: 700
    lineHeight: "1.2"
    letterSpacing: "-0.02em"
  display-md:
    fontFamily: Inter, sans-serif
    fontSize: 36px
    fontWeight: 700
    lineHeight: "1.25"
    letterSpacing: "-0.01em"
  headline-lg:
    fontFamily: Inter, sans-serif
    fontSize: 24px
    fontWeight: 700
    lineHeight: "1.3"
    letterSpacing: 0em
  headline-md:
    fontFamily: Inter, sans-serif
    fontSize: 20px
    fontWeight: 600
    lineHeight: "1.4"
    letterSpacing: 0em
  headline-sm:
    fontFamily: Inter, sans-serif
    fontSize: 16px
    fontWeight: 600
    lineHeight: "1.4"
    letterSpacing: 0.01em
  body-lg:
    fontFamily: Inter, sans-serif
    fontSize: 16px
    fontWeight: 400
    lineHeight: "1.6"
    letterSpacing: 0em
  body-md:
    fontFamily: Inter, sans-serif
    fontSize: 14px
    fontWeight: 400
    lineHeight: "1.5"
    letterSpacing: 0em
  body-sm:
    fontFamily: Inter, sans-serif
    fontSize: 12px
    fontWeight: 400
    lineHeight: "1.4"
    letterSpacing: 0.01em
  label-lg:
    fontFamily: Inter, sans-serif
    fontSize: 14px
    fontWeight: 600
    lineHeight: "1"
    letterSpacing: 0.02em
  label-md:
    fontFamily: Inter, sans-serif
    fontSize: 12px
    fontWeight: 600
    lineHeight: "1"
    letterSpacing: 0.05em
  label-sm:
    fontFamily: Inter, sans-serif
    fontSize: 11px
    fontWeight: 700
    lineHeight: "1"
    letterSpacing: 0.08em
rounded:
  sm: 4px
  md: 8px
  lg: 16px
  xl: 24px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-lg}"
    rounded: "{rounded.full}"
    padding: 0px 24px
    height: 40px
    borderColor: transparent
  button-primary-hover:
    backgroundColor: "#000000"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-lg}"
    rounded: "{rounded.full}"
    padding: 0px 24px
    height: 40px
    borderColor: transparent
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.neutral}"
    typography: "{typography.label-lg}"
    rounded: "{rounded.full}"
    padding: 0px 24px
    height: 40px
    borderColor: "{colors.outline}"
  button-google:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.neutral}"
    typography: "{typography.label-lg}"
    rounded: "{rounded.full}"
    padding: 0px 20px
    height: 40px
    borderColor: "{colors.outline}"
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
    padding: "{spacing.lg}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
    padding: "{spacing.lg}"
    borderColor: transparent
  input-field:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    rounded: "{rounded.xl}"
    padding: 0px {spacing.md}
    height: 40px
    borderColor: transparent
  input-field-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    rounded: "{rounded.xl}"
    padding: 0px {spacing.md}
    height: 40px
    borderColor: "{colors.secondary}"
  link:
    backgroundColor: transparent
    textColor: "{colors.secondary}"
    typography: "{typography.body-md}"
  link-hover:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    typography: "{typography.body-md}"
  badge:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.neutral}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  badge-error:
    backgroundColor: "{colors.error}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
motion:
  duration-short: 200ms
  duration-medium: 300ms
  easing-standard: cubic-bezier(0.4, 0, 0.2, 1)
elevation:
  sm: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08)
  md: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06)
  lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05)
---

## Overview

Kaggle's visual identity blends Google's structured Material Design principles with a friendly, community-oriented developer aesthetic. The interface relies on a high-contrast light layout punctuated by bright cyan and yellow accents to make complex data science tasks feel approachable. Hand-drawn illustrations are paired with clean, technical grids to balance academic rigor with collaborative accessibility.

## Colors

The color strategy leverages a clean, light-mode foundation with high-contrast neutral tones for readability, accented by Google-aligned blues and a warm yellow for community elements.

*   Primary (`{colors.primary}`): #20BEFF - Kaggle's signature bright cyan blue, used for branding, logos, and key interactive highlights.
*   Secondary (`{colors.secondary}`): #1A73E8 - Google-aligned blue used for primary links, focus states, and standard interactive elements.
*   Tertiary (`{colors.tertiary}`): #FDD835 - A warm, energetic yellow used as a background accent blob behind illustrations and icons.
*   Neutral (`{colors.neutral}`): #202124 - Dark charcoal gray used for body copy, primary headings, and high-contrast button backgrounds.
*   Surface (`{colors.surface}`): #FFFFFF - Pure white background for clean readability and high contrast.
*   Surface Container (inferred) (`{colors.surface-container}`): #F8F9FA - Off-white/light gray background used to group content blocks and structure card layouts.
*   On-Primary (inferred) (`{colors.on-primary}`): #FFFFFF - White text used on top of primary or dark neutral button backgrounds.
*   On-Surface (inferred) (`{colors.on-surface}`): #202124 - Dark charcoal text used on white surfaces for optimal readability.
*   Outline (`{colors.outline}`): #BDC1C6 - Light gray border color used for secondary buttons, input fields, and card dividers.
*   Error (inferred) (`{colors.error}`): #D93025 - Standard Google-aligned red used for error states, alerts, and destructive actions.

## Typography

The typography system relies strictly on the Inter font family to maintain a clean, highly legible, and technical appearance across all interfaces.

*   Display Large (`{typography.display-lg}`): Bold (700) headline font used for the main hero title to establish an authoritative presence.
*   Display Medium (inferred) (`{typography.display-md}`): Bold (700) font used for secondary landing page section headers.
*   Headline Large (`{typography.headline-lg}`): Bold (700) font used for major section titles.
*   Headline Medium (inferred) (`{typography.headline-md}`): Semi-bold (600) font used for card titles and prominent feature headers.
*   Headline Small (inferred) (`{typography.headline-sm}`): Semi-bold (600) font used for smaller sub-headers and category titles.
*   Body Large (inferred) (`{typography.body-lg}`): Regular (400) font used for introductory paragraphs and hero body text.
*   Body Medium (`{typography.body-md}`): Regular (400) font used as the standard body copy size for descriptions, metadata, and general content.
*   Body Small (inferred) (`{typography.body-sm}`): Regular (400) font used for secondary metadata, captions, and fine print.
*   Label Large (inferred) (`{typography.label-lg}`): Semi-bold (600) font used for button text and main navigation links.
*   Label Medium (inferred) (`{typography.label-md}`): Semi-bold (600) font used for small interactive labels, tags, and category badges.
*   Label Small (inferred) (`{typography.label-sm}`): Bold (700) font used with uppercase styling for section overlines.

## Layout

Kaggle uses a standard 12-column grid layout with a maximum container width of approximately 1280px. Spacing is strictly built on a 4px base unit, with `{spacing.md}` (16px) and `{spacing.lg}` (24px) serving as the primary structural gutters and padding. Sections are separated by generous vertical margins (`{spacing.2xl}` or larger) to maintain a clean, readable, and academic feel.

The observed section order top-to-bottom consists of: `nav`, `hero`, `features`, `news`, `benchmarks`, `resources`, `competitions`, and `footer`. The hero composition pattern features a left-aligned headline, subhead, and dual registration CTAs (Google SSO and Email) paired with a large hand-drawn mountain climbing illustration on the right. Responsively, the fluid grid collapses to a single column on mobile viewports, with the navigation bar transitioning to a hamburger menu.

## Elevation & Depth

Depth is conveyed conservatively using subtle single-layer shadows across three levels. Most cards and content containers are flat with subtle borders using `{colors.outline}`. Elevation is reserved for interactive states, dropdown menus, and floating action elements, utilizing soft, multi-layered shadows to mimic Material Design standards.

*   `elevation.sm` (inferred): Used for subtle card lift or interactive hover states.
*   `elevation.md` (inferred): Used for dropdown menus, popovers, and floating action elements.
*   `elevation.lg` (inferred): Used for modal overlays and high-priority drawer elements.

## Shapes

Kaggle employs a hybrid shape strategy to balance friendliness with professional structure. Interactive controls like buttons, search bars, and input fields use fully rounded pill shapes (`{rounded.full}`) or highly rounded corners (`{rounded.xl}`) to feel approachable and modern. 

Content containers, cards, and images use a standard `{rounded.md}` (8px) radius to maintain a structured, professional grid alignment. Small badges use `{rounded.sm}` (4px) to keep text compact and aligned.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`

### button-primary
A high-contrast interactive element with a `{colors.neutral}` background and `{colors.on-primary}` text. It uses `{rounded.full}` for a pill shape and is styled with `{typography.label-lg}`. Use for primary actions like registration.

### button-primary-hover
The hover state for primary buttons, shifting the background to `#000000` while maintaining the pill shape and text style.

### button-secondary
An outlined button using `{colors.outline}` for its border and `{colors.neutral}` for text. It uses `{rounded.full}` and a transparent background, used for secondary actions.

### button-google
A specialized SSO button with a `{colors.surface}` background, `{colors.outline}` border, and `{colors.neutral}` text. It features `{rounded.full}` and is used specifically for Google authentication.

### card
A flat content container with a `{colors.surface}` background, `{rounded.md}` corners, and a `{colors.outline}` border. Used to group related content blocks like datasets or models.

### card-elevated
An elevated variant of the standard card that omits the border in favor of a subtle shadow, used to highlight featured content.

### input-field
A text entry field with a `{colors.surface-container}` background and no border. It uses `{rounded.xl}` and `{typography.body-md}` for input text.

### input-field-focus
The active state of the input field, transitioning the background to `{colors.surface}` and adding a `{colors.secondary}` border.

### link
A text link styled with `{typography.body-md}` using `{colors.secondary}` to indicate interactivity.

### link-hover
The hover state for links, transitioning the text color to `{colors.primary}`.

### badge
A small status or category indicator using `{colors.tertiary}` as a background and `{colors.neutral}` for text. Styled with `{typography.label-sm}` and `{rounded.sm}`.

### badge-error
An error or high-priority badge using `{colors.error}` background and `{colors.on-primary}` text.

### divider
A thin structural line with a `{colors.outline}` background and a height of 1px, used to separate content sections.

## Do's and Don't's

| Do | Don't |
| --- | --- |
| Use `{colors.neutral}` for primary high-contrast CTAs like "Register with Email". | Do not use `{colors.primary}` as a solid background for primary buttons. |
| Apply `{rounded.full}` to all primary and secondary buttons to maintain consistent pill-shaped styling. | Never use sharp corners or `{rounded.sm}` on buttons. |
| Use `{colors.tertiary}` as a background accent blob behind hand-drawn illustrations. | Never place low-contrast text directly on `{colors.tertiary}` backdrops. |
| Set secondary links to `{colors.secondary}` and transition to `{colors.primary}` on hover. | Do not use arbitrary blue shades outside of `{colors.secondary}` for links. |
| Ensure all content cards use `{rounded.md}` and are bounded by a subtle `{colors.outline}` border. | Avoid using heavy drop shadows like `elevation.lg` on standard content cards; prefer flat borders. |
| Use `{typography.label-sm}` with uppercase styling for section overlines. | Do not mix font families; stick strictly to Inter for all typography levels. |
| Use `{colors.surface-container}` as a background to group content blocks and structure card layouts. | Do not use `{colors.surface-container}` for primary interactive button backgrounds. |
| Style text input fields with `{rounded.xl}` and transition to a `{colors.secondary}` border on focus. | Do not leave input fields with sharp corners or transparent borders during focus states. |

## Content Style

Action-oriented, clear, and direct. Uses Google SSO integration prominently with labels like "Register with Google" and "Register with Email" to minimize friction.

Authoritative, inspiring, and community-focused. Headlines are phrased to highlight scale and capability, such as "The World's AI Proving Ground" and "Who's on Kaggle?".

Highly structured and scannable. Information is broken down into clear metric callouts (e.g., "703K Datasets") and bulleted key features with accompanying icons, leaving ample whitespace to maintain readability.

## Imagery & Icons

Kaggle uses a mixed imagery style that combines hand-drawn black-and-white line art illustrations representing community and achievement (such as mountain climbing, trophies, and stars) with organic yellow accent blobs using `{colors.tertiary}`. This hand-drawn aesthetic is paired with clean, outline-based Google Symbols and high-fidelity product screenshots for technical features. Logo lockups and icons must maintain a clean, uncluttered presentation against `{colors.surface}` or `{colors.surface-container}` backgrounds.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Kaggle, a minimal, accessible, enterprise data science platform with a professional yet approachable, community-focused tone. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every visual value by its token name — `{colors.primary}`, `{typography.body-md}`, `{spacing.lg}` — never hardcode hex values, pixel sizes, or font stacks.
2. Respect the `components:` list exactly. `button-primary`, `button-secondary`, `card`, `card-elevated`, `badge`, and all other listed components are the only variants available; do not invent new ones.
3. Follow the Layout and Shapes notes for every structural decision: 12-column grid, 1280px max container, `{rounded.full}` on all buttons and inputs, `{rounded.md}` on cards and images.
4. Treat the Do's and Don'ts as authoritative. If a user request conflicts (e.g., sharp-cornered buttons, `{colors.primary}` as a solid button background), surface the conflict before proceeding.
5. When generating interactive components, always include hover, focus, and disabled states as defined in the spec — e.g., links shift from `{colors.secondary}` to `{colors.primary}` on hover.

## Output contract

**Must:**
- Use all tokens by name; apply the 4px base spacing scale (`{spacing.xs}` through `{spacing.2xl}`) for all padding, gaps, and margins.
- Apply `{rounded.full}` to buttons and search inputs; `{rounded.md}` to cards and containers.
- Use `{colors.neutral}` as the background for primary CTAs with `{colors.on-primary}` text.
- Use `{typography.label-sm}` with uppercase styling for section overlines.
- Maintain body text contrast using `{colors.on-surface}` on `{colors.surface}` or `{colors.surface-container}` backgrounds.
- Cover hover, focus, and disabled states for every interactive component the spec defines.

**Must NOT:**
- Invent colors, radii, or font families outside the spec; Inter is the only permitted typeface.
- Use `{colors.primary}` as a solid button background fill.
- Apply heavy drop shadows to standard cards; use flat `{colors.outline}` borders.
- Place low-contrast text on `{colors.tertiary}` backdrops.
- Rewrite, replace, or extend page copy, headings, navigation labels, or button text.
- Alter navigation structure or page section order as a side effect of applying tokens.

## When in doubt
- If the spec does not define a value, ask the user before inventing one.
- Prefer composing existing spec components over introducing new tokens or variants.
- For ambiguous background roles, default to `{colors.surface-container}`; for ambiguous text roles, default to `{colors.on-surface}`.
- For unspecified breakpoints, use mobile-first layout with one breakpoint at 768px, consistent with the 12-column grid narrative.
- Any color or size value marked "(inferred)" in the spec is an approximation; if an authoritative token file exists, it takes precedence.