Mora design system

---
version: alpha
name: Mora
description: "Light monochrome interface measured from mora.com: Artific Trial Semi Bold type with Artific Trial Medium, tonal surfaces and 10px corners."
colors:
  background: "#FAFAFA"
  surface: "#FAFAFA"
  on-surface: "#212121"
  on-background: "#212121"
  on-surface-strong: "#000000"
  on-surface-variant: "#737373"
  on-surface-muted: "#8C8C8C"
  surface-container-low: "#FFFFFF"
  overlay: "#14141405"
  outline: "#CCCCCC33"
  outline-variant: "#D9D9D9"
  primary: "#212121"
  on-primary: "#FFFFFF"
  secondary: "#4A69F6"
typography:
  headline-display:
    fontFamily: Artific Trial Semi Bold
    fontSize: 48px
    fontWeight: 600
    lineHeight: 1.1
  headline-lg:
    fontFamily: Artific Trial Semi Bold
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: 0.01em
  headline-md:
    fontFamily: Artific Trial Medium
    fontSize: 36px
    fontWeight: 500
    lineHeight: 1.2
  headline-sm:
    fontFamily: Basier Circle Medium
    fontSize: 32px
    fontWeight: 500
    lineHeight: 1
  body-md:
    fontFamily: Basier Circle Regular
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
    letterSpacing: -0.01em
  body-lg:
    fontFamily: Basier Circle Regular
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: -0.01em
  body-sm:
    fontFamily: sans-serif
    fontSize: 12px
    fontWeight: 400
  caption:
    fontFamily: Basier Circle Regular
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.45
    letterSpacing: -0.01em
  label-md:
    fontFamily: Basier Circle Medium
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.43
    letterSpacing: -0.01em
  code:
    fontFamily: Geist Mono
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.71
  headline-display-mobile:
    fontFamily: Artific Trial Semi Bold
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.1
  headline-lg-mobile:
    fontFamily: Artific Trial Semi Bold
    fontSize: 32px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: 0.01em
  headline-md-mobile:
    fontFamily: Artific Trial Medium
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.2
rounded:
  sm: 6px
  md: 10px
  lg: 28px
spacing:
  xs: 4px
  sm: 8px
  md: 10px
  lg: 17.58px
  gutter: 10px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: 8px 12px
    height: 36px
  button-primary-hover:
    backgroundColor: "#292929"
  button-secondary:
    textColor: "{colors.on-surface}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: 8px 12px
    height: 36px
  button-secondary-hover:
    backgroundColor: "#2121210D"
  button-outline:
    textColor: "{colors.on-surface}"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: 8px 12px
    height: 36px
  button-ghost:
    textColor: "{colors.on-surface}"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: 8px 12px
  link:
    textColor: "{colors.on-primary}"
---

# Mora Design System

## Overview

