Skip to content
DesignMunkDesignMunk Submit a site

OrderX

orderx.com
More alpha. Less noise. Full automation.
AI Finance Framer Homepage Geist Test Tiempos
Share Visit site
orderx.com DESKTOP · 1440
OrderX

AI Breakdown

Design export

# Design brief: the OrderX 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/30111847/orderx-com-featured.png
- Above the fold: https://cdn.designmunk.com/2026/09/30111847/orderx-com-featured-1440x900.png
- On DesignMunk: https://designmunk.com/orderx/

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

# OrderX: Monumental Serif Hero with Cyan Micro-Accents

## Overview

Institutional, confident, and low-noise. The UI should feel precise and trustworthy rather than flashy: dark hero, white surfaces, and micro-accents in cyan. Content density is high but pacing is airy; rely on spacing and borders to keep sections scannable. When in doubt, choose the serif for statements and Geist for operations and detail.

## Page Structure

- Top Navigation: compact bar with product, use cases, pricing, blog, education, and a right-aligned sign-up button.
- Hero: dark, full-bleed backdrop with an oversized serif headline, one-line subcopy, and a horizontal email field with a primary CTA; a secondary intent/prompt bar sits nearby.
- Brand/Partner Strip: a single row of partner logos on a light surface, separated by subtle dividers.
- Product Overview: centered heading with supportive copy followed by a wall/row of asset chips and tickers; brief algorithm highlights underneath.
- Use Cases: repeated scenario cards with tickers, titles, short descriptions, and small tag labels; arranged in rows that continue below the fold.
- Key Features: headline with short paragraphs and inline "Learn more" links; another ticker mosaic decorates the section.
- Walkthrough: tabs for AI Prompt, Hybrid, Traditional; followed by a "How it works" three-step list.
- Intelligence Layer: three equal columns describing Interface, Decision & Risk, and Execution, each with short bullet lists and a link.
- Pricing: centered headline and a two-column comparison block ("Full product suite" vs competitors) using thin borders and rows.
- Tailored Solutions: a row of cards for audience types with bullets and links to use-case pages.
- Trust & Control: security copy, compliance badges, and status labels in a compact grid.
- Footer CTA and Global Footer: closing headline, primary action, social links, dense link columns, legal, and language selector.

## Colors

