Skip to content
DesignMunkDesignMunk Submit a site

Requesty

requesty.ai
The AI Gateway for Production: real-time analytics, intelligent routing.
AI Software Next.js Tailwind Homepage Geist
Share Visit site
requesty.ai DESKTOP · 1440
Requesty

AI Breakdown

Design export

---
version: alpha
name: Requesty
description: "The AI Gateway for Production: real-time analytics, intelligent routing."
colors:
  primary: "#ffffff"
  secondary: "#187bf9"
  tertiary: "#93c5fd"
  neutral: "#0f1729"
  brand-fish-pond: "#80c4f0"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Geist
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: -0.025em
  headline-md:
    fontFamily: Geist
    fontSize: 38px
    fontWeight: 700
    lineHeight: 1.21
  headline-sm:
    fontFamily: Geist
    fontSize: 29px
    fontWeight: 600
    lineHeight: 1.21
  headline-xs:
    fontFamily: Geist
    fontSize: 23px
    fontWeight: 600
    lineHeight: 1.22
  body-md:
    fontFamily: Geist
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.56
rounded:
  sm: 8px
  md: 12px
spacing:
  xs: 6px
  sm: 14px
  md: 24px
  lg: 32px
  xl: 108px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "#000000"
    rounded: "{rounded.md}"
    padding: 12px 24px
    height: 46px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: 12px 24px
    height: 46px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 12px
---

# Requesty: Analytics-First Hero in a Midnight Shell

## Overview

Requesty presents a production-grade, dark UI aimed at technical buyers: engineers, platform teams, and security reviewers. The tone is serious, high-trust, and documentation-adjacent. Spacing is generous vertically with tight, information-dense cards. Color is minimal—white text on a near-black surface with selective blue accents—to keep charts and code the focal points.

## Colors

