Skip to content
DesignMunkDesignMunk Submit a site

Mantle

heymantle.com
Mantle is the business layer for your app.
AI Software Astro Tailwind Homepage Manrope
Share Visit site
heymantle.com DESKTOP · 1440
Mantle

AI Breakdown

Design export

---
version: alpha
name: Mantle
description: Mantle is the business layer for your app.
colors:
  primary: "#ffffff"
  secondary: "#7e5c2b"
  tertiary: "#ffbb53"
  neutral: "#0c0a0e"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Manrope
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -0.025em
  headline-md:
    fontFamily: Geist
    fontSize: 36px
    fontWeight: 400
    lineHeight: 1.19
  headline-sm:
    fontFamily: Geist
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.21
  headline-xs:
    fontFamily: Geist
    fontSize: 21px
    fontWeight: 400
    lineHeight: 1.19
  body-md:
    fontFamily: Manrope
    fontSize: 16px
    fontWeight: 400
    lineHeight: 3.6
    letterSpacing: -0.075em
rounded:
  sm: 10px
spacing:
  xs: 8px
  sm: 16px
  md: 32px
  lg: 96px
  xl: 128px
components:
  button-primary:
    backgroundColor: "{colors.tertiary}"
    textColor: "#000000"
    rounded: "{rounded.sm}"
    padding: 11px 16px
    height: 36px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 11px 16px
    height: 36px
  button-link:
    textColor: "#a2a0b1"
    rounded: 0px
  card:
    backgroundColor: "{colors.primary}"
    textColor: "#191919"
    rounded: "{rounded.sm}"
    padding: 12px
---

# Mantle: Dark Developer Canvas with Amber CTAs and Cards

## Overview

Mantle's UI targets developers and product teams. It uses a dark mode canvas with a warm amber accent to keep CTAs obvious but calm. Spacing is generous and sections feel modular, supporting long lists of capabilities without clutter. The tone is confident, tool-like, and documentation-adjacent rather than salesy.

## Colors

