Skip to content
DesignMunkDesignMunk Submit a site

Strapi

strapi.io
Own your content end-to-end—open-source framework for AI-powered websites
Software Technology Next.js Tailwind Homepage Poppins
Share Visit site
strapi.io DESKTOP · 1440
Strapi

AI Breakdown

Design export

---
version: alpha
name: Strapi
description: Own your content end-to-end—open-source framework for AI-powered websites
colors:
  primary: "#ffffff"
  secondary: "#242464"
  tertiary: "#4945ff"
  neutral: "#121212"
  border: "#374151"
  brand-cobalite: "#9c95fc"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Poppins
    fontSize: 43px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: -0.025em
  headline-md:
    fontFamily: Poppins
    fontSize: 33px
    fontWeight: 600
    lineHeight: 1.48
    letterSpacing: -0.025em
  headline-sm:
    fontFamily: Poppins
    fontSize: 21px
    fontWeight: 600
    lineHeight: 1.48
  headline-xs:
    fontFamily: Poppins
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.22
  body-md:
    fontFamily: Poppins
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.63
rounded:
  sm: 4px
  md: 8px
spacing:
  xs: 8px
  sm: 20px
  md: 40px
  lg: 56px
  xl: 64px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "#292875"
    rounded: "{rounded.md}"
    padding: 8px 24px
    height: 42px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 8px 24px
    height: 42px
  button-link:
    textColor: "#fee685"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: 16px
---

# Strapi: A Command-Line CTA on a Purple-Black Canvas

## Overview

Dark-mode first, developer-forward, and confident. The interface favors high contrast (white on near-black) with cool purple accents for emphasis. Spacing reads generous but efficient; content density is moderate so technical copy and UI screenshots remain legible. Tone is practical and action-led: show the command, show the tabs, show the product.

## Colors