- Primary (#0c0c0d): Deep ink for core text, navigation, and iconography.
- Secondary (#1be2f3): Electric cyan accent for links, active states, small highlights, and subtle UI cues.
- Tertiary (#2c7691): Deeper teal accent for secondary highlights or charts; use sparingly.
- Neutral (#ffffff): Primary surface for cards and page background outside the hero.
- Border (#e5e7eb): Hairline dividers, card outlines, tables, and section separators.
- Brand-black-box (#0d252d): Dark brand backdrop for the hero or emphasis bands.
- Surface ({colors.neutral}): Alias to the white card/background surface.
- On-surface ({colors.primary}): Default text color on light surfaces.

## Typography

- Display Headlines (headline-lg/md/sm): Test Tiempos Headline Regular, a proprietary serif. Roles: major statements, section headers, and marketing h2s. Sizes: 100px (lg), 48px (md), 24px (sm) at ~1.1 line-height for compact rhythm. Since it is custom/self-hosted, use obtainable substitutes when you can't load it: Playfair Display, Lora, or Libre Baskerville.
- Minor Headline (headline-xs): Sans-serif at 18px for small section titles or label-like headers; keep to 1.22 line-height for readability.
- Body (body-md): Geist at 14px, 1.5 line-height for paragraphs, lists, and UI copy. Geist is available via Google Fonts and can be loaded directly. Acceptable substitutes when needed: Inter (available in font_sources) or IBM Plex Sans.
- Pairing guidance: Serif for statements; Geist for descriptions, labels, tables, and buttons. Avoid mixing substitutes within a single page unless the primary family is unavailable.

## Layout

- Spacing scale centers on a 16px base (sm). Use xs 2px for tight nudge offsets and hairline separations; md 40px for intra-section rhythm; lg 56px for section breaks; xl 126px for hero and major dividers.
- Grid approach favors a single centered column with responsive rows of cards and chips. Keep copy widths moderate; let icon/ticker mosaics wrap naturally onto additional rows without forcing fixed column counts.
- Sections alternate between dark bands and white surfaces to pace the scroll; rely on the border color for structure rather than depth effects.

## Elevation & Depth

Shadows are not used (all measured as none). Hierarchy comes from: crisp borders (#e5e7eb), tonal contrast (white cards on dark bands), and generous whitespace. On dark brand bands (#0d252d), swap text to white (#ffffff) and keep accent cyan for minimal highlights only.

## Shapes

Two radii define the language: sm 4px for buttons, inputs, and chips; md 8px for cards and larger containers. Use square corners for text links and table cells; avoid pill radii unless art-directed in imagery.

## Components

- Buttons
  - Primary: background #0c0c0d, text #ffffff, 40px height, 8/16px padding, 4px radius. Reserve for key CTAs like "Get early access".
  - Secondary: text #0c0c0d, 40px height, 8/16px padding, 4px radius. Pair with a light border (#e5e7eb) when used as a ghost.
  - Link: text #0c0c0d, 0px radius; may use secondary cyan for hover.
- Card: white background, text #0c0c0d, 16px padding, 8px radius. Add a 1px #e5e7eb border to match the rest of the system.

### Hero Signup + Prompt Bar
- Background: #0d252d band. Headline uses headline-lg (100px). Subcopy in body-md. Place an email input (40px height, 4px radius, 1px #e5e7eb border) followed by a primary button. A sibling intent/prompt input mirrors the same dimensions with a subtle icon.

### Partner Logo Strip
- Single row of monochrome logos centered on a white surface. Use 1px #e5e7eb dividers between cells; 16px internal padding; 8px card radius if containerized.

### Ticker Mosaic Chips
- Compact chips for assets/tickers. 14px Geist text, 4px radius, 1px #e5e7eb border, white background. Arrange as wrapping rows beneath section intros.

### Use-Case Card
- Card container (8px radius, 16px padding) with a small ticker badge, title in headline-sm (24px), body copy in 14px Geist, and tag labels using secondary cyan text.

### "Intelligence Layer" Columns
- Three equal cards in a row: title in headline-sm, short bullet list, and a "Learn more" link. Use borders to align rows; 40–56px gutters.

### Pricing Comparison
- Two-column table styled with 1px borders, alternating white rows, and left-aligned labels. Headline in headline-md; body in 14px Geist. Use secondary cyan only for links and emphasis.

### Security Badges Row
- Compact grid of compliance badges and statuses. Small caps/labels at 14–18px, thin dividers, and minimal icons in cyan/teal.

## Do's and Don'ts

- Do use the serif display for top-level statements and Geist for everything operational.
- Do structure complex sections with 1px #e5e7eb borders instead of shadows.
- Do keep cyan (#1be2f3) accents microscopic—links, small indicators, or icons—never large fills.
- Do space sections with lg (56px) and xl (126px) to maintain the calm, institutional rhythm.
- Don't introduce pill radii or heavy drop shadows; stick to 4px and 8px corners and flat surfaces.
- Don't invert entire sections to cyan or teal backgrounds; dark bands should use #0d252d with white text and restrained accents.

## Agent Prompt Guide

Quick color reference
- Text: #0c0c0d
- Background: #ffffff
- Border: #e5e7eb
- Accent: #1be2f3

1) Build a dark hero with oversized serif headline and signup
- Section background: #0d252d
- H1: "headline-lg" at 100px, Test Tiempos Headline Regular, weight 400, line-height 1.1, color #ffffff
- Subcopy: Geist 14px/1.5, color #ffffff at 80% opacity
- Email input: 40px height, 16px horizontal padding, 4px radius, 1px border #e5e7eb, background #ffffff, text #0c0c0d
- Primary button: 40px height, 8/16px padding, 4px radius, background #0c0c0d, text #ffffff
- Spacing: 56px between headline and inputs

2) Create a row of use-case cards
- Container background: #ffffff; text #0c0c0d
- Each card: 8px radius, 16px padding, 1px border #e5e7eb
- Title: headline-sm 24px Test Tiempos
- Body: Geist 14px/1.5
- Arrange as a responsive row of cards with 40px gutters and 56px section padding

3) Three-column "Intelligence Layer"
- Section background: #ffffff
- Headline: headline-md 48px Test Tiempos
- Three equal cards: 8px radius, 16px padding, 1px border #e5e7eb; each with a short bullet list in Geist 14px
- Use accent #1be2f3 for tiny icons or link underlines only

4) Pricing comparison table
- Two columns inside a white card: 8px radius, 1px border #e5e7eb
- Section heading: headline-md 48px
- Row labels and values: Geist 14px/1.5; keep cyan links minimal
- Vertical spacing: 40px within the block; 56px above/below the section

## Similar Brands

- Coinbase: similar border-first, white-card system with sparing blue accents; Coinbase stays fully sans-serif where OrderX introduces a serif display for authority.
- Kraken: deep oceanic gradients and cyan highlights overlap; Kraken leans heavier into illustration and motion, while OrderX keeps surfaces flatter and more editorial.
- Gemini: clean finance aesthetic with restrained color; Gemini relies on rounded shapes and larger radii compared to OrderX's 4px/8px language.
- Stripe: meticulous borders and generous spacing in product pages; Stripe's palette is cooler-neutrals and all-sans, whereas OrderX adds a serif headline and darker hero bands.

## Tokens

### CSS custom properties

```css
:root {
  /* Colors */
  --color-primary: #0c0c0d;
  --color-secondary: #1be2f3;
  --color-tertiary: #2c7691;
  --color-neutral: #ffffff;
  --color-border: #e5e7eb;
  --color-brand-black-box: #0d252d;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 100px;
  --text-headline-lg-weight: 400;
  --text-headline-lg-leading: 1.1;
  --text-headline-md-size: 48px;
  --text-headline-md-weight: 400;
  --text-headline-md-leading: 1.1;
  --text-headline-sm-size: 24px;
  --text-headline-sm-weight: 400;
  --text-headline-sm-leading: 1.1;
  --text-headline-xs-size: 18px;
  --text-headline-xs-weight: 400;
  --text-headline-xs-leading: 1.22;
  --text-body-md-size: 14px;
  --text-body-md-weight: 400;
  --text-body-md-leading: 1.5;
  --font-test-tiempos-headline-regular: "Test Tiempos Headline Regular";
  --font-sans-serif: "sans-serif";
  --font-geist: "Geist";

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

  /* Spacing */
  --spacing-xs: 2px;
  --spacing-sm: 16px;
  --spacing-md: 40px;
  --spacing-lg: 56px;
  --spacing-xl: 126px;

  /* Components */
  --button-primary-background-color: var(--color-primary);
  --button-primary-text-color: var(--color-neutral);
  --button-primary-rounded: var(--radius-sm);
  --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: #0c0c0d;
  --color-secondary: #1be2f3;
  --color-tertiary: #2c7691;
  --color-neutral: #ffffff;
  --color-border: #e5e7eb;
  --color-brand-black-box: #0d252d;
  --color-surface: #ffffff;
  --color-on-surface: #0c0c0d;
  --font-headline-lg: "Test Tiempos Headline Regular";
  --font-headline-md: "Test Tiempos Headline Regular";
  --font-headline-sm: "Test Tiempos Headline Regular";
  --font-headline-xs: "sans-serif";
  --font-body-md: "Geist";
  --text-headline-lg: 100px;
  --text-headline-md: 48px;
  --text-headline-sm: 24px;
  --text-headline-xs: 18px;
  --text-body-md: 14px;
  --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: 2px;
  --spacing-sm: 16px;
  --spacing-md: 40px;
  --spacing-lg: 56px;
  --spacing-xl: 126px;
}
```

### Design tokens (DTCG)

```json
{
    "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
    "color": {
        "$type": "color",
        "primary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.047,
                    0.047,
                    0.051
                ],
                "hex": "#0c0c0d"
            }
        },
        "secondary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.106,
                    0.886,
                    0.953
                ],
                "hex": "#1be2f3"
            }
        },
        "tertiary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.173,
                    0.463,
                    0.569
                ],
                "hex": "#2c7691"
            }
        },
        "neutral": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "border": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.898,
                    0.906,
                    0.922
                ],
                "hex": "#e5e7eb"
            }
        },
        "brand-black-box": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.051,
                    0.145,
                    0.176
                ],
                "hex": "#0d252d"
            }
        },
        "surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "on-surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.047,
                    0.047,
                    0.051
                ],
                "hex": "#0c0c0d"
            }
        }
    },
    "spacing": {
        "$type": "dimension",
        "xs": {
            "$value": {
                "value": 2,
                "unit": "px"
            }
        },
        "sm": {
            "$value": {
                "value": 16,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 40,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 56,
                "unit": "px"
            }
        },
        "xl": {
            "$value": {
                "value": 126,
                "unit": "px"
            }
        }
    },
    "rounded": {
        "$type": "dimension",
        "sm": {
            "$value": {
                "value": 4,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 8,
                "unit": "px"
            }
        }
    },
    "typography": {
        "headline-lg": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Test Tiempos Headline Regular",
                "fontSize": {
                    "value": 100,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        },
        "headline-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Test Tiempos Headline Regular",
                "fontSize": {
                    "value": 48,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        },
        "headline-sm": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Test Tiempos Headline Regular",
                "fontSize": {
                    "value": 24,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        },
        "headline-xs": {
            "$type": "typography",
            "$value": {
                "fontFamily": "sans-serif",
                "fontSize": {
                    "value": 18,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        },
        "body-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Geist",
                "fontSize": {
                    "value": 14,
                    "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 OrderX**, or imply any connection to it.
- If something is unspecified, choose clarity and legibility over decoration.

More like this

Browse AI →
stivio.ai
Stivio AI
Stivio
slite.com
Slite AI
Slite
clears.ai
Clears AI
Clears
agentwork.com
Agentwork AI
Agentwork