Skip to content
DesignMunkDesignMunk Submit a site

Simply Static

simplystatic.com
Secure, fast, zero-maintenance Static WordPress—host, manage, and monitor.
Technology WordPress Homepage Mona Sans
Share Visit site
simplystatic.com DESKTOP · 1440
Simply Static

AI Breakdown

Design export

---
version: alpha
name: Simply Static
description: Secure, fast, zero-maintenance Static WordPress—host, manage, and monitor.
colors:
  primary: "#ffffff"
  secondary: "#6c05cc"
  tertiary: "#5a20ff"
  neutral: "#121212"
  border: "#374151"
  brand-lavender-blossom: "#b47ce4"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Mona Sans
    fontSize: 52px
    fontWeight: 800
    lineHeight: 1.2
    letterSpacing: -0.038em
  headline-md:
    fontFamily: Mona Sans
    fontSize: 43px
    fontWeight: 800
    lineHeight: 1.14
    letterSpacing: -0.023em
  headline-sm:
    fontFamily: Mona Sans
    fontSize: 35px
    fontWeight: 800
    lineHeight: 1.2
  headline-xs:
    fontFamily: Mona Sans
    fontSize: 29px
    fontWeight: 800
    lineHeight: 1.45
    letterSpacing: -0.034em
  body-md:
    fontFamily: Mona Sans
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  sm: 6px
  md: 8px
spacing:
  xs: 8px
  sm: 16px
  md: 32px
  lg: 48px
  xl: 86px
components:
  button-primary:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 10.6538px 24.8588px
    height: 52px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 10.6538px 24.8588px
    height: 52px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: 16px
---

# Simply Static: Dark-Mode WordPress Pitch with Electric Purple CTAs

## Overview

A dark-mode, developer-facing system with confident, high-contrast typography and one vivid accent. The tone is technical and reassuring—security and performance first—while remaining approachable for non-developers. Spacing is generous for readability (24px body copy) but sections stack tightly to keep momentum. Use this style when communicating workflows, comparisons, and actionable steps without visual noise.

## Colors

