Kaggle DESIGN.md

The official design system for building Kaggle's product UI. Kaggle is the world's AI proving ground — a platform for 31M+ data scientists, ML engineers, and researchers. The design reflects a functional, data-first environment built on Google's Material Design foundations.

Design Philosophy: Data-first clarity with competitive energy. Kaggle's interface is clean and accessible, optimized for code-heavy workflows, long reading sessions, and competitive engagement. Every component balances technical density with approachable, learner-friendly visual language.

1. Color Palette

Primary Brand Colors

Light Mode Colors

Dark Mode Colors

Competition & Rank Medal Colors

Status & Semantic Colors

Data Visualization Colors

2. Typography

Font Stacks

css/* Primary — Google Sans / Material (Kaggle uses Google's font stack) */
--kaggle-font-primary: "Google Sans", "Roboto", -apple-system,
                        BlinkMacSystemFont, "Segoe UI",
                        Helvetica, Arial, sans-serif;

/* Body / UI Text */
--kaggle-font-body: "Roboto", -apple-system, BlinkMacSystemFont,
                    "Segoe UI", Helvetica, Arial, sans-serif;

/* Code / Technical */
--kaggle-font-mono: "Roboto Mono", "Source Code Pro",
                    Monaco, Menlo, Consolas, "Courier New", monospace;

Type Scale

Font Weights

Typography Guidelines

• Line length: Max 800px for notebook prose; 65ch for long-form text
• Alignment: Left-aligned by default; center for hero and empty states
• Code blocks: Always use --kaggle-font-mono for all code content
• Numbers: Tabular figures (font-variant-numeric: tabular-nums) for scores and leaderboards
• Hierarchy: Size and weight define hierarchy; color used only for links and status
• RTL: Supported for international community members

3. Spacing & Layout

Base Spacing Scale

Content Width Containers

Breakpoints

Layout Grid

• 8px baseline grid: All spacing aligns to 8px increments
• Material Design grid: 12-column fluid grid with 24px gutters
• Sidebar: 280px fixed left sidebar (collapses to icons at medium)
• Main content: Flexible fill, max-width depends on page type
• Navbar height: 64px fixed top

4. Borders & Shadows

Border Width

Border Radius

Shadows (Material Elevation)

Focus States

css--kaggle-focus-color:  #1CA3EC;
--kaggle-focus-width:  3px;
--kaggle-focus-style:  solid;
--kaggle-focus-offset: 2px;

5. Iconography

Icon System

Kaggle uses Material Icons (Google) as its primary icon set, consistent with its Material Design foundation.

html<!-- Material Icons via Google CDN -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<span class="material-icons">code</span>

Icon Sizes

Icon Categories

Key UI Icons

notebook        — code (or laptop_chromebook)
dataset         — dataset / storage
competition     — emoji_events
discussion      — forum
profile         — account_circle
medal           — military_tech
upvote          — thumb_up / arrow_upward
leaderboard     — leaderboard
run/execute     — play_arrow
stop            — stop
save            — save
fork            — fork_right / call_split
share           — share
download        — download
search          — search
settings        — settings
filter          — filter_list
sort            — sort

6. Component Patterns

Buttons

Button Variants

Button Sizes

Navigation (Top Bar)

css/* Fixed top navbar */
position: fixed;
top: 0; left: 0; right: 0;
height: 64px;
background: #FFFFFF;
border-bottom: 1px solid #E0E0E0;
box-shadow: 0 1px 2px rgba(0,0,0,0.06);
z-index: 1000;

/* Logo area */
width: 160px;
padding: 0 16px;

/* Nav links */
font-size: 14px;
font-weight: 500;
color: #616161;
padding: 0 12px;
height: 64px;
border-bottom: 3px solid transparent;

/* Active nav link */
color: #20BEFF;
border-bottom-color: #20BEFF;

Sidebar Navigation

css/* Left sidebar */
width: 280px;
position: fixed;
top: 64px;
left: 0;
bottom: 0;
background: #FFFFFF;
border-right: 1px solid #E0E0E0;
overflow-y: auto;
padding: 8px 0;

/* Sidebar item */
display: flex;
align-items: center;
gap: 16px;
padding: 12px 24px;
font-size: 14px;
font-weight: 500;
color: #616161;
border-radius: 0 24px 24px 0;
margin-right: 8px;

/* Active sidebar item */
background: #E3F2FD;
color: #1CA3EC;

Competition Cards

css/* Competition card */
background: #FFFFFF;
border: 1px solid #E0E0E0;
border-radius: 8px;
padding: 24px;
transition: box-shadow 0.2s ease;

/* Card hover */
box-shadow: 0 4px 8px rgba(0,0,0,0.12);
border-color: #BDBDBD;

/* Prize badge */
background: #FFF8E1;
color: #F57F17;
border-radius: 4px;
padding: 4px 8px;
font-size: 12px;
font-weight: 500;

/* Deadline chip */
background: #FFEBEE;
color: #C62828;
border-radius: 4px;
padding: 4px 8px;
font-size: 12px;

Notebook / Code Cells

