# Table — Chart-Specific Rules

> Extends the global rules in [data-visualization-guide.md](../data-visualization-guide.md). All global rules apply. This file defines table-specific color, typography, stroke, and layout conventions.

---

## Overview

Tables display structured data in rows and columns. They follow the same color system and typography as all other chart types, with their own rules for fills, strokes, and corner treatment. Tables are treated as a chart type — they have a title, a consistent color theme, and visual hierarchy applied through fill weight rather than borders.

---

## Color Themes

### Single table
Use a **single color theme** for the entire table (e.g., all Blue, all Pink, or all Orange). Do not mix color families within one table unless differentiation of specific values is explicitly required by the data.

### Multiple tables on one page
Each table gets its own color theme drawn from the design system's named color scales, in priority order: Pink → Blue → Orange → (extended scales). No two adjacent tables should share the same theme.

---

## Title

- **Font:** Figtree SemiBold
- **Size:** 15px
- **Color:** Primary text (dark, e.g., `#111827`)
- **Alignment:** Centered above the table, outside the table border
- **Spacing:** 12px below the title before the table begins

---

## Header Row (First Row)

The top row of the table — typically containing column names.

- **Fill:** Color stop **300** of the table's color theme
- **Text color:** Color stop **900** of the same theme
- **Font:** Figtree Medium
- **Text alignment:** Left, with consistent left padding (≥12px)
- **No stroke** on the header row itself — the outer table border handles the edge

---

## Body Rows

All rows below the header row.

- **No stroke** on individual rows or cells
- **Alternating fill rule:**
  - **3 or more body rows:** Apply color stop **50** of the table's color theme to every other row (rows 2, 4, 6…). Odd rows (1, 3, 5…) have no fill (transparent/white).
  - **2 or fewer body rows:** All rows have no fill (transparent/white)
- **Text color:** Secondary text color (e.g., `#6B7280`)
- **Font:** Figtree Regular
- **Text alignment:** Left, with consistent left padding (≥12px)

---

## First Column — Categorical Treatment

If the values in the first column are **categorical** (i.e., named labels such as compound names, patient IDs, conditions — not numbers or values that relate to each other quantitatively):

- **Fill:** Color stop **100** of the table's color theme, applied to the entire first column (including body rows — but not the header cell, which is already covered by the header row fill)
- **Font:** Figtree Medium (slightly heavier than data cells)
- **Text alignment:** Left with padding

If the first column contains **quantitative values** or values that are not categorically distinct labels, apply no special fill — treat it as a normal body column.

---

## Outer Border & Corners

- **Stroke:** Color stop **300** of the table's color theme, **1px** weight, applied around the **entire table as a single shape**
- **Corner radius:** Round the corners of the **outer border only** — approximately **8px**. Do not round any individual cell, row, or column corners.
- No internal dividers, column borders, or row borders between cells

---

## Cell Spacing & Padding

- **Cell padding:** At least 12px left and right, 10px top and bottom within each cell
- **Consistent column widths:** All data columns should be evenly spaced unless column content length requires adjustment
- **Row height:** Consistent across all body rows; the header row may be the same height or slightly taller

---

## Typography Summary

| Element | Font | Weight | Notes |
|---|---|---|---|
| Table title | Figtree | Demi Bold | Centered above table |
| Header row | Figtree | Medium | All caps optional; left-aligned |
| First column (categorical) | Figtree | Medium | Left-aligned with padding |
| Body cells | Figtree | Regular | Left-aligned with padding |

---

## What to Never Do

- **Never add strokes to individual cells or rows.** Only the outer table border uses a stroke.
- **Never mix color themes within a single table** unless values require explicit differentiation.
- **Never round individual cell corners.** Only the overall table container is rounded.
- **Never center-align numeric data** if left alignment is specified — maintain left alignment throughout.
- **Never omit the outer border stroke.** Every table must have a 300-stop border around its full extent.
- **Never use fill on body rows when there are 2 or fewer rows.** Keep them transparent.

---

## Quick Reference

| Property | Value |
|---|---|
| Title font | Figtree SemiBold, 15px |
| Header fill | Color 300 |
| Header text | Color 900, Medium weight |
| Alternating row fill | Color 50 (every other row, only when ≥3 rows) |
| Categorical first column fill | Color 100 |
| Outer border | Color 300, 1px |
| Corner radius | 8px on outer border only |
| Text alignment | Left with ≥12px padding |

---

## Notes

*Add agent or design team notes here as table conventions evolve.*