Skip to content
DesignMunkDesignMunk Submit a site

WP Manage Ninja

wpmanageninja.com
Software WordPress Homepage Work Sans
Share Visit site
wpmanageninja.com DESKTOP · 1440
WP Manage Ninja

AI Breakdown

Design export

---
version: alpha
name: WP Manage Ninja
description: Smart WordPress solutions for small businesses
colors:
  primary: "#07090c"
  secondary: "#4c5c73"
  tertiary: "#0d5fff"
  neutral: "#ffffff"
  border: "#d8dee4"
  brand-atelier: "#a3acb6"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Work Sans
    fontSize: 49px
    fontWeight: 600
    lineHeight: 1.2
  headline-md:
    fontFamily: Work Sans
    fontSize: 39px
    fontWeight: 600
    lineHeight: 1.21
  headline-sm:
    fontFamily: Lexend
    fontSize: 31px
    fontWeight: 600
    lineHeight: 1.19
  headline-xs:
    fontFamily: Work Sans
    fontSize: 25px
    fontWeight: 600
    lineHeight: 1.2
  body-md:
    fontFamily: Work Sans
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.4
rounded:
  sm: 4px
  md: 8px
  lg: 24px
spacing:
  xs: 8px
  sm: 16px
  md: 32px
  lg: 44px
  xl: 64px
components:
  button-primary:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.neutral}"
    rounded: "{rounded.md}"
    padding: 14px 24px
    height: 48px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 14px 24px
    height: 48px
  button-link:
    textColor: "{colors.tertiary}"
    rounded: 0px
  card:
    backgroundColor: "#cedfff"
    textColor: "#4e5d78"
    rounded: "{rounded.lg}"
    padding: 32px
---

# WP Manage Ninja

## Overview

WP Manage Ninja presents a WordPress plugin ecosystem (the Fluent suite) aimed at small-business owners and developers who need reliable, unfussy tools. The tone is confident and utilitarian rather than playful: short benefit statements, hard product names, and a single accent color used sparingly. Density is moderate — enough whitespace to let fourteen product cards breathe, but no lifestyle imagery or illustration slowing the page down. An agent extending this system should favor clarity and repetition over novelty; this is a catalog, not a brand experiment.

## Colors