- **primary (#ffffff):** Core text and iconography on dark surfaces; used for high-contrast CTAs and headlines.
- **secondary (#187bf9):** Accent for key words, links, and primary highlights that need stronger attention than body links.
- **tertiary (#93c5fd):** Subtle accents, secondary buttons, and dividers on dark backgrounds where a softer blue reads better.
- **neutral (#0f1729):** Global background and card surfaces in dark mode.
- **brand-fish-pond (#80c4f0):** Supporting accent for charts, data points, and decorative gradients; lighter than secondary.
- **surface ({colors.neutral}):** Alias to the neutral background for containers and page chrome.
- **on-surface ({colors.primary}):** Alias to the white used over surfaces for text and UI controls.

## Typography

Geist is the sole family across headings and body. It is freely available (type: google) and can be loaded directly. If Geist is unavailable, use Roboto, Open Sans, or Ubuntu as substitutes.
- headline-lg — Geist 48px/700, -0.025em: Page H1s and hero statements.
- headline-md — Geist 38px/700: Section leads like "Your AI ops, at a glance."
- headline-sm — Geist 29px/600: Card titles and sub-section headings.
- headline-xs — Geist 23px/600: Overlines, metric labels, and panel headers.
- body-md — Geist 18px/400, 1.56: All descriptive copy, FAQs, and table text for readability on dark.

## Layout

Spacing follows a compact base with vertical rhythm in multiples of 6px. Use xs 6px for tight element gaps, sm 14px for inline control spacing, md 24px for card padding and grid gutters, lg 32px for block gaps, and xl 108px for section top/bottom padding. A 12-column responsive grid works well; cards span 3–6 columns on desktop and stack on mobile. Content is centered with wide breathing room around the hero and major sections.

## Elevation & Depth

Depth is minimal. Only the sm shadow is used for high-emphasis elements like the hero preview or sticky UI, while md/lg/xl shadows are none. Most hierarchy comes from tone (neutral background vs. white text), restrained blue accents, and whitespace. When separation is needed, prefer tonal shifts or a thin divider using tertiary.

## Shapes

Two radii define the language: 8px (rounded.sm) for cards and data containers, and 12px (rounded.md) for interactive controls like buttons or input fields. The slightly larger button radius reads as tappable without feeling playful, aligning with a production-tool aesthetic.

## Components

Buttons and card
- Button Primary: background #ffffff, text #000000, 12px radius, 12x24 padding, 46px height. Use for the main CTA ("Get started free").
- Button Secondary: transparent on dark with text #ffffff, 12px radius, 12x24 padding, 46px height. Pair to the right of Primary for "Speak to founders."
- Button Link: text #ffffff, radius 0 for inline actions in copy or footers.
- Card: background #0f1729, text #ffffff, radius 8px, 12px padding. Layer with sm shadow only when the card must pop above the surface.

### Hero with Dual CTAs
- headline-lg at 48/700; emphasize a single keyword with secondary #187bf9.
- Primary and Secondary buttons side by side; gap md (24px); section padding xl (108px).

### Analytics Preview Card
- Wide card with rounded.sm (8px) and sm shadow for lift; caption text in body-md.
- Use tertiary #93c5fd for small badges or chart accents.

### KPI Stat Strip
- Four compact stats (e.g., 600+ Models) in a grid using md (24px) gaps.
- Values in headline-xs; labels in body-md; accents in brand-fish-pond #80c4f0.

### Integration Code Block (Tabs)
- Language tabs styled as button-secondary; active tab accented with secondary.
- Code set in body-md size for legibility on dark; card radius 8px, padding md (24px) inside.

### Routing Regions Panel
- Three mini-cards for regions with status chips; use headline-xs for region names.
- Apply brand-fish-pond #80c4f0 to live/active indicators; container radius 8px.

### Ops KPI Grid
- Four cards (Requests, Cost, Cache Hit, Uptime) in a 4-col grid, md gutters.
- Values in headline-sm; deltas (+/-) tinted with secondary #187bf9.

### PII Scanner Demo
- Two stacked cards ("Incoming Request" and "Scrubbed Output"), radius 8px.
- Detected-entity chips use tertiary for readability against the dark background.

### Customer Story Cards
- Three linkable cards with logo, category, and headline in headline-sm.
- Hover: increase sm shadow slightly; maintain 8px radius and md padding.

## Do's and Don'ts

- Do reserve secondary #187bf9 for key actions, active states, and emphasized words; overuse weakens focus.
- Do space major sections with xl (108px) top/bottom and keep card padding to md (24px) for density.
- Do pair button-primary and button-secondary horizontally with at least md (24px) gap.
- Don't add heavy shadows; only the provided sm shadow is permitted for lift.
- Don't mix additional radii; use 8px for containers and 12px for interactive controls.
- Don't lower body text below 18px; readability on #0f1729 relies on the body-md scale.

## Agent Prompt Guide

Quick color reference — Text: #ffffff, Background: #0f1729, Border: #93c5fd (use 16% opacity for dividers), Accent: #187bf9; secondary accent: #80c4f0.

1) Build the hero
- Canvas: background #0f1729, center a max-width container, section padding 108px top/bottom.
- H1: Geist 48px/700/1, letter-spacing -0.025em, color #ffffff; color the word "Production" with #187bf9.
- Body: Geist 18px/400, color #ffffff at 80%.
- Primary button: 46px height; 12px radius; padding 12px 24px; background #ffffff; text #000000.
- Secondary button: 46px height; 12px radius; padding 12px 24px; background transparent; text #ffffff.

2) KPI stat strip (4 columns)
- Grid: 12-column; place four cards spanning 3 cols each; gap 24px.
- Card: background #0f1729; radius 8px; padding 24px; border 1px solid #93c5fd at 16% opacity.
- Value: Geist 23px/600 #ffffff; Label: Geist 18px/400 #ffffff at 72%; Accent ticks in #80c4f0.

3) Integration code block with tabs
- Container card: background #0f1729; radius 8px; padding 24px; sm shadow.
- Tabs row: Secondary buttons (transparent, #ffffff text, 12px radius). Active tab underline 2px in #187bf9.
- Code: Geist 18px/400, color #ffffff.

4) Pricing band
- Section padding 108px; center copy at max-width.
- Heading: Geist 38px/700 #ffffff; subcopy body-md 18px/400.
- Use a primary CTA (as above) and a link-style secondary ("See pricing") with #ffffff text and radius 0.

## Similar Brands

- OpenRouter: Similar API-router proposition and dark palette; Requesty leans more enterprise with prominent governance and audit content.
- Portkey: Shares routing/observability focus; Requesty's typography is tighter with Geist and fewer color accents.
- Helicone: Analytics-forward presentation; Requesty emphasizes dual CTAs and procurement readiness earlier.
- LangSmith (LangChain): Technical audience and dark UI; Requesty's page is denser with infrastructure KPIs and regional routing visuals.
- Humanloop: Also targets practitioners with documentation-like copy; Requesty uses stronger blues and stricter spacing.

More like this

Browse AI →
pallyy.com
Pallyy Marketing
Pallyy
Plan, approve, schedule, and publish on one simple social calendar.
Homepage · 2 hours ago
pallyy.com
Pallyy Pricing Marketing
Pallyy Pricing
A tidy three-column layout makes comparison easy, with the “Agency” tier clearly emphasized through a blue card, primary button, and “Recommended” badge.…
Pricing · 2 hours ago
kagaz.app
Kagaz Developer Tools
Kagaz
Invoice generator and API that creates beautiful invoices fast.
Homepage · 13 hours ago
getfernand.com
Fernand AI
Fernand
Calm customer support for SaaS founders: AI on the front line.
Homepage · 13 hours ago