Tables
Five table variants for different use cases. Each is designed to make data easy to scan.
Default Table
Clean editorial style with subtle depth and hover states.
| Initiative | Target | Confidence | Owner |
|---|---|---|---|
| Conservatories | €110K revenue | 70% | Ammar |
| Ireland Launch | Pipeline ready | 85% | Ammar |
| Lead Infrastructure | 28% connection rate | 60% | Sales Team |
Cards Table
Rows become cards - perfect for key-value data and mobile viewing. Headers are hidden.
| Annual Target | €21.3M total revenue for 2026 | 55-60% confidence at time of setting |
| Q1 Focus | Lead Prioritisation + Campaign Excellence | Two strategic rocks to get right |
| New Markets | Conservatories (Jan) + Ireland (Apr) | Growth engines for H1 |
Comparison Table
Side-by-side comparison with visual good/bad indicators. Great for "do this, not that" content.
| OKR Element | Write This ✓ | Not This ✗ |
|---|---|---|
| Objective | "Launch Conservatories to €110K revenue" | "Do Conservatory stuff" |
| Key Result | "Achieve 28% lead connection rate by Mar 31" | "Improve lead handling" |
| Metric | "€ revenue, % conversion, # units" | "Better, more, improved" |
Minimal Table
Borderless, typography-focused. Clean and understated.
| Date | Milestone | Status |
|---|---|---|
| Jan 25 | OKRs submitted | Due |
| Feb 1 | Conservatory launch | On track |
| Apr 1 | Ireland go-live | Planning |
Striped Table
Alternating backgrounds with accent header. Good for longer data tables.
| ID | Task | Priority | Due |
|---|---|---|---|
| OKR-1 | Write Conservatory objectives | High | Jan 25 |
| OKR-2 | Define Ireland KRs | High | Jan 25 |
| OKR-3 | Set lead infra targets | Medium | Jan 25 |
| OKR-4 | Review with Felix | Medium | Jan 26 |
| OKR-5 | Final submission | High | Jan 27 |
Multi-Column Layouts
Flexible layouts for organizing content side-by-side. All layouts stack responsively on mobile.
Split (50/50)
Column One
Equal width columns are great for comparing two things or showing related content side-by-side.
Column Two
Both columns take exactly 50% of the available space, with a configurable gap between them.
Weighted (60/40)
Main Content (60%)
The weighted layout gives more space to primary content while keeping secondary content visible. Perfect for main content plus supporting details.
Supporting (40%)
Related notes, metadata, or quick reference.
Thirds
Objective 1
Objective 2
Objective 3
Sidebar
Cards Grid
Auto-flowing card grid that adapts to available space.
Automatically sized cards that flow and wrap based on container width.
Great for feature lists, team members, or any repeating content.
Each card has hover effects and consistent styling built in.
Minimum width ensures readability on all screen sizes.
Cards
Flexible containers for highlighting content blocks. Multiple variants and colors available.
Card Variants
Default
Clean white card with subtle shadow. The workhorse for most content.
Outlined
Border-only, no shadow. Lighter visual weight.
Accent
Colored left border for emphasis. Great for tips or key points.
Glass
Frosted glass effect. Beautiful over colored backgrounds.
Filled Cards (All Colors)
Blue
Green
Amber
Red
Purple
Neutral
Stat Blocks
Display key metrics and numbers prominently. Multiple sizes and styles.
Sizes
With Trends
Callouts
Highlight important information, tips, warnings, and more.
This is an info callout. Use it for general information and context.
Tips are for helpful suggestions and best practices. The yellow makes them feel warm and helpful.
Warnings draw attention to potential issues or things to be careful about.
Danger callouts are for critical information that must not be missed. Use sparingly.
Success callouts celebrate wins and confirm completed actions.
This callout can be collapsed! Click the header to toggle. Great for supplementary information that doesn't need to be visible by default.
You can put as much content in here as you need.
Combining Components
These components are designed to work together. Here's an example of a complete section:
Felix needs UK-specific OKRs for Q1 2026 in the Global Leadership spreadsheet. Focus on outcomes, not activities.
| Initiative | Outcome Focus ✓ | Activity Trap ✗ |
|---|---|---|
| Conservatories | "€110K revenue by Mar 31" | "Launch the product" |
| Ireland | "Pipeline built, team trained" | "Prepare for launch" |
| Lead Infra | "28% connection rate" | "Fix lead scoring" |
Charts & Data Visualization
Visual components for displaying metrics, progress, and comparative data. All charts are CSS/SVG-based, no JavaScript libraries required.
Metric Cards
Highlight key numbers with optional sparklines and change indicators.
Progress Bars
Show completion status or goal progress with color-coded indicators.
Bar Charts
Compare values across categories with vertical bars.
Donut Charts
Show proportional data with an optional center label.