- **Primary (#07090c):** Near-black for headlines and primary body text; the dominant ink color.
- **Secondary (#4c5c73):** Muted slate for supporting copy and secondary descriptions.
- **Tertiary (#0d5fff):** The single saturated accent — used for primary buttons, links, and the 'Discover Now' CTA.
- **Neutral (#ffffff):** Page and surface background, and text color on filled buttons.
- **Border (#d8dee4):** Light hairline for dividers and card outlines.
- **Brand Atelier (#a3acb6):** Muted gray for icons and low-emphasis UI marks.
- **Surface (#ffffff):** Base background layer, aliased to neutral.
- **On-surface (#07090c):** Text placed directly on surface, aliased to primary.

## Typography

Work Sans is the workhorse family — headline-lg (49px/600), headline-md (39px/600), headline-xs (25px/600), and body-md (20px/400) all run on it, giving headline and paragraph a shared geometry with only weight distinguishing them. Lexend appears once, at headline-sm (31px/600), likely for a subsection or card title needing slightly more mechanical distinction. Both are Google-hosted and freely loadable by an agent; if substitution is needed, Work Sans pairs well with Inter, IBM Plex Sans, or Public Sans, while Lexend can be swapped for Manrope or Sora without losing its rounded, even rhythm.

## Layout

Spacing steps in a tight scale — 8px, 16px, 32px, 44px, 64px — supporting a card-grid layout rather than a strict column system. The homepage reads as stacked full-width sections (hero, brand grid, values, stats, testimonials, blog) each separated by the larger 44–64px gaps, while internal card padding and text gaps use the smaller 8–32px steps. Product cards sit two-to-a-row on desktop with generous internal padding (32px), leaving the grid feeling more like a shelf of tiles than a dense dashboard.

## Elevation & Depth

Shadows are largely unused — mid, large, and extra-large shadow tokens all resolve to none. Hierarchy instead comes from flat tonal blocks: product cards use a pale blue fill (#cedfff) against the white page background, and borders (#d8dee4) separate sections where color alone isn't enough. A small drop shadow token exists but isn't a dominant device; depth is closer to a poster's stacked panels than a UI's layered surfaces.

## Shapes

Three radius steps — 4px, 8px, 24px — map cleanly to scale of importance. Small UI accents use 4px, buttons use 8px for a crisp but approachable edge, and cards use a generous 24px that softens the fourteen-tile grid into something closer to app icons than spreadsheet rows.

## Components

**Button primary** — #0d5fff fill, white text, 8px corners, 48px height, 14px/24px padding; used for the hero CTA and other primary actions. **Button secondary** — primary-colored text, tighter 4px corners, same height/padding, for lower-emphasis actions. **Button link** — tertiary-blue text with no rounding, used inline as 'Learn More' beneath every product card. **Card** — #cedfff fill, #4e5d78 text, 24px corners, 32px padding; the module that carries the entire mid-page product catalog.

### Product Grid Card
Fourteen near-identical cards (FluentCart, FluentPlayer, FluentCRM, etc.), each pairing a logo mark, a two-sentence pitch, and a 'Learn More' link — the primary repeating unit of the page.

### Stat Counter
Three-part inline stat groups (icon + bold number + label, e.g. '1,605,000+ Happy Users') appearing in the hero and again lower on the page with an animated count-up behavior.

### Values Grid
Four short two-line value statements ('Growth over profitability', 'For people. By people', etc.) in a plain text grid with no card chrome — a deliberate contrast to the tiled product section.

### Testimonial Carousel
Quote-plus-name-plus-title cards cycling customer feedback, kept text-only with no avatar imagery, matching the page's avoidance of photography.

### Blog Card List
A horizontal list of article titles with author and date metadata, using headline-xs for titles and secondary-gray for byline text.

## Do's and Don'ts

- Do reserve #0d5fff for the single most important action per section; don't apply it to more than one CTA at a time.
- Do use the 24px card radius for anything grouping a product or offer; don't mix it with the 8px button radius within the same card.
- Do keep body copy in Work Sans 400 at 20px for readability across long product descriptions; don't introduce a third display font.
- Do lean on the #cedfff tonal fill and #d8dee4 borders for separation since shadows are absent; don't add drop shadows to new components, as none exist elsewhere on the page.
- Don't crowd the product-card grid with more than a short two-line pitch — the pattern only holds at this density across fourteen repetitions.

## Agent Prompt Guide

Quick reference — Text: #07090c (primary), #4c5c73 (secondary). Background: #ffffff (surface). Accent: #0d5fff (tertiary). Border: #d8dee4. Card fill: #cedfff.

1. Build a hero with a 49px/600 Work Sans headline in #07090c, a 20px/400 Work Sans subhead in #4c5c73, and a single #0d5fff button (8px radius, 48px height) labeled with an action verb.
2. Create a product grid of cards using #cedfff backgrounds, 24px corners, 32px padding, each holding a title, a two-line #4e5d78 description, and a text-only 'Learn More' link in #0d5fff.
3. Add an inline stat row with three groups of icon + bold number in Work Sans 600 + label in #4c5c73, spaced 32px apart.
4. Set a values section as plain text pairs (no card chrome) using headline-xs (25px/600 Work Sans) titles over 20px body text, to contrast with the tiled product section above it.
5. Style a testimonial block as quote text plus name and title, no imagery, using #4c5c73 for attribution text and #07090c for the quote itself.

## Similar Brands

- **Automattic/WordPress.com:** Same plugin-ecosystem sprawl and utilitarian sans-serif type, though WordPress.com leans darker and more editorial in its marketing pages.
- **Elastic Email or Mailchimp (early era):** Shares the single-blue-accent-on-white restraint and card-grid product showcase, though those brands add more illustration.
- **Freshworks:** Comparable multi-product SaaS grid with consistent card templates per tool, though Freshworks uses heavier shadow and gradient work than this flat system.
- **Zapier's app directory pages:** Similar dense tile-of-tools layout with minimal chrome per card, differing mainly in Zapier's use of brand-colored logos over a neutral card fill.

More like this

Browse Software →
blogcms.io
BlogCMS AI
BlogCMS
Static blogs built to rank higher—SEO and speed built in.
Homepage · 6 hours ago
maillayer.com
MailLayer Developer Tools
MailLayer
Everything you need. Nothing you don't.
Homepage · 18 hours ago
superdevpro.com
SuperDev Pro Developer Tools
SuperDev Pro
One extension replaces your browser toolbox—no clutter, no context switching.
Homepage · 19 hours ago
understory.io
Understory Marketing
Understory
More bookings, less admin—bookings and ads that grow your experiences.
Homepage · 1 day ago