Skip to content
DesignMunkDesignMunk Submit a site

Mode

mode.com
The intelligence layer for your modern data stack
Analytics Technology Gatsby Homepage Graphik Grenette
Share Visit site
mode.com DESKTOP · 1440
Mode

AI Breakdown

Design export

---
version: alpha
name: Mode
description: The intelligence layer for your modern data stack
colors:
  primary: "#eef2e3"
  secondary: "#72a44f"
  tertiary: "#c8f169"
  neutral: "#043f2e"
  border: "#374151"
  brand-kiwi-crush: "#7cc51c"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Grenette
    fontSize: 72px
    fontWeight: 400
    lineHeight: 1.19
    letterSpacing: -0.018em
  headline-md:
    fontFamily: Grenette
    fontSize: 51px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: -0.028em
  headline-sm:
    fontFamily: Times New Roman
    fontSize: 36px
    fontWeight: 400
    lineHeight: 1.19
  headline-xs:
    fontFamily: Times New Roman
    fontSize: 25px
    fontWeight: 400
    lineHeight: 1.2
  body-md:
    fontFamily: Graphik
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  sm: 4px
  md: 8px
spacing:
  xs: 12px
  sm: 20px
  md: 30px
  lg: 56px
  xl: 120px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.neutral}"
    rounded: "{rounded.sm}"
    padding: 17px 30px 16px
    height: 50px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 17px 30px 16px
    height: 50px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: 16px
---

# Mode: Acid-Lime Panels on a Dark Teal Canvas

## Overview

Mode is an enterprise BI brand with confident, technical posture. The interface is dark-mode first, anchored in deep teal with high-contrast lime highlights. Tone is expert and direct; density is managed with generous vertical spacing, billboard-style headlines, and compact controls. Use this system when clarity under information load is the priority.

## Colors