- **primary (#ffffff):** Primary text and filled button foreground for maximum contrast on dark surfaces.
- **secondary (#242464):** Deep indigo for dense sections and brand-heavy panels.
- **tertiary (#4945ff):** Accent purple for active states, highlights, and key interactive affordances.
- **neutral (#121212):** Page background and base surfaces in dark mode.
- **border (#374151):** Subtle dividers, tab separators, and card outlines.
- **brand-cobalite (#9c95fc):** Lighter brand purple for gradients, hover, and secondary emphasis.
- **surface ({colors.neutral}):** Alias to the base dark surface for containers and cards.
- **on-surface ({colors.primary}):** Alias to white for text/icons laid over surface.

## Typography

Poppins is the sole family and is freely available via Google Fonts; load weights 400 and 600 per tokens. Substitutes with similar x-height and geometric warmth: Inter, Manrope, or Plus Jakarta Sans.
- Headline LG (Poppins 43px/600, -0.025em): Primary hero statements.
- Headline MD (33px/600, -0.025em): Section intros and major claims.
- Headline SM (21px/600): Feature subheads and card titles.
- Headline XS (18px/600): Label-style headings, tabs, and small promos.
- Body MD (15px/400, 1.63): All running copy, captions, and small utility text.

## Layout

Spacing follows an 8px baseline with asymmetric jumps for rhythm: xs 8, sm 20, md 40, lg 56, xl 64. Use sm for intra-component gaps, md for card gutters, lg–xl for section paddings. Grids lean on even columns with clear gutters; align major sections to the same outer padding to keep the dark canvas tidy. Cards and panels keep consistent inner padding (component-level 16px).

## Elevation & Depth

The system is near-shadowless. Depth is expressed with a 1px oklab ring at the sm level and otherwise through the border color (#374151), tonal steps between neutral and secondary, and generous whitespace. Reserve sm ring for focus states and key containers; md/lg/xl shadows are intentionally none.

## Shapes

Two radii define the language: 4px (sm) for compact controls and secondary buttons; 8px (md) for primary buttons, cards, tabs, and large panels. The larger radius signals clickability and primary action on the dark canvas.

## Components

Buttons
- Primary Button: bg #ffffff, text #292875, radius 8px, 42px height, 8px 24px padding. Use for main CTAs (e.g., Get Started, Start Deploying).
- Secondary Button: text #ffffff on transparent or subtly tinted surfaces, radius 4px, 42px height, 8px 24px padding.
- Link Button: text #fee685, no radius; apply to inline actions inside copy.

Card
- Card: bg #121212, text #ffffff, radius 8px, padding 16px; optionally add the sm ring for emphasis.

Distinctive components on this page
### Announcement Bar
- Full-width strip at the very top highlighting news. Use tertiary #4945ff and/or brand-cobalite #9c95fc for emphasis; text runs Body MD in #ffffff.
### Hero Split
- Left: Headline LG and short body. Right: trust logos grid. Container uses the dark surface with subtle #374151 dividers and md (8px) corners.
### Install Command Bar
- A pill-like control displaying "npx create-strapi-app@latest." Match button height (42px) and md radius (8px). White text on a purple-accented container; include a copy affordance.
### Product Tabs
- Four-item tablist (Create APIs, Content Management, Customization, Hosting). Use border #374151 for separators, active accent in #4945ff, radius 8px.
### Admin UI Panel
- Screenshot container styled as a card: bg #121212, radius 8px, optional sm ring for a clean edge; inner padding 16px.
### Client Logo Grid
- Even grid of brand marks in low-contrast white. Use #374151 borders between cells and 8px outer radius.
### Testimonials Row
- Quotes in cards with on-surface text and subtle borders; reserve #9c95fc for author highlights or link accents.
### Footer Mega Menu
- Multi-column lists using Body MD, white text on #121212, section dividers in #374151, links styled as standard body text with hover accent in #4945ff.

## Do's and Don'ts

Do
- Use #ffffff text on #121212 surfaces; keep reading sizes at Body MD 15px for global copy.
- Reserve #4945ff and #9c95fc for active states, key CTAs, and the install/AI moments.
- Prefer border #374151 and the sm ring for separation instead of heavy drop shadows.
- Keep corners consistent: 8px for primaries/cards/tabs, 4px for secondary/compact controls.

Don't
- Introduce new radii or custom shadows beyond the sm 1px ring.
- Flood entire sections with accent purple; use it as a highlight, not a background wash.
- Mix additional font families; Poppins is the single voice with Inter/Manrope/Plus Jakarta Sans only as fallbacks.
- Add extra spacing steps; stick to 8, 20, 40, 56, and 64px increments.

## Agent Prompt Guide

Quick reference
- Text: #ffffff (on-surface)
- Background: #121212 (surface/neutral)
- Border: #374151
- Accent: #4945ff (primary accent), #9c95fc (soft accent)

1) Build the hero
- Container bg #121212, outer padding 64px. Heading: Poppins 43px/600, letter-spacing -0.025em, color #ffffff. Body: Poppins 15px/400, color #ffffff at 80% opacity if needed. Primary button: bg #ffffff, text #292875, radius 8px, height 42px, padding 8px 24px. Include an install bar styled as a pill: radius 8px, height 42px, text #ffffff on an accent #4945ff background.

2) Create the tabbed feature section
- Section padding 56px. Tablist: each tab in a container with radius 8px, text #ffffff, separators/borders #374151. Active tab text/accent #4945ff. Panel content sits in a card: bg #121212, radius 8px, padding 16px, optional 1px ring.

3) Logo grid
- Grid container bg #121212 with 40px gaps. Cells outlined with #374151; logos in #ffffff at reduced opacity. Outer radius 8px.

4) Testimonial strip
- Two-column layout with 40px gap. Quote heading uses Poppins 21px/600; body uses 15px/400. Card bg #121212, text #ffffff, border #374151, radius 8px; link accents #4945ff.

5) Footer
- Section bg #121212, padding 64px. Column headings Poppins 18px/600 in #ffffff; links Body 15px/400 in #ffffff. Dividers #374151; inline link accents #9c95fc or #4945ff on hover.

## Similar Brands

- Vercel — Dark canvas with high-contrast CTAs; Strapi leans purple where Vercel stays monochrome.
- Supabase — Developer-first dark UI; Strapi swaps green for purple and uses softer 8px radii.
- Contentful — Similar content-platform narrative; more light-themed, while Strapi is dark by default.
- HashiCorp — Utility-first layouts and hairline dividers; Strapi adds a friendlier, rounded look and brighter accents.

More like this

Browse Software →
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
understory.io
Understory Marketing
Understory
More bookings, less admin—bookings and ads that grow your experiences.
Homepage · 24 hours ago