css/* Code cell container */
background: #F7F7F7;
border: 1px solid #E0E0E0;
border-radius: 4px;
font-family: "Roboto Mono", monospace;
font-size: 13px;
line-height: 1.5;
padding: 12px 16px;
overflow-x: auto;

/* Input cell (active) */
border-left: 3px solid #20BEFF;

/* Output cell */
background: #FFFFFF;
border-left: 3px solid #E0E0E0;
padding: 12px 16px;

/* Cell running state */
border-left-color: #FF9800;

/* Cell execution count */
color: #9E9E9E;
font-size: 12px;
min-width: 40px;
text-align: right;
padding-right: 8px;

Leaderboard Table

css/* Table container */
background: #FFFFFF;
border: 1px solid #E0E0E0;
border-radius: 8px;
overflow: hidden;

/* Table header */
background: #F5F5F5;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #616161;
padding: 12px 16px;

/* Table row */
padding: 12px 16px;
border-bottom: 1px solid #EEEEEE;
font-size: 14px;
font-variant-numeric: tabular-nums;

/* Row hover */
background: #F8F8F8;

/* Top 3 rows */
background: linear-gradient(to right, #FFF8E1, #FFFFFF);

/* Medal column */
font-size: 20px;
width: 48px;

Form Controls

Text Input

Select / Dropdown

cssbackground: #FFFFFF;
border: 1px solid #E0E0E0;
border-radius: 4px;
padding: 8px 12px;
font-size: 14px;
color: #212121;

/* Dropdown panel */
background: #FFFFFF;
border: 1px solid #E0E0E0;
border-radius: 4px;
box-shadow: 0 4px 8px rgba(0,0,0,0.12);
max-height: 300px;
overflow-y: auto;

/* Dropdown item hover */
background: #F5F5F5;

Avatars & User Medals

Rank Badges

css/* Base badge */
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
border-radius: 9999px;
font-size: 12px;
font-weight: 500;

/* Grandmaster */
background: #FFEBEE; color: #FF0000;

/* Master */
background: #F3E5F5; color: #8B00FF;

/* Expert */
background: #E3F2FD; color: #008ABF;

/* Contributor */
background: #F5F5F5; color: #616161;

/* Novice */
background: #FAFAFA; color: #9E9E9E;

Tags / Chips

css/* Default tag */
background: #F5F5F5;
color: #616161;
border-radius: 9999px;
padding: 4px 12px;
font-size: 12px;
font-weight: 400;

/* Interactive tag (hover) */
background: #E0E0E0;
cursor: pointer;

/* Selected tag */
background: #E3F2FD;
color: #1CA3EC;

/* Topic tag (Python, ML, etc.) */
background: #E8F5E9;
color: #2E7D32;

7. Motion & Animation

Duration Tokens

Easing Functions (Material Motion)

css--kaggle-ease-standard:    cubic-bezier(0.4, 0.0, 0.2, 1);  /* Most transitions */
--kaggle-ease-decelerate:  cubic-bezier(0.0, 0.0, 0.2, 1);  /* Enter screen */
--kaggle-ease-accelerate:  cubic-bezier(0.4, 0.0, 1.0, 1);  /* Exit screen */
--kaggle-ease-sharp:       cubic-bezier(0.4, 0.0, 0.6, 1);  /* Temporary surfaces */

Animation Patterns

Reduced Motion

css@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

8. Accessibility Standards

Color Contrast Requirements

Focus States

• All interactive elements must show visible focus rings
• Focus outline: 3px solid #20BEFF with 2px offset
• Never suppress :focus-visible without alternative
• Material ripple must not replace keyboard focus indicators

Keyboard Navigation

ARIA Patterns

html<!-- Leaderboard table -->
<table role="grid" aria-label="Competition leaderboard">
  <thead>
    <tr>
      <th scope="col" aria-sort="ascending">Rank</th>
      <th scope="col">Team Name</th>
      <th scope="col">Score</th>
    </tr>
  </thead>
</table>

<!-- Rank badge -->
<span role="img" aria-label="Grandmaster rank">
  <svg aria-hidden="true">...</svg>
  Grandmaster
</span>

<!-- Notebook cell running state -->
<div role="status" aria-live="polite" aria-label="Cell executing">
  Running...
</div>

<!-- Upvote button -->
<button aria-pressed="false" aria-label="Upvote notebook (142 votes)">
  <span class="material-icons" aria-hidden="true">thumb_up</span>
  <span>142</span>
</button>

Screen Reader Considerations

• Use semantic HTML (<nav>, <main>, <table>, <article>)
• Announce leaderboard score changes with aria-live="polite"
• Notebook cell output regions: role="region" with descriptive label
• Medal icons: always include text alternative
• Score numbers: include unit in accessible label ("Score: 0.9821 RMSE")

9. Platform-Specific Guidelines

Web Application Layout Structure

┌─────────────────────────────────────────────────────────────────┐
│ Navbar (fixed, 64px, white + bottom border + subtle shadow)     │
│  [≡ Kaggle Logo] | Competitions | Datasets | Code | Models |   │
│                              [Search Bar]    [Notifications] [👤]│
├───────────────────┬─────────────────────────────────────────────┤
│                   │                                             │
│  Left Sidebar     │   Main Content Area                        │
│  (280px fixed)    │   max-width: varies by page type            │
│                   │                                             │
│  - Your Work      │  ┌─────────────────────────────────────┐   │
│  - Competitions   │  │ Page Header / Hero                  │   │
│  - Datasets       │  ├─────────────────────────────────────┤   │
│  - Notebooks      │  │ Content (cards, table, notebook)    │   │
│  - Models         │  └─────────────────────────────────────┘   │
│  - Discussions    │                                             │
│  - Learn          │                                             │
└───────────────────┴─────────────────────────────────────────────┘

Competition Page Pattern

Page Header (cover image + title + host + prize + deadline)
  ├── Competition tabs: Overview | Data | Notebooks | Discussion | Leaderboard | Rules | Team
  └── Join Competition button (primary CTA)

Overview Tab
  ├── Description (rich text, max-width 800px)
  ├── Evaluation metric explanation
  └── Timeline section

Leaderboard Tab
  ├── Public / Private toggle
  ├── Score + Rank + Team columns
  ├── Top 3 highlighted rows
  └── My submission row (sticky highlight)

Notebook Editor Layout

Top bar (Run | Stop | Save | Share | settings)
  ├── Notebook title (editable inline)
  └── Accelerator badge (GPU/TPU/CPU)

Cell Area (full height, scrollable)
  ├── Code cells (input + output pairs)
  ├── Markdown cells (rendered)
  └── Cell toolbar (run, add, delete, move)

Right Panel (collapsible, 320px)
  ├── Session info (runtime, memory)
  ├── Variables explorer
  └── Data tab (attached datasets)

Dataset Page Pattern

Header (title + owner avatar + usability score + license)
  └── Download button (primary) + New Notebook (secondary)

Tabs: Data | Code | Discussion | Activity

Data Tab
  ├── File tree (left panel)
  └── Data preview / column stats (main panel)
       ├── Column name + type
       ├── Unique values, nulls %
       └── Mini histogram or bar chart

Dialog / Modal Sizes

Quick Reference

Essential CSS Variables

css/* Brand */
--kaggle-color-brand:    #20BEFF;
--kaggle-color-accent:   #1CA3EC;
--kaggle-color-primary:  #008ABF;
--kaggle-color-navy:     #003A70;
--kaggle-link-color:     #1CA3EC;

/* Light surfaces */
--kaggle-bg-default:     #FFFFFF;
--kaggle-bg-muted:       #F8F8F8;
--kaggle-bg-surface:     #F5F5F5;
--kaggle-bg-code:        #F7F7F7;

/* Dark surfaces */
--kaggle-bg-dark:        #1A1A2E;
--kaggle-bg-dark-surface:#16213E;

/* Text */
--kaggle-text-default:   #212121;
--kaggle-text-muted:     #616161;
--kaggle-text-secondary: #9E9E9E;

/* Borders */
--kaggle-border-default: #E0E0E0;
--kaggle-border-subtle:  #EEEEEE;

/* Competition ranks */
--kaggle-gold:           #F5A623;
--kaggle-silver:         #C0C0C0;
--kaggle-bronze:         #CD7F32;
--kaggle-grandmaster:    #FF0000;
--kaggle-master:         #8B00FF;
--kaggle-expert:         #008ABF;

/* Status */
--kaggle-color-success:  #2E7D32;
--kaggle-color-error:    #C62828;
--kaggle-color-warning:  #F57F17;
--kaggle-color-info:     #1565C0;
--kaggle-color-running:  #00838F;

/* Typography */
--kaggle-font-primary: "Google Sans", "Roboto", sans-serif;
--kaggle-font-body:    "Roboto", sans-serif;
--kaggle-font-mono:    "Roboto Mono", "Source Code Pro", monospace;

/* Spacing */
--kaggle-space-8:  0.5rem;
--kaggle-space-16: 1rem;
--kaggle-space-24: 1.5rem;
--kaggle-space-32: 2rem;

/* Radius */
--kaggle-radius-medium: 4px;
--kaggle-radius-large:  8px;
--kaggle-radius-full:   9999px;

/* Focus */
--kaggle-focus-color:   #20BEFF;
--kaggle-focus-width:   3px;
--kaggle-focus-offset:  2px;

Resources

• Kaggle Homepage: https://www.kaggle.com
• Brand Guidelines: https://www.kaggle.com/brand-guidelines
• Competitions: https://www.kaggle.com/competitions
• Datasets: https://www.kaggle.com/datasets
• Notebooks: https://www.kaggle.com/code
• Models: https://www.kaggle.com/models
• Learn: https://www.kaggle.com/learn
• Discussions: https://www.kaggle.com/discussions
• Documentation: https://www.kaggle.com/docs

Based on Kaggle's publicly observable web design patterns, Material Design foundations (Google), and official Kaggle brand references. For the most current specifications, refer to kaggle.com and the official brand guidelines.