- **primary (#ffffff):** Primary text and iconography on dark surfaces.
- **secondary (#6c05cc):** Supporting brand violet for hovers, secondary accents, and gradients.
- **tertiary (#5a20ff):** Primary CTA background and interactive highlights.
- **neutral (#121212):** Global background and card surfaces.
- **border (#374151):** Dividers, input outlines, card separators, and ghost button borders.
- **brand-lavender-blossom (#b47ce4):** Soft accent for ratings, subtle highlights, and decorative gradients.
- **surface ({colors.neutral} → #121212):** Section and card surfaces in dark mode.
- **on-surface ({colors.primary} → #ffffff):** Text and icon color placed on surfaces.

## Typography

Mona Sans is the single family across headings and body, producing a focused, tool-like voice. It is freely available via Google Fonts and can be loaded directly.
- Headline LG: 52px/1.2, weight 800, tight tracking (-0.038em). Use for hero H1s and key section intros.
- Headline MD: 43px/1.14, weight 800, for major section headings.
- Headline SM: 35px/1.2, weight 800, for feature blocks and step titles.
- Headline XS: 29px/1.45, weight 800, for card titles and FAQs.
- Body MD: 24px/1.5, weight 400, the default paragraph size—large for dark-mode legibility.
Substitutes when Mona Sans is unavailable: Inter, Manrope, or Outfit (all open fonts with similar modern grotesk geometry and wide weight ranges).

## Layout

Spacing follows an 8px base: 8, 16, 32, 48, and a tall 86px tier for section padding and hero breathing room. Use xl (86px) for top/bottom section rhythm, lg (48px) for intra-section groups, and md (32px) for gutters around cards and lists. Keep copy widths comfortable and let feature grids switch between one, two, or three columns depending on viewport while holding the vertical rhythm defined by the scale.

## Elevation & Depth

This system is mostly flat. Only a faint small shadow is measured; hierarchy is created by tonal contrast (#121212 surfaces against white text), crisp borders (#374151), and generous whitespace. Use borders to separate cards, inputs, and ghost buttons. Reserve the subtle small shadow for floating overlays or emphasized cards when necessary.

## Shapes

Corners are modest and consistent: 6px on interactive elements (buttons) and 8px on containers (cards). Use 6px to signal click targets, 8px for content groupings. Avoid mixing larger radii; the restrained geometry communicates reliability and performance over playfulness.

## Components

Buttons and card components are standardized, then assembled into higher-level patterns used across the page.

- Button — Primary
  - Background: #5A20FF; Text: #FFFFFF; Height: 52px; Padding: 10.6538px 24.8588px; Radius: 6px.
  - Use for the main CTA ("Try Your Site in Studio", "View Pricing").
- Button — Secondary (Ghost)
  - Text: #FFFFFF; Border: #374151 (use 1–2px); Height: 52px; Padding: 10.6538px 24.8588px; Radius: 6px.
  - Use alongside the primary as a lower-priority action ("See How It Works").
- Button — Link
  - Text: #FFFFFF; Radius: 0px; no background. Use for inline actions.
- Card
  - Background: #121212; Text: #FFFFFF; Padding: 16px; Radius: 8px. Use for testimonials and compact content groupings.

### Global Navigation
Dark background (#121212) with white text. Primary CTA on the right uses the primary button spec. Menu groups can include single-level dropdowns; keep item spacing at sm (16px) to md (32px).

### Hero Header
Headline uses Headline LG (52px/800) with supporting copy at Body MD (24px). Stack two buttons: primary then secondary/ghost. Apply xl (86px) vertical padding. Background may include brand imagery; keep text color #FFFFFF.

### Testimonial Row
Two or more cards using the Card spec. Quote text at Body MD (24px); author line can use Headline XS (29px/800) or Body MD with weight 600. Optional accent details can use Lavender Blossom (#B47CE4).

### Pain-Point List
A section intro at Headline MD (43px/800), followed by four items using Headline SM (35px) as subheads and Body MD paragraphs. Use lg (48px) gaps between items.

### Workflow Step Grid
Four steps ("Build", "Generate", "Publish", "Keep Private") in a responsive grid. Step titles use Headline SM (35px), descriptions use Body MD. Gap md (32px); icons or numbers can use #B47CE4 as a quiet accent.

### Compatibility Checker
A full-width input paired with a primary button. Input uses #121212 fill, #374151 border, and #FFFFFF text; match the button height at 52px for alignment. Place within a card or a section padded at lg (48px).

### Stat Counters
Large numerals (Headline MD or SM depending on prominence) with short labels in Body MD. Use white text and optional #B47CE4 for separators.

### FAQ Accordion
Question titles at Headline XS (29px/800). Divider lines in #374151. Answers in Body MD with md (32px) vertical rhythm.

## Do's and Don'ts

- Do use #5A20FF for the primary action and keep secondary actions as ghost buttons with #374151 borders.
- Do set headings in Mona Sans weight 800 and keep body copy at 24px/1.5 for dark-mode readability.
- Do separate dense content with md (32px) to lg (48px) spacing and use xl (86px) only for major section padding.
- Don't introduce lighter surfaces; the system assumes a #121212 background for contrast.
- Don't exceed 8px radii on containers or 6px on buttons; larger curves feel off-brand.
- Don't add heavy shadows; rely on borders and tonal contrast for hierarchy.

## Agent Prompt Guide

Quick color reference — Text: #FFFFFF, Background: #121212, Border: #374151, Accent/Primary: #5A20FF, Secondary Accent: #6C05CC, Soft Accent: #B47CE4.

1) Build a dark hero with dual CTAs
- Background: #121212. H1: Mona Sans 800, 52px, line-height 1.2, letter-spacing -0.038em, color #FFFFFF. Supporting copy: Mona Sans 400, 24px/1.5, color #FFFFFF at 70–85% opacity as needed. Buttons: Primary — bg #5A20FF, text #FFFFFF, height 52px, radius 6px, padding 10.6538px 24.8588px. Secondary — text #FFFFFF with 1–2px border #374151, same height/radius/padding. Section padding: 86px top and bottom.

2) Create a four-item feature grid
- Section intro: Mona Sans 800, 43px/1.14, color #FFFFFF. Grid gap: 32px. Each item title: Mona Sans 800, 35px/1.2. Body: 24px/1.5. Use small decorative lines in #374151 or bullets in #B47CE4. Keep background #121212.

3) Produce testimonial cards
- Container uses Card spec: background #121212, text #FFFFFF, padding 16px, radius 8px. Quote text: 24px/1.5. Author line: Mona Sans 800, 29px/1.45 or Body 24px with medium weight. Optional accent stars in #B47CE4. Space cards with 32px.

4) Add a URL compatibility checker
- Wrap input and button in a card or full-bleed row with 48px vertical padding. Input: background #121212, border #374151, text #FFFFFF; height matches button at 52px; radius 6–8px to suit context. Button: primary spec (#5A20FF). Label text in Mona Sans 29px/800 above the controls.

5) Build a concluding CTA bar
- Background: #121212. Title: 43px/800; copy: 24px/1.5. Primary button (#5A20FF) followed by ghost secondary. Add a thin top border #374151 and 48px vertical padding.

## Similar Brands

- Netlify: Dark UI with neon accent CTAs; leans more teal/cyan where Simply Static uses violet/purple.
- Vercel: Monochrome developer aesthetic with high-weight headings; fewer saturated accents than Simply Static's #5A20FF.
- Cloudflare Pages: Technical dark palette with bright action colors; more orange/brand-driven than Simply Static's purples.
- Fly.io: Dark surfaces with bold type and saturated highlight colors; more playful copy, similar emphasis on performance.

More like this

Browse Technology →
cubefabs.com
Cubefabs AI
Cubefabs
Revolutionize manufacturing with AI factories for next-gen materials.
Homepage · 1 week ago
standardbots.com
Standard Bots AI
Standard Bots
AI-native robots for serious manufacturing—fast, safe, high-ROI.
Homepage · 1 week ago
ouster.com
Ouster Logistics & Mobility
Ouster
Transforming autonomy with high-performance digital lidar sensors.
Homepage · 1 week ago
podab.com
Podab Ecommerce
Podab
Gentle, efficient drying cabinets that extend textile lifespan.
Homepage · 1 week ago