Mora describes itself as: “Mora is an AI data analyst for B2B teams that delivers insights without the wait. Connect your database, warehouse, CRM and more to get instant answers.” The interface is light, built on **Snow (#FAFAFA)** with **Charcoal (#212121)** text and almost no color: actions are carried by contrast, not hue.

Type is set in **Artific Trial Semi Bold** and **Artific Trial Medium**, with **Geist Mono** for code. Headlines run large; body text is 14px. Depth comes from hairline borders and inset highlights rather than drop shadows. Corners are mostly 10px.

Measured from [mora.com](https://mora.com/) on November 4, 2026 at 1440×900 and 390×844 from 296 rendered elements. Values are computed styles from the live page, not the original source files.

## Colors

The palette has 12 roles.

- **Snow (#FAFAFA):** Page background, seen 1 time. Token `background`.
- **Charcoal (#212121):** Primary text and headings, seen 65 times. Token `on-surface`.
- **Near Black (#000000):** Headings and emphasis, seen 3 times. Token `on-surface-strong`.
- **Slate (#737373):** Secondary text, seen 17 times. Token `on-surface-variant`.
- **Gray (#8C8C8C):** Muted text and metadata, seen 7 times. Token `on-surface-muted`.
- **White (#FFFFFF):** Raised areas one step from the page, seen 1 time. Token `surface-container-low`.
- **Charcoal 2% (#14141405):** Translucent fill for cards and controls, seen 3 times. Token `overlay`.
- **Silver 20% (#CCCCCC33):** Borders and dividers, seen 6 times. Token `outline`.
- **Silver (#D9D9D9):** Secondary dividers, seen 1 time. Token `outline-variant`.
- **Charcoal (#212121):** Primary buttons and calls to action, seen 77 times. Token `primary`.
- **White (#FFFFFF):** Text and icons on primary. Token `on-primary`.
- **Indigo (#4A69F6):** Accent in text, fills and borders, seen 2 times. Token `secondary`.

## Typography

**Artific Trial Semi Bold**, **Artific Trial Medium**, **Basier Circle Medium**, **Basier Circle Regular**, **sans-serif** and **Geist Mono** (monospace) share the interface. Fallback stack: `Artific Trial Semi Bold, Artific Trial Semi Bold Placeholder, sans-serif`. Other loaded fonts: Fragment Mono, JetBrains Mono, Inter.

- **headline-display:** Artific Trial Semi Bold 48px at weight 600, line height 1.1 (40px on mobile). Page title (h1).
- **headline-lg:** Artific Trial Semi Bold 40px at weight 600, line height 1.1, tracking 0.01em (32px on mobile). Section headings (h2).
- **headline-md:** Artific Trial Medium 36px at weight 500, line height 1.2 (24px on mobile). Sub-section headings.
- **headline-sm:** Basier Circle Medium 32px at weight 500, line height 1. Card and feature titles.
- **body-md:** Basier Circle Regular 14px at weight 400, line height 1.43, tracking -0.01em. Body text.
- **body-lg:** Basier Circle Regular 16px at weight 400, line height 1.5, tracking -0.01em. Lead paragraphs.
- **body-sm:** sans-serif 12px at weight 400. Secondary and small text.
- **caption:** Basier Circle Regular 11px at weight 400, line height 1.45, tracking -0.01em. Captions and fine print.
- **label-md:** Basier Circle Medium 14px at weight 500, line height 1.43, tracking -0.01em. Buttons, navigation and labels.
- **code:** Geist Mono 14px at weight 400, line height 1.71. Code and technical values.

## Layout

Spacing does not follow a strict grid: 60% of measured values are multiples of 4px, so match the measured steps rather than rounding to a grid.

- **Scale:** xs 4px, sm 8px, md 10px, lg 17.58px.
- **Gaps:** 10px is the most common gap in flex and grid layouts.
- **Breakpoints:** 809px, 809.98px, 810px, 1199px, 1199.98px.

## Elevation & Depth

The design avoids drop shadows. Layers are separated by tonal surface steps (#FFFFFF) and hairline rings:

- `rgba(33, 33, 33, 0.15) 0px 0px 0px 1px, rgb(255, 255, 255) 0px -1px 1px 0px inset`
- `rgba(33, 33, 33, 0.2) 0px 0px 0px 0px`
- `rgba(255, 255, 255, 0.4) 0px 0px 3px 1px inset`

## Shapes

Most elements use 10px corners. Measured radii, most used first:

- **md (10px):** 48 elements.
- **sm (6px):** 20 elements.
- **lg (28px):** 16 elements.

## Components

Measured from the rendered page. Token values reference the tokens above.

- **button-primary (“Sign up”):** #212121 fill, #FFFFFF text, 12px/400, 10px radius, padding 8px 12px, shadow `rgba(33, 33, 33, 0.2) 0px 0px 0px 0px`.
- **button-primary-hover:** background #292929, text #FFFFFF on hover.
- **button-secondary (“Login”):** transparent fill, #212121 text, 12px/400, 10px radius, padding 8px 12px, shadow `rgba(255, 255, 255, 0.4) 0px 0px 3px 1px inset`.
- **button-secondary-hover:** background #2121210D, text #212121 on hover.
- **button-outline (“Setup for agents”):** transparent fill, #212121 text, 14px/500, 10px radius, padding 8px 12px, border 1px solid #CCCCCC.
- **button-ghost (“Setup for agents”):** transparent fill, #212121 text, 14px/500, 10px radius, padding 8px 12px, border 1px solid #CCCCCC.
- **link:** transparent fill, #FFFFFF text, padding 0px.

## Do's and Don'ts

- Do use #FAFAFA for the page and lift surfaces in small steps: #FFFFFF.
- Do keep text in 4 levels: #212121, #000000, #737373, #8C8C8C.
- Do let contrast carry emphasis; primary actions use #212121 on #FAFAFA.
- Do reuse the measured spacing steps (8px, 10px, 17.58px).
- Do use 10px corners on most elements; larger surfaces also use 6px and 28px.
- Don't use #8C8C8C for body text; it reaches 3.22:1 on #FAFAFA. Keep it for large text or metadata.
- Don't add drop shadows for depth; use hairline rings and tonal surfaces.
- Don't introduce new font families beyond Artific Trial Semi Bold, Artific Trial Medium, Basier Circle Medium, Basier Circle Regular, sans-serif and Geist Mono.
- Don't add saturated accent colors; the measured palette is almost entirely neutral.
- Don't make interface transitions slower than 0.4s.

## Motion

Interface transitions are quick: 0.4s, 0.2s. Longer ambient animations run 0.8s.

- **Easing:** `cubic-bezier(0.44, 0, 0.56, 1)`, `ease`.

Generated by [Sitepeel](https://sitepeel.dev/design-md/mora.com/), the free DESIGN.md generator (engine 2026.10.29+b828a475ee10).