Skip to content
DesignMunkDesignMunk Submit a site

Mora

mora.com
The Analytics Platform built for the AI era
AI Analytics Framer Homepage Artific Basier Circle
Share Visit site
mora.com DESKTOP · 1440
Mora

AI Breakdown

Design export

# Design brief: the Mora design language

Below is a complete design specification measured from a real, published web page. Use it as a design language for the user's product. It is not a page to reproduce.

## Reference images

- Full page: https://cdn.designmunk.com/2026/09/09161330/mora-com-featured.webp
- Above the fold: https://cdn.designmunk.com/2026/09/09161330/mora-com-featured.webp
- On DesignMunk: https://designmunk.com/mora/

Study these for hierarchy, rhythm, spacing and density. Where an image and the written spec disagree, the spec wins: the tokens were read from the page's own CSS, the images are one rendering of it.

## Before you start

Ask the user what they are building, who it is for, and what brand assets they already have — name, colours, typefaces. Wait for their answers before writing anything. Everything below is then applied to their product, not to the reference.

## Design specification

# Mora: Monochrome Grids and Black Rules Sell Analytics

## Overview

Mora's UI is disciplined, analytical, and minimally colored. Pale surfaces, near-black text, and crisp 1px borders keep attention on product detail. Spacing is calm and roomy, with 40–80px section rhythm and tight internal gaps. Use this style when clarity, speed, and credibility are the priority.

## Colors

