Skip to content
DesignMunkDesignMunk Submit a site

Rekord

rekordsoftware.com
Run critical decisions with confidence using Rekord’s AI-native decision orchestration.
Finance Fintech Framer Homepage
Share Visit site
rekordsoftware.com DESKTOP · 1440
Rekord

AI Breakdown

Design export

# Design brief: the Rekord 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/30120121/rekord-1440x6436.webp
- Above the fold: https://cdn.designmunk.com/2026/10/30120121/rekord-1440x900.webp
- On DesignMunk: https://designmunk.com/rekord/

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

# Rekord: Airy fintech page with black CTA and floating cards

## Overview

A restrained, credibility-first fintech aesthetic: high-contrast text on white, minimal color, and generous whitespace. The mood is serious but not heavy; content is dense in meaning, sparse in decoration. Audience: risk, credit, and operations leaders who want clarity and speed. When in doubt, keep layouts airy, use black text, and let the blue accent handle interactions.

## Page Structure

- Notification Bar: thin site-wide announcement strip at the very top with a single link, full-width.
- Header Nav: single-row header; logo at left, primary nav links, then Login and a black pill CTA at far right.
- Hero: oversized left-aligned headline and short supporting copy; primary CTA below; to the right/underlay, a row of light "workflow" cards floats within a generous canvas.
- Metrics Row: a horizontal row of small stat chips beneath the hero content.
- Benefits: section heading followed by a vertical stack of four feature blurbs (subhead + paragraph), spaced widely for scan-ability.
- Use Cases: section heading and a row of linked items/cards pointing to key use-case pages.
- Product Building Blocks: section heading and four focused feature rows, each with a subhead and paragraph.
- Closing CTA Band: centered heading, one-line reinforcement, and the primary CTA.
- Footer: multi-column link lists for Company, Product, Solutions, and Contact, ending with legal links and address.

## Colors

