Skip to content
DesignMunkDesignMunk Submit a site

Corda

corda.marketing
The AI Platform For Enterprise Authority
AI Marketing Tailwind WordPress Homepage Mozilla
Share Visit site
corda.marketing DESKTOP · 1440
Corda

AI Breakdown

Design export

# Design brief: the Corda 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/10/03064124/corda-marketing-featured.webp
- Above the fold: https://cdn.designmunk.com/2026/10/03064124/corda-marketing-featured-1440x900.webp
- On DesignMunk: https://designmunk.com/corda/

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

# Corda: Oversized Mozilla Text with Orange-First CTAs

## Overview

Corda's UI is enterprise-lean: high contrast, generous whitespace, and a single, warm accent that signals action. The tone is confident and explanatory, trading visual spectacle for clarity and proof. Layouts feel spacious rather than dense, with long-form sections that read like a guided tour. The design serves B2B stakeholders comparing tools and needing evidence quickly.

## Page Structure

- Global navigation: left-aligned logo, centered product/solutions/pricing/resource links, right-aligned actions (Log in as text; Book a Demo as filled button).
- Hero: compact announcement pill above a large two-line headline, short supporting copy, and a single primary CTA; centered layout on white.
- Product screenshot card: a wide browser-style card directly under the hero with subtle shadow and thin border.
- Trust line: short line of copy affirming enterprise adoption; light density.
- Suite Architecture/feature modules: section headline followed by a row of compact feature cards with icon/badge labels and short descriptions.
- Case Study: wide band with large headline, narrative paragraph, a link, and a row of bold KPI tiles.
- How It Works: three-step vertical stack with numbered labels, short subheads, and a supporting CTA; adjacent table for "AI Platform Breakdown."
- Live Authority Graph: dark-on-light network preview panel with stats and a small CTA.
- Testimonials: multiple quotes with star ratings and attributions; stacked cards.
- Benchmarks/metrics: compact stat tiles for platform benchmarks and delivery times.
- FAQs: accordion list with plus/minus toggles, single-column.
- Closing CTA: strong statement and a final demo button.
- Footer: multi-column links, legal, and social; light dividers on white.

## Colors