- **primary (#ffffff):** Primary text on dark surfaces and body copy.
- **secondary (#7e5c2b):** Warm bronze for subtle dividers, badges, or quiet accents.
- **tertiary (#ffbb53):** Amber CTA and highlight color for primary buttons and key notices.
- **neutral (#0c0a0e):** Near-black background for the global canvas.
- **surface ({colors.neutral}):** Same as neutral; base for sections and app chrome.
- **on-surface ({colors.primary}):** Text and icons on dark surfaces.

## Typography

- Headline LG (Manrope, 48px/1.1, 400, -0.025em): Hero headings and key section intros; freely available on Google Fonts.
- Headline MD (Geist, 36px/1.19, 400): Major section headers like Core/Advanced/Pro and Mantle A.I.; available on Google Fonts.
- Headline SM (Geist, 28px/1.21, 400) and XS (Geist, 21px/1.19, 400): Sub-section titles, card headings, and feature labels; also from Google Fonts.
- Body MD (Manrope, 16px/3.6, 400, -0.075em): Long-form copy and link lists.
Fallback suggestions (if hosting fails): Inter or Plus Jakarta Sans (both Google) as close substitutes for either family; system-ui as ultimate fallback. Noto Color Emoji can be loaded for inline emoji where needed.

## Layout

A simple scale governs rhythm: 8/16/32 for intra-component spacing, then 96 and 128 for section breaks. Use md (32px) as the primary gutter inside sections and lg/xl to separate major bands. Lists of links and grids typically run 2–3 columns on desktop and stack to single column on mobile. White cards interrupt the dark canvas to reset contrast for dense content like integrations or testimonials.

## Elevation & Depth

Depth is minimal. One soft elevation is available: sm shadow (rgba(0,0,0,0.05) 0 8px 24px) for floating or interactive cards. Larger shadow tokens are none; hierarchy relies on the dark/white surface switch, spacing, and weight/size changes in type. Borders are used sparingly; tonal contrast does most of the work.

## Shapes

The language is rounded-rect with a single radius: 10px. Apply it consistently to buttons, input fields, and cards. Keeping one radius avoids visual noise and reinforces the tool-like feel.

## Components

Buttons
- Primary: background #ffbb53, text #000000, 10px radius, 36px height, 11px × 16px padding. Use for the main action like "Log in" or a trial CTA.
- Secondary: text #ffffff on dark with 10px radius, 36px height, 11px × 16px padding; no background for a quiet, ghost treatment.
- Link: text #a2a0b1, radius 0; for inline actions or subdued links.

Card
- Background #ffffff, text #191919, radius 10px, padding 12px; pair with the sm shadow when the card must feel interactive.

Distinctive components
### Top Navigation
Compact dark bar with dropdowns for Products and Resources, plus Pricing and Experiences. Right-aligned "Log in" uses the primary button.
### Hero Screenshot Stage
Manrope H1 at 48px over the near-black background. Primary CTA (amber) and a quiet "View docs" action sit beside a dimmed product screenshot within a rounded container.
### Partner Logo Bar
A horizontal strip of partner marks beneath the hero; keep spacing to md (32px) and desaturate logos against the dark background.
### Feature Index Blocks
Three columns—Core, Advanced, Pro—using Geist 36px for headings and compact link lists beneath. Use md (32px) column gaps and lg (96px) section spacing.
### Mantle A.I. Dashboard Module
A multi-tab preview (Activity, Billing, Support, Usage, Tasks, Alerts, Insights). Each tab content sits in white cards (10px radius) within a dark section.
### CLI + MCP Examples Rail
A white card shows a command pill and example chips (Billing, Usage events, Email marketing, Automations). Use the sm shadow for lift.
### Setup Assistant Modal
An overlay card with "Select a plan" and a primary action. Card: #ffffff, 10px radius, 12px padding; primary button #ffbb53.
### Integrations Grid
A responsive grid of white cards for Shopify, Stripe, HubSpot, Segment, etc. Use 3–4 columns on desktop, 1–2 on mobile; md (32px) gaps.
### Social Proof Tweets
Tweet embeds set on white cards to preserve readability; keep consistent padding (12px) and radius (10px).
### Pricing Teaser Banner
Dark band with a single amber CTA highlighting the free trial; use lg (96px) vertical spacing.

## Do's and Don'ts

- Do reserve #ffbb53 for primary CTAs and key highlights; use #ffffff for most text on #0c0a0e.
- Do switch to white cards (#ffffff) for dense or data-heavy content to improve readability on the dark canvas.
- Do keep corner radii at 10px across buttons, inputs, and cards for consistency.
- Don't add heavy or colored shadows; only use the sm shadow when a card needs lift.
- Don't mix Manrope and Geist within a single line; use Manrope for hero/body and Geist for section heads.
- Don't introduce additional accent colors; secondary bronze (#7e5c2b) is for quiet details, not for primary actions.

## Agent Prompt Guide

Quick color reference
- Text: #ffffff
- Background: #0c0a0e
- Border: #7e5c2b (use subtly for rules/dividers)
- Accent/CTA: #ffbb53

1) Build the hero
- Container: background #0c0a0e, padding-top/bottom 128px.
- H1: Manrope 48px, weight 400, line-height 1.1, letter-spacing -0.025em, color #ffffff.
- CTAs: primary button background #ffbb53, text #000000, radius 10px, height 36px, padding 11px 16px; secondary ghost with text #ffffff, radius 10px.
- Optional screenshot card beneath: white card (#ffffff) with 10px radius and sm shadow rgba(0,0,0,0.05) 0 8px 24px.

2) Feature index (Core/Advanced/Pro)
- Section spacing: 96px top/bottom.
- Headings: Geist 36px/1.19, color #ffffff.
- Link lists: Geist 21px/1.19 or Manrope 16px/3.6, color #ffffff; use 32px gaps between columns.

3) Integrations grid
- Grid: 3 columns desktop, 1–2 on mobile; gap 32px.
- Card: background #ffffff, text #191919, radius 10px, padding 12px, shadow rgba(0,0,0,0.05) 0 8px 24px.
- Section background: #0c0a0e; heading Geist 28px/1.21 in #ffffff.

4) CLI/Setup assistant module
- Use a single white card (#ffffff) with 10px radius and 12px padding for the content.
- Primary action button: #ffbb53 with black text, 36px height, 11px 16px padding.
- Surrounding section spacing: 96px; body copy Manrope 16px/3.6 in #191919 on the card.

## Similar Brands

- Vercel — Dark developer canvas with restrained accent; Mantle diverges with a warmer amber and more marketing-style white cards.
- Stripe — Clear typography and modular sections; Mantle is darker overall and uses amber rather than purple/blue accents.
- Supabase — Developer-first, black background with bright accents; Mantle leans more into product cards and integrations.
- Retool — Tool-like tone and UI previews; Mantle's palette is warmer and its typography pairing is more distinct.

More like this

Browse AI →
lev8.com
Lev8 AI
Lev8
Turn the live web into people and business intelligence.
Homepage · 4 hours ago
blogcms.io
BlogCMS AI
BlogCMS
Static blogs built to rank higher—SEO and speed built in.
Homepage · 5 hours ago
maillayer.com
MailLayer Developer Tools
MailLayer
Everything you need. Nothing you don't.
Homepage · 17 hours ago
superdevpro.com
SuperDev Pro Developer Tools
SuperDev Pro
One extension replaces your browser toolbox—no clutter, no context switching.
Homepage · 18 hours ago