- Primary (#EEF2E3): Soft off-white for body text, icons, and filled CTAs on dark surfaces.
- Secondary (#72A44F): Supportive green used sparingly for charts, tags, or supportive accents.
- Tertiary (#C8F169): Acid-lime highlight for hero panels, callouts, and emphasis backgrounds.
- Neutral (#043F2E): Deep teal surface and page background.
- Border (#374151): Cool slate for hairline rules, outlines, and dividers on the dark canvas.
- brand-kiwi-crush (#7CC51C): Saturated lime accent for data viz bars/lines and positive signals.
- Surface (#043F2E): Alias of Neutral; default app background.
- On-surface (#EEF2E3): Alias of Primary; default text color over dark.

## Typography

- Grenette (custom/self-hosted): Display serif for headline-lg (72px/1.19, -0.018em) and headline-md (51px/1.55, -0.028em). Not freely hosted via Google; substitutes: Fraunces (Google), Playfair Display (Google), Noe Display (commercial).
- Times New Roman (system): Used for headline-sm (36px/1.19) and headline-xs (25px/1.2). Keep to short subheads and emphatic pull lines.
- Graphik (custom/self-hosted): Primary body for body-md (18px/1.5). Not Google-hosted; substitutes: Inter (Google), IBM Plex Sans (Google), Source Sans 3 (Google).
- Guidance: Pair Grenette/Times heads with Graphik body; avoid long-form paragraphs set in serifs. Maintain high contrast: On-surface text (#EEF2E3) over Neutral (#043F2E).

## Layout

Spacing follows a stepped scale for predictable rhythm: 12px (xs) for tight element gaps, 20px (sm) for control gutters, 30px (md) for inner card/panel padding, 56px (lg) for section rhythm, and 120px (xl) for hero and major breaks. Use wide negative space around headline panels so the lime surfaces feel intentional. Content groups stack in vertical blocks with consistent 30px internal padding and 20–30px gutters for grids. Keep CTAs aligned to text columns and image edges for a clear scan path.

## Elevation & Depth

Depth is restrained. Use the sm shadow (rgba(172,171,171,0.3) 0 -1px 10px) for subtle lift on lime panels and interactive cards; md (rgba(0,0,0,0.3) 0 32px 68px) is reserved for modals or hero panels that must float. Larger shadow tokens are none—hierarchy otherwise comes from the high contrast between #043F2E and #C8F169/#EEF2E3, plus clear borders (#374151) and whitespace.

## Shapes

Two radii define language: 4px (sm) for interactive controls and compact chips, 8px (md) for containers, headline panels, and media frames. Keep within a block—don't mix 4px and 8px on the same component. Square edges (0px) are used only for link-style buttons and text decorations.

## Components

Buttons
- Primary: 50px tall; background #EEF2E3; text #043F2E; 4px radius; padding 17px 30px 16px. Default CTA on dark surfaces.
- Secondary: 50px tall; text #EEF2E3; 4px radius; same padding; apply a 1px outline in #374151 when used as an outlined button.
- Link: Text-only in #EEF2E3; 0px radius; use for inline and tertiary actions.

Card
- Background #043F2E; text #EEF2E3; 8px radius; 16px padding. Add sm shadow for lift when stacked over the page surface.

Distinctive components
### Acquisition Announcement Bar
- Full-width strip at page top. Background #C8F169; text #043F2E; compact 12px vertical padding; link styled as underline or bold.
### Hero Stacked Headline Panels
- Multiple lime (#C8F169) panels containing Grenette headlines (72px and 51px). Panels use 8px radius, 30px internal padding, sm shadow, and generous 120px top spacing.
### KPI Stat Tile
- Compact card on surface (#043F2E) with numeric in #EEF2E3 and chart accents in brand-kiwi-crush (#7CC51C). 8px radius; 16–30px padding.
### Primary/Secondary CTA Pair
- Row with primary filled "Try for free" and outlined "Request demo." Maintain 20px gap; both 50px tall; secondary uses border #374151.
### Capabilities Grid
- Section header set in Grenette (36px). Grid tiles use 30px internal padding, 8px radius, and on-surface text. Use brand-kiwi-crush for icons or bullets.
### Data Stack Rail
- Horizontal list of stack layers (Raw Data → Ingestion → Warehouse → Transformation → Modern BI). Treat as chips with 4px radius and borders #374151; highlight active state with #C8F169 background.
### Testimonial Quote
- Large serif quote in Times New Roman (36px) on surface; body/supporting text in Graphik 18px; avatar optional; 56px vertical spacing.

## Do's and Don'ts

- Do reserve #C8F169 for panels, highlights, and active chips; keep it scarce outside hero and key calls.
- Do use Grenette for large headlines only; keep paragraphs and UI text in Graphik 18px/1.5.
- Do apply 4px radii to controls and 8px to containers; don't mix radii within the same component.
- Don't rely on heavy shadows; prefer contrast, borders (#374151), and spacing for separation.
- Don't set outlined CTAs without a visible 1px border on #043F2E; they will disappear.
- Don't place long blocks of serif text over lime backgrounds; legibility drops versus on-surface use.

## Agent Prompt Guide

Quick reference
- Text: #EEF2E3 (On-surface)
- Background: #043F2E (Surface)
- Border: #374151
- Accent: #C8F169 (Tertiary) and #7CC51C (brand-kiwi-crush)

1) Build the hero headline panel
- Container: background #C8F169, radius 8px, padding 30px, shadow rgba(172,171,171,0.3) 0 -1px 10px.
- H1: font Grenette 72px/1.19, letter-spacing -0.018em, color #043F2E.
- Place on page background #043F2E with 120px top margin and 56px bottom margin.

2) Create the CTA pair
- Primary button: height 50px; padding 17px 30px 16px; radius 4px; background #EEF2E3; text #043F2E.
- Secondary button: height 50px; padding 17px 30px 16px; radius 4px; text #EEF2E3; 1px border #374151; transparent background.
- Gap between buttons: 20px.

3) Design a capabilities tile
- Card: background #043F2E; radius 8px; padding 30px; text #EEF2E3.
- Title: Times New Roman 36px/1.19; Body: Graphik 18px/1.5.
- Optional icon/accent: #7CC51C.

4) Build the data-stack rail
- Each chip: text #EEF2E3, border 1px #374151, radius 4px, padding 12px 20px.
- Active chip: background #C8F169; text #043F2E.
- Spacing: 20px gap between chips; 56px section padding.

## Similar Brands

- ThoughtSpot: Enterprise analytics with confident typography; leans lighter backgrounds, while Mode commits to dark surfaces with lime emphasis.
- Tableau: Clear data-viz language and enterprise tone; Tableau's palette is cooler and multi-hued versus Mode's focused teal/lime.
- Databricks: Dark surfaces and strong accent color; Databricks uses orange heat where Mode uses lime.
- Looker (Google Cloud): Minimal, typographic clarity for BI; Looker is mostly light UI, diverging from Mode's dark-first approach.

More like this

Browse Analytics →
mora.com
Mora About AI
Mora About
An editorial, single-column layout centers a bold, two-weight headline and a dense but well-kerned founder letter, with selective bolding to surface the…
About · 18 hours ago
mora.com
Mora AI
Mora
The Analytics Platform built for the AI era
Homepage · 24 hours ago
humblytics.com
Humblytics AI
Humblytics
Revenue-based analytics and A/B testing with Stripe-verified results.
Homepage · 3 days ago
primefold.ai
Primefold AI
Primefold
Ask. Understand. Act.—turn signals into strategy with Primefold XI.
Homepage · 6 days ago