- **primary (#8c8c8c):** Default body copy and muted interface text.
- **secondary (#caccd1):** Sub-labels, captions, and disabled or subtle elements.
- **tertiary (#0000ee):** Link color and high-emphasis accents; also used for primary-button label per tokens.
- **neutral (#fafafa):** Page background and card surfaces.
- **border (#000000):** Structural 1px rules, outlines, and text in high-emphasis contexts.
- **brand-eerie-black (#1c1c1c):** Deep ink for prominent headings and dark surfaces.
- **surface (#fafafa):** Alias of Neutral for component backgrounds.
- **on-surface (#8c8c8c):** Default text on Neutral/Surface backgrounds.

## Typography

- Headline Large — Artific Trial Semi Bold, 48px/1.1/600. Use for hero headlines and major page intros.
- Headline Medium — Artific Trial Semi Bold, 40px/1.1/600 with 0.01em tracking. Section openers.
- Headline Small — Artific Trial Medium, 36px/1.2/500. Mid-level headings within feature sections.
- Headline XS — System sans-serif, 18px/1.22/500. Eyebrows, tab labels, and compact section titles.
- Body MD — Basier Circle Medium, 14px/1.71/500 with -0.01em tracking. Default body copy, nav, and meta text.
Availability: All listed families are custom/self-hosted (not Google). Substitutes with similar tone:
- For Artific Trial: Space Grotesk, Manrope, or Plus Jakarta Sans (all free, Google Fonts) as geometric/modern display sans.
- For Basier Circle: Inter, Plus Jakarta Sans, or Work Sans (free, Google Fonts) as neutral body sans.

## Layout

Spacing follows an 8px base. Use xs 8px for chips and tight gaps, sm 16px for most internal paddings, md 24px for card gutters, lg 40px between modules, and xl 80px for section padding and hero spacing. Rely on 1px black borders to define columns and frames around imagery. Keep copy lines short and set generous vertical rhythm to maintain the document-like feel.

## Elevation & Depth

Shadows are minimal and functional. Use sm (rgba(0,0,0,0.05) 0 0 8px 3px) for subtle lift on floating elements; md (rgb(250,250,250) 0 0 0 2px) as a light ring for focus states. Large shadows are none. Hierarchy is carried primarily by borders (#000000), tonal steps (#fafafa vs #1c1c1c), and whitespace.

## Shapes

Two radii define the language: sm 10px for interactive controls (buttons, tabs, chips) and md 16px for cards and large containers. Link-style buttons are square (0px) to read as text affordances.

## Components

Buttons
- Primary button: background #212121, label #0000ee, 36px height, 8px×12px padding, radius 10px. Use for primary CTAs.
- Secondary button: text #212121, 36px height, 8px×12px padding, radius 10px; no fill by default.
- Link button: text #8c8c8c, radius 0px. Inline actions.

Card
- Background #fafafa, text #000000, radius 16px, padding 12px 12px 16px 20px. Use as the base container for feature blocks and previews.

### Announcement Bar
Full-width strip at the very top for release notes ("Introducing Mora"). Background can use #1c1c1c with text styled in Body MD; include a right-aligned inline link in #0000ee.

### Global Navigation
Single row with product/solutions/customers/resources/pricing plus auth actions. Type set in Body MD (14px). Use 16–24px horizontal paddings and 1px bottom rule (#000000) to anchor it.

### Hero Two-Column
Left column: Headline Large (48px) and a short paragraph in Body MD. Right column: primary and secondary CTAs; keep 16px gap and 10px radii. Place a small "Watch demo" item under the headline.

### Product Preview Tabs
A compact tab header with two options ("Dashboard", "Data Studio"). Use 1px black outline, 10px radius, 14–18px labels, and sm shadow for active state.

### Feature Trio
Three side-by-side cards: "Connect your data", "Ask anything", "Visualize the answer". Each uses Card padding, 18px title, 14px body, and a link in #0000ee.

### SQL Editor Block
Code panel showing a query and guidance. Use a #fafafa surface with a #000000 border and the inner shadow token for inset edges. Labels in 14px; commands as link-style buttons.

### Setup Steps (01–03)
A numbered vertical process with bold numerals and short titles. Use 24px vertical gaps inside a card and 40px section spacing outside.

### Footer Mega Links
Multi-column list of product, solutions, use cases, and company. Body MD at 14px, 16px column gutters, and a 1px top border.

## Do's and Don'ts

Do
- Use #0000ee sparingly for links and key accents; most UI should stay monochrome.
- Frame screenshots and modules with #000000 1px borders to match the product aesthetic.
- Keep radii consistent: 10px for controls, 16px for cards.
- Set long-form copy at 14px with 1.71 line-height to preserve the airy, document-like rhythm.

Don't
- Add heavy drop shadows; lg/xl shadows are none in this system.
- Introduce saturated background colors that compete with the product preview.
- Mix additional radii or rounded pills; stick to 10px/16px.
- Overuse blue on non-interactive text; reserve it for links and primary affordances.

## Agent Prompt Guide

Quick color reference: text #8c8c8c, background #fafafa, border #000000, accent #0000ee.

1) Build the hero
- Background #fafafa. Two columns.
- Left: H1 set in "Artific Trial Semi Bold" 48px/1.1/600 (fallback: Space Grotesk 700). Color #1c1c1c.
- Paragraph in "Basier Circle Medium" 14px/1.71/500 (fallback: Inter 500), color #8c8c8c.
- Right: primary button 36px tall, 8px×12px padding, radius 10px, background #212121, label #0000ee; secondary button text #212121, same sizing.
- Section padding: top/bottom 80px, column gap 24px.

2) Product preview tabs
- Container background #fafafa with 1px border #000000, radius 10px.
- Two labels set in 18px/1.22/500, color #1c1c1c; inactive label color #8c8c8c.
- Active tab gets md shadow ring (rgb(250,250,250) 0 0 0 2px). Horizontal padding 16px.

3) Feature card grid (3-up)
- Each card: background #fafafa, border #000000 1px, radius 16px, padding 12px 12px 16px 20px.
- Title: "Artific Trial Medium" 18px/1.22/500 (fallback: Manrope 600), color #1c1c1c.
- Body: "Basier Circle Medium" 14px/1.71/500, color #8c8c8c. Link in #0000ee.
- Grid gaps: 24px; section spacing: 40px above/below.

4) Testimonial block
- Card with radius 16px, 1px border #000000, inner shadow (rgba(0,0,0,0.1) 0 0 2px 0, #ffffff 0 0 2px 2px inset).
- Quote set in "Artific Trial Semi Bold" 36px/1.2/500 (fallback: Plus Jakarta Sans 700), color #1c1c1c; attribution in 14px, color #8c8c8c.
- Outer spacing: 80px top/bottom, internal gaps 16–24px.

## Similar Brands

- Looker: similarly utilitarian marketing with restrained color and dense previews; Looker leans into Google brand colors more than Mora.
- Mixpanel: strong product storytelling with prominent charts; uses a bold purple brand where Mora stays monochrome.
- Metabase: clean, open-source BI site with blue accents and card-based sections; Mora's borders are more assertive.
- Hex: notebook-first analytics with detailed UI shots; more color and editorial flair compared to Mora's strict grid.
- Retool: interface-heavy marketing with outlined components; adds a green accent and heavier iconography than Mora.

## Tokens

### CSS custom properties

```css
:root {
  /* Colors */
  --color-primary: #8c8c8c;
  --color-secondary: #caccd1;
  --color-tertiary: #0000ee;
  --color-neutral: #fafafa;
  --color-border: #000000;
  --color-brand-eerie-black: #1c1c1c;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 48px;
  --text-headline-lg-weight: 600;
  --text-headline-lg-leading: 1.1;
  --text-headline-md-size: 40px;
  --text-headline-md-weight: 600;
  --text-headline-md-leading: 1.1;
  --text-headline-md-tracking: 0.01em;
  --text-headline-sm-size: 36px;
  --text-headline-sm-weight: 500;
  --text-headline-sm-leading: 1.2;
  --text-headline-xs-size: 18px;
  --text-headline-xs-weight: 500;
  --text-headline-xs-leading: 1.22;
  --text-body-md-size: 14px;
  --text-body-md-weight: 500;
  --text-body-md-leading: 1.71;
  --text-body-md-tracking: -0.01em;
  --font-artific-trial-semi-bold: "Artific Trial Semi Bold";
  --font-artific-trial-medium: "Artific Trial Medium";
  --font-sans-serif: "sans-serif";
  --font-basier-circle-medium: "Basier Circle Medium";

  /* Rounded */
  --radius-sm: 10px;
  --radius-md: 16px;

  /* Spacing */
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 40px;
  --spacing-xl: 80px;

  /* Components */
  --button-primary-background-color: #212121;
  --button-primary-text-color: var(--color-tertiary);
  --button-primary-rounded: var(--radius-sm);
  --button-primary-padding: 8px 12px;
  --button-primary-height: 36px;
  --button-secondary-text-color: #212121;
  --button-secondary-rounded: var(--radius-sm);
  --button-secondary-padding: 8px 12px;
  --button-secondary-height: 36px;
  --button-link-text-color: var(--color-primary);
  --button-link-rounded: 0px;
  --card-background-color: var(--color-neutral);
  --card-text-color: var(--color-border);
  --card-rounded: var(--radius-md);
  --card-padding: 12px 12px 16px 20px;
}
```

### Tailwind theme

```css
@theme {
  --color-primary: #8c8c8c;
  --color-secondary: #caccd1;
  --color-tertiary: #0000ee;
  --color-neutral: #fafafa;
  --color-border: #000000;
  --color-brand-eerie-black: #1c1c1c;
  --color-surface: #fafafa;
  --color-on-surface: #8c8c8c;
  --font-headline-lg: "Artific Trial Semi Bold";
  --font-headline-md: "Artific Trial Semi Bold";
  --font-headline-sm: "Artific Trial Medium";
  --font-headline-xs: "sans-serif";
  --font-body-md: "Basier Circle Medium";
  --text-headline-lg: 48px;
  --text-headline-md: 40px;
  --text-headline-sm: 36px;
  --text-headline-xs: 18px;
  --text-body-md: 14px;
  --tracking-headline-md: 0.01em;
  --tracking-body-md: -0.01em;
  --font-weight-headline-lg: 600;
  --font-weight-headline-md: 600;
  --font-weight-headline-sm: 500;
  --font-weight-headline-xs: 500;
  --font-weight-body-md: 500;
  --radius-sm: 10px;
  --radius-md: 16px;
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 40px;
  --spacing-xl: 80px;
}
```

### Design tokens (DTCG)

```json
{
    "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
    "color": {
        "$type": "color",
        "primary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.549,
                    0.549,
                    0.549
                ],
                "hex": "#8c8c8c"
            }
        },
        "secondary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.792,
                    0.8,
                    0.82
                ],
                "hex": "#caccd1"
            }
        },
        "tertiary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0,
                    0,
                    0.933
                ],
                "hex": "#0000ee"
            }
        },
        "neutral": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.98,
                    0.98,
                    0.98
                ],
                "hex": "#fafafa"
            }
        },
        "border": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0,
                    0,
                    0
                ],
                "hex": "#000000"
            }
        },
        "brand-eerie-black": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.11,
                    0.11,
                    0.11
                ],
                "hex": "#1c1c1c"
            }
        },
        "surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.98,
                    0.98,
                    0.98
                ],
                "hex": "#fafafa"
            }
        },
        "on-surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.549,
                    0.549,
                    0.549
                ],
                "hex": "#8c8c8c"
            }
        }
    },
    "spacing": {
        "$type": "dimension",
        "xs": {
            "$value": {
                "value": 8,
                "unit": "px"
            }
        },
        "sm": {
            "$value": {
                "value": 16,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 24,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 40,
                "unit": "px"
            }
        },
        "xl": {
            "$value": {
                "value": 80,
                "unit": "px"
            }
        }
    },
    "rounded": {
        "$type": "dimension",
        "sm": {
            "$value": {
                "value": 10,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 16,
                "unit": "px"
            }
        }
    },
    "typography": {
        "headline-lg": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Artific Trial Semi Bold",
                "fontSize": {
                    "value": 48,
                    "unit": "px"
                },
                "fontWeight": 600
            }
        },
        "headline-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Artific Trial Semi Bold",
                "fontSize": {
                    "value": 40,
                    "unit": "px"
                },
                "fontWeight": 600,
                "letterSpacing": {
                    "value": 0.01,
                    "unit": "em"
                }
            }
        },
        "headline-sm": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Artific Trial Medium",
                "fontSize": {
                    "value": 36,
                    "unit": "px"
                },
                "fontWeight": 500
            }
        },
        "headline-xs": {
            "$type": "typography",
            "$value": {
                "fontFamily": "sans-serif",
                "fontSize": {
                    "value": 18,
                    "unit": "px"
                },
                "fontWeight": 500
            }
        },
        "body-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Basier Circle Medium",
                "fontSize": {
                    "value": 14,
                    "unit": "px"
                },
                "fontWeight": 500,
                "letterSpacing": {
                    "value": -0.01,
                    "unit": "em"
                }
            }
        }
    }
}
```

## Rules

- **Fonts.** If the specification names a custom or self-hosted family, use one of the substitutes it names. Never reference a typeface you cannot actually load — it will fall back to a system font and undo the typography.
- **Colour.** Derive the palette from the user's brand. Use the token values as a guide to *relationships* — contrast, tint, how many accents carry the page — not as hex codes to paste.
- **Never reproduce** the wordmark, mascot, logo, brand name, illustrations, icon set, screenshots or any copy from the reference.
- **Never present the result as Mora**, or imply any connection to it.
- If something is unspecified, choose clarity and legibility over decoration.

More like this

Browse AI →
weaveos.com
Weave Analytics
Weave
stivio.ai
Stivio AI
Stivio
slite.com
Slite AI
Slite
clears.ai
Clears AI
Clears