- Primary (#2b2b2b): Core ink for headlines, body text, and icons.
- Secondary (#747474): Supporting text and muted labels.
- Tertiary (#0000ee): Interaction accent for links and active states.
- Neutral (#ffffff): Base canvas and card background.
- Border (#e5e7eb): Hairline dividers, input outlines, and subtle component edges.
- Brand-more-than-a-week (#8c8c8c): Additional neutral for subdued UI text.
- Surface ({colors.neutral}): Default surface; same as neutral white.
- On-surface ({colors.primary}): Default on-surface text color, matching Primary.

## Typography

- SF Pro Variable Regular (custom/self-hosted): Used for all headline and body styles. Since agents cannot load custom sources, substitute with Inter (Google), IBM Plex Sans (Google), or Source Sans 3 (Google) for similar x-height and neutrality.
- Headline Large: 72px, 400 weight, tight negative tracking for compact multi-line display headlines.
- Headline Medium: 52px, 400 weight for major section intros.
- Headline Small: 38px, 400 weight for sub-sections and feature titles.
- Headline XS: 28px for tertiary headings.
- Body MD: 20px for paragraph copy and button labels to maintain legibility on a spacious layout.

## Layout

- Spacing scale uses compact increments (4, 12, 16, 20) with a large section spacer at 80px for vertical rhythm.
- Sections typically pad top/bottom by multiples of 80px; inner gaps use 16–20px.
- Content favors single or two-column compositions with wide gutters and ample negative space. Cards and chips sit on the white surface with clear margins and consistent 8px radii.

## Elevation & Depth

- Shadows are defined as none; hierarchy relies on high-contrast type, thin borders (#e5e7eb), and large whitespace buffers.
- Density changes and tonal contrast (primary vs. secondary text) do most of the layering work. Emphasize section spacing over depth effects.

## Shapes

- Two radii: 4px (sm) for compact controls and chips; 8px (md) is the default for buttons and cards.
- Link-style buttons are square (0px), signaling a purely textual affordance.
- Rounded elements communicate clickability; square edges are reserved for inline text actions.

## Components

- Buttons
  - Primary: background #2a2a2a, text #0000ee, height 40px, padding 8px 16px, radius 8px.
  - Secondary: text #2b2b2b, height 40px, padding 8px 16px, radius 4px, no fill.
  - Link: text #2b2b2b, radius 0px.
- Card: white background, text #2b2b2b, padding 16px, radius 8px.

### Announcement Banner
A slim full-width bar at the very top with a single link. Keep type at Body MD (20px) with primary text on neutral background and 16–20px vertical padding.

### Header Navigation
One-line header with logo left, nav links center/left, and actions right. Use Body MD for items, 20px horizontal gaps, and the primary button at 40px height.

### Hero Headline Block
Left-aligned stack: Headline LG (72px), one paragraph at 20px, then the primary CTA. Vertical spacing: 20px between text lines, 80px to the visual on the right.

### Floating Workflow Cards
A horizontal trio of cards beneath/alongside the hero. Use the Card spec (white, 16px padding, 8px radius). Arrange in a loose row with 20px gaps.

### Stat Chips
Compact items showing a label and value. Use 8px radius, white background with border #e5e7eb. Set values in Headline XS (28px) and labels in Body MD (20px).

### Use-Case Links Row
A row of clickable items linking to key use cases. Treat each as a Card (8px radius, 16px padding) with a Headline SM (38px) title and a one-line description in Body MD.

### Product Feature Rows
Four stacked feature blurbs. Each uses a Headline XS (28px) title and a Body MD paragraph with 20px spacing; 80px separates each pair from the next.

### Closing CTA Band
Centered headline (Headline MD 52px), one supporting sentence in Body MD, and the primary button. Use 80px vertical padding.

## Do's and Don'ts

- Do keep generous section spacing (multiples of 80px) and avoid cramming elements.
- Do reserve #0000ee for clear interaction states; use #2b2b2b for all other text.
- Do keep card and button radii consistent (8px primary, 4px secondary) and borders at #e5e7eb.
- Don't introduce additional brand colors or heavy gradients; this system is monochrome with a single blue accent.
- Don't add drop shadows; use borders and whitespace for hierarchy.
- Don't mix unrelated type sizes—stick to 72/52/38/28/20 from the token scale.

## Agent Prompt Guide

Quick color reference — Text: #2b2b2b / Background: #ffffff / Border: #e5e7eb / Accent: #0000ee

1) Hero with left display and CTA
- Container: 80px top/bottom padding, white background (#ffffff).
- Headline: 72px, 400, letter-spacing -0.02em, color #2b2b2b, font-family: "SF Pro Variable Regular", Inter, system-ui, sans-serif.
- Paragraph: 20px, 1.4 line-height, color #2b2b2b.
- Primary button: 40px height; padding 8px 16px; radius 8px; background #2a2a2a; text color #0000ee.

2) Row of stat chips
- Make three chips in a row with 20px gaps.
- Each chip: white background, 1px border #e5e7eb, radius 8px, padding 16px.
- Value: 28px, 400, color #2b2b2b. Label: 20px, 400, color #747474.

3) Use-case card row
- Two cards, each width 50% on desktop with 20px gutter.
- Card: background #ffffff, border 1px #e5e7eb, radius 8px, padding 16px.
- Title: 38px #2b2b2b; Description: 20px #747474; Inline link accent #0000ee.

4) Closing CTA band
- Centered block with 80px padding.
- Heading: 52px #2b2b2b; Subcopy: 20px #747474.
- Primary button centered, 40px height, 8px radius, background #2a2a2a, text #0000ee.

## Similar Brands

- Stripe: Similar restraint and generous whitespace; Stripe leans more on color gradients and motion, while Rekord stays monochrome with a single blue accent.
- Plaid: Neutral palette and thin rules; Plaid uses more illustration, Rekord relies on text and simple cards.
- Alloy: Decisioning/verification UI with sober typography; Alloy employs heavier visuals and screenshots, Rekord keeps things lighter and more abstract.
- Persona: Minimal layouts with clear CTAs; Persona adds friendly color accents and imagery, while Rekord keeps accents to system blue only.

## Tokens

### CSS custom properties

```css
:root {
  /* Colors */
  --color-primary: #2b2b2b;
  --color-secondary: #747474;
  --color-tertiary: #0000ee;
  --color-neutral: #ffffff;
  --color-border: #e5e7eb;
  --color-brand-more-than-a-week: #8c8c8c;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 72px;
  --text-headline-lg-weight: 400;
  --text-headline-lg-leading: 1.06;
  --text-headline-lg-tracking: -0.02em;
  --text-headline-md-size: 52px;
  --text-headline-md-weight: 400;
  --text-headline-md-leading: 1.38;
  --text-headline-md-tracking: -0.025em;
  --text-headline-sm-size: 38px;
  --text-headline-sm-weight: 400;
  --text-headline-sm-leading: 1.58;
  --text-headline-sm-tracking: -0.041em;
  --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;
  --text-body-md-tracking: -0.016em;
  --font-sf-pro-variable-regular: "SF Pro Variable Regular";
  --font-sans-serif: "sans-serif";

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

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 20px;
  --spacing-xl: 80px;

  /* Components */
  --button-primary-background-color: #2a2a2a;
  --button-primary-text-color: var(--color-tertiary);
  --button-primary-rounded: var(--radius-md);
  --button-primary-padding: 8px 16px;
  --button-primary-height: 40px;
  --button-secondary-text-color: var(--color-primary);
  --button-secondary-rounded: var(--radius-sm);
  --button-secondary-padding: 8px 16px;
  --button-secondary-height: 40px;
  --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-md);
  --card-padding: 16px;
}
```

### Tailwind theme

```css
@theme {
  --color-primary: #2b2b2b;
  --color-secondary: #747474;
  --color-tertiary: #0000ee;
  --color-neutral: #ffffff;
  --color-border: #e5e7eb;
  --color-brand-more-than-a-week: #8c8c8c;
  --color-surface: #ffffff;
  --color-on-surface: #2b2b2b;
  --font-headline-lg: "SF Pro Variable Regular";
  --font-headline-md: "SF Pro Variable Regular";
  --font-headline-sm: "SF Pro Variable Regular";
  --font-headline-xs: "sans-serif";
  --font-body-md: "SF Pro Variable Regular";
  --text-headline-lg: 72px;
  --text-headline-md: 52px;
  --text-headline-sm: 38px;
  --text-headline-xs: 28px;
  --text-body-md: 20px;
  --tracking-headline-lg: -0.02em;
  --tracking-headline-md: -0.025em;
  --tracking-headline-sm: -0.041em;
  --tracking-body-md: -0.016em;
  --font-weight-headline-lg: 400;
  --font-weight-headline-md: 400;
  --font-weight-headline-sm: 400;
  --font-weight-headline-xs: 400;
  --font-weight-body-md: 400;
  --radius-sm: 4px;
  --radius-md: 8px;
  --spacing-xs: 4px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 20px;
  --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.169,
                    0.169,
                    0.169
                ],
                "hex": "#2b2b2b"
            }
        },
        "secondary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.455,
                    0.455,
                    0.455
                ],
                "hex": "#747474"
            }
        },
        "tertiary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0,
                    0,
                    0.933
                ],
                "hex": "#0000ee"
            }
        },
        "neutral": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "border": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.898,
                    0.906,
                    0.922
                ],
                "hex": "#e5e7eb"
            }
        },
        "brand-more-than-a-week": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.549,
                    0.549,
                    0.549
                ],
                "hex": "#8c8c8c"
            }
        },
        "surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "on-surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.169,
                    0.169,
                    0.169
                ],
                "hex": "#2b2b2b"
            }
        }
    },
    "spacing": {
        "$type": "dimension",
        "xs": {
            "$value": {
                "value": 4,
                "unit": "px"
            }
        },
        "sm": {
            "$value": {
                "value": 12,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 16,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 20,
                "unit": "px"
            }
        },
        "xl": {
            "$value": {
                "value": 80,
                "unit": "px"
            }
        }
    },
    "rounded": {
        "$type": "dimension",
        "sm": {
            "$value": {
                "value": 4,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 8,
                "unit": "px"
            }
        }
    },
    "typography": {
        "headline-lg": {
            "$type": "typography",
            "$value": {
                "fontFamily": "SF Pro Variable Regular",
                "fontSize": {
                    "value": 72,
                    "unit": "px"
                },
                "fontWeight": 400,
                "letterSpacing": {
                    "value": -0.02,
                    "unit": "em"
                }
            }
        },
        "headline-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "SF Pro Variable Regular",
                "fontSize": {
                    "value": 52,
                    "unit": "px"
                },
                "fontWeight": 400,
                "letterSpacing": {
                    "value": -0.025,
                    "unit": "em"
                }
            }
        },
        "headline-sm": {
            "$type": "typography",
            "$value": {
                "fontFamily": "SF Pro Variable Regular",
                "fontSize": {
                    "value": 38,
                    "unit": "px"
                },
                "fontWeight": 400,
                "letterSpacing": {
                    "value": -0.041,
                    "unit": "em"
                }
            }
        },
        "headline-xs": {
            "$type": "typography",
            "$value": {
                "fontFamily": "sans-serif",
                "fontSize": {
                    "value": 28,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        },
        "body-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "SF Pro Variable Regular",
                "fontSize": {
                    "value": 20,
                    "unit": "px"
                },
                "fontWeight": 400,
                "letterSpacing": {
                    "value": -0.016,
                    "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 Rekord**, or imply any connection to it.
- If something is unspecified, choose clarity and legibility over decoration.

More like this

Browse Finance →
billow.so
Billow Finance
Billow
getnick.ai
NickAI AI
NickAI
orderx.com
OrderX AI
OrderX
tilt.com
Tilt Finance
Tilt