- Primary (#141414): Deep ink for headlines, body text, and icons.
- Secondary (#fcac7c): Warm peach used for soft highlights and section tints; not for text.
- Tertiary (#ef6421): Signal orange for primary CTAs, emphasis chips, and small status dots.
- Neutral (#ffffff): Paper white background for the entire page and cards.
- Border (#e5e7eb): Hairline dividers, card outlines, table rules, and input strokes.
- Surface (#ffffff): Card and panel backgrounds matching the page base.
- On-surface (#141414): Default text color sitting on white surfaces.

## Typography

- Mozilla Text (Google, freely loadable): the single family for headings and body. Display uses headline-lg at 72px/700 with tight -0.025em tracking for the hero. Section leads step down through headline-md (52px/400), headline-sm (38px/400), and headline-xs (28px/400). Body copy uses body-md at 20px/400 for readable long paragraphs.
- Recommended substitutes if Mozilla Text cannot load: Inter, Source Sans 3, or IBM Plex Sans — all widely available sans-serifs with similar x-height and tone.
- Weight strategy: reserve 700 for main H1 and key numbers; most subheads stay at 400 for calm hierarchy. Keep body at 20px with 1.4 line-height to preserve the airy rhythm.

## Layout

- Spacing scale: xs 6px for micro gaps, sm 20px for inline padding and chip spacing, md 32px for card gutters, lg 44px for section internals, xl 96px for vertical section spacing and hero/screenshot offsets.
- Grid: primarily single-column narrative with rows of cards where needed; align screenshots and data tables to the main content width. Use md (32px) internal padding in cards and lg (44px) around section content blocks.
- Constrain line length on long paragraphs to maintain comfortable reading with body-md at 20px.

## Elevation & Depth

- Shadows are subtle: sm (0 8 24 / 8%) for floating cards and the hero screenshot; md (0 20 45 -20 / 18%) for large modals or preview panels. Larger shadow tokens are set to none, so hierarchy relies on whitespace, borders (#e5e7eb), and tonal blocks using Secondary (#fcac7c).

## Shapes

- A single radius language: 8px (rounded.sm). Apply it to buttons, cards, inputs, screenshot frames, and badges. No pills; even chips keep the squared 8px profile for consistency.

## Components

- Buttons
  - Primary: #ef6421 background, #ffffff text, 52px height, 18×24 padding, 8px radius. Use for the main action in each section.
  - Secondary: #ffffff background, #141414 text, 52px height, 18×24 padding, 8px radius; pair with a primary where a secondary path exists.
  - Link: text-only, #141414, no radius; keep inline with body copy.
- Card: #ffffff background, #141414 text, 16px internal padding, 8px radius, 1px #e5e7eb border; optional sm shadow for prominence.

### Top Navigation Bar
- White background, thin bottom border (#e5e7eb). Left logo, centered nav links, right-side actions: text "Log in" plus primary "Book a Demo." Keep nav link spacing at md (32px).

### Announcement Pill
- Small rounded-rectangle chip above the hero H1. 8px radius, hairline #e5e7eb stroke or soft fill; include a tiny dot or icon in #ef6421 at the left, with body-md text.

### Hero + Screenshot
- Centered stack: headline-lg at 72/700, one body-md paragraph, and a primary button. Immediately below, a wide card with sm shadow showcasing the product; use border #e5e7eb and 8px radius.

### Suite Architecture Cards
- A row of compact feature cards under a section heading. Each card: 8px radius, card styling, short 1–2 line descriptions, and a small label/badge.

### Case Study Metrics Panel
- Left-aligned narrative with a prominent case-study H2, supporting paragraph, and a secondary link. Below or alongside, a row of 2–4 stat tiles using headline-xs (28px) numbers and body-md labels.

### Three-Step "How It Works"
- Vertical stack labeled 01/02/03. Each step uses headline-xs for the subhead and a short line of body text; end with a secondary or link CTA.

### Authority Graph Preview
- Light panel with a network visualization, small stat chips, and a compact primary button. Use md shadow if it needs emphasis over adjacent content.

### FAQs Accordion
- Single-column list. Each item: 1px #e5e7eb border top/bottom, 8px radius on hover containers, body-md text, and a plus/minus toggle.

## Do's and Don'ts

- Do reserve #ef6421 for primary CTAs and small status accents; avoid using it for long text runs.
- Do keep vertical rhythm generous: at least xl (96px) between major sections and lg (44px) inside them.
- Do use #e5e7eb for all dividers and card strokes; avoid darker borders that fight with text.
- Don't introduce additional radii or pill buttons; keep the 8px language consistent.
- Don't mix CTA copy ("Request a Demo" vs "Book a Demo") within a single page; choose one.
- Don't stack more than one shadow layer; prefer border + whitespace for separation.

## Agent Prompt Guide

Quick reference — text: #141414, background: #ffffff, border: #e5e7eb, accent: #ef6421.

1) Build the hero
- Canvas: #ffffff. Max-width container, center-aligned.
- Announcement pill: 8px radius, 1px #e5e7eb border, small left dot in #ef6421, body-md (20px/1.4) text.
- H1: Mozilla Text, 72px, weight 700, letter-spacing -0.025em, color #141414.
- Body: Mozilla Text 20px/1.4, color #141414.
- Primary CTA: 52px height, 18×24 padding, 8px radius, background #ef6421, text #ffffff.
- Spacing: lg (44px) between H1 and body, md (32px) to button, xl (96px) to next section.

2) Product screenshot card under hero
- Card: 8px radius, #ffffff background, 1px #e5e7eb border, shadow 0 8px 24px rgba(0,0,0,0.08), 16px inner padding.
- Caption or toolbar uses Mozilla Text 20px with #141414.
- Outer margin-top: lg (44px) from hero CTA.

3) Feature cards row (Suite Architecture)
- Section H2: Mozilla Text 38px/1.21, weight 400, color #141414.
- Grid: row of cards; each card uses card styling above, with a small badge tinted #fcac7c as background and label text #141414.
- Internal spacing: md (32px) padding; gap between cards: md (32px).

4) Case study metrics band
- Background: #ffffff (or a very light tint of #fcac7c at 5% if needed).
- Headline: Mozilla Text 52px/1.15 weight 400.
- Metrics: number set in 28px, label in 20px; use #141414 throughout.
- Include a link CTA styled as button-secondary or link.

5) FAQs accordion
- List of items with 1px #e5e7eb dividers, 8px radius hover/focus state.
- Question: Mozilla Text 28px/1.21, answer: 20px/1.4.
- Expand/collapse icon in #ef6421; keep text #141414.

## Similar Brands

- Ahrefs: similarly data-forward marketing SaaS; uses bold type and orange accents, but with denser tables and darker panels.
- Semrush: orange CTAs and tool screenshots; more saturated palette and busy iconography compared to Corda's restraint.
- Moz: calm sans-serif typography and proof-first sections; blues rather than orange and a softer conversion posture.
- Similarweb: enterprise narrative supported by large product captures; relies on blues/purples and heavier charts versus Corda's light cards.

## Tokens

### CSS custom properties

```css
:root {
  /* Colors */
  --color-primary: #141414;
  --color-secondary: #fcac7c;
  --color-tertiary: #ef6421;
  --color-neutral: #ffffff;
  --color-border: #e5e7eb;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 72px;
  --text-headline-lg-weight: 700;
  --text-headline-lg-leading: 1.08;
  --text-headline-lg-tracking: -0.025em;
  --text-headline-md-size: 52px;
  --text-headline-md-weight: 400;
  --text-headline-md-leading: 1.15;
  --text-headline-sm-size: 38px;
  --text-headline-sm-weight: 400;
  --text-headline-sm-leading: 1.21;
  --text-headline-xs-size: 28px;
  --text-headline-xs-weight: 400;
  --text-headline-xs-leading: 1.21;
  --text-body-md-size: 20px;
  --text-body-md-weight: 400;
  --text-body-md-leading: 1.4;
  --font-mozilla-text: "Mozilla Text";

  /* Rounded */
  --radius-sm: 8px;

  /* Spacing */
  --spacing-xs: 6px;
  --spacing-sm: 20px;
  --spacing-md: 32px;
  --spacing-lg: 44px;
  --spacing-xl: 96px;

  /* Components */
  --button-primary-background-color: var(--color-tertiary);
  --button-primary-text-color: var(--color-neutral);
  --button-primary-rounded: var(--radius-sm);
  --button-primary-padding: 18px 24px;
  --button-primary-height: 52px;
  --button-secondary-background-color: var(--color-neutral);
  --button-secondary-text-color: var(--color-primary);
  --button-secondary-rounded: var(--radius-sm);
  --button-secondary-padding: 18px 24px;
  --button-secondary-height: 52px;
  --button-link-text-color: var(--color-primary);
  --button-link-rounded: 0px;
  --card-background-color: var(--color-neutral);
  --card-text-color: var(--color-primary);
  --card-rounded: var(--radius-sm);
  --card-padding: 16px;
}
```

### Tailwind theme

```css
@theme {
  --color-primary: #141414;
  --color-secondary: #fcac7c;
  --color-tertiary: #ef6421;
  --color-neutral: #ffffff;
  --color-border: #e5e7eb;
  --color-surface: #ffffff;
  --color-on-surface: #141414;
  --font-headline-lg: "Mozilla Text";
  --font-headline-md: "Mozilla Text";
  --font-headline-sm: "Mozilla Text";
  --font-headline-xs: "Mozilla Text";
  --font-body-md: "Mozilla Text";
  --text-headline-lg: 72px;
  --text-headline-md: 52px;
  --text-headline-sm: 38px;
  --text-headline-xs: 28px;
  --text-body-md: 20px;
  --tracking-headline-lg: -0.025em;
  --font-weight-headline-lg: 700;
  --font-weight-headline-md: 400;
  --font-weight-headline-sm: 400;
  --font-weight-headline-xs: 400;
  --font-weight-body-md: 400;
  --radius-sm: 8px;
  --spacing-xs: 6px;
  --spacing-sm: 20px;
  --spacing-md: 32px;
  --spacing-lg: 44px;
  --spacing-xl: 96px;
}
```

### Design tokens (DTCG)

```json
{
    "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
    "color": {
        "$type": "color",
        "primary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.078,
                    0.078,
                    0.078
                ],
                "hex": "#141414"
            }
        },
        "secondary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.988,
                    0.675,
                    0.486
                ],
                "hex": "#fcac7c"
            }
        },
        "tertiary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.937,
                    0.392,
                    0.129
                ],
                "hex": "#ef6421"
            }
        },
        "neutral": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "border": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.898,
                    0.906,
                    0.922
                ],
                "hex": "#e5e7eb"
            }
        },
        "surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "on-surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.078,
                    0.078,
                    0.078
                ],
                "hex": "#141414"
            }
        }
    },
    "spacing": {
        "$type": "dimension",
        "xs": {
            "$value": {
                "value": 6,
                "unit": "px"
            }
        },
        "sm": {
            "$value": {
                "value": 20,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 32,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 44,
                "unit": "px"
            }
        },
        "xl": {
            "$value": {
                "value": 96,
                "unit": "px"
            }
        }
    },
    "rounded": {
        "$type": "dimension",
        "sm": {
            "$value": {
                "value": 8,
                "unit": "px"
            }
        }
    },
    "typography": {
        "headline-lg": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Mozilla Text",
                "fontSize": {
                    "value": 72,
                    "unit": "px"
                },
                "fontWeight": 700,
                "letterSpacing": {
                    "value": -0.025,
                    "unit": "em"
                }
            }
        },
        "headline-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Mozilla Text",
                "fontSize": {
                    "value": 52,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        },
        "headline-sm": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Mozilla Text",
                "fontSize": {
                    "value": 38,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        },
        "headline-xs": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Mozilla Text",
                "fontSize": {
                    "value": 28,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        },
        "body-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Mozilla Text",
                "fontSize": {
                    "value": 20,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        }
    }
}
```

## 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 Corda**, or imply any connection to it.
- If something is unspecified, choose clarity and legibility over decoration.

More like this

Browse AI →
zaro.ai
Zaro AI
Zaro
fellow.ai
Fellow AI
Fellow
thedrive.ai
The Drive AI AI
The Drive AI
workleap.com
Workleap AI
Workleap