Skip to content
DesignMunkDesignMunk Submit a site

Craft CMS

craftcms.com
Craft empowers the entire creative process.
Software Technology Tailwind Homepage Cambon GT Eesti
Share Visit site
craftcms.com DESKTOP · 1440
Craft CMS

AI Breakdown

Design export

---
version: alpha
name: Craft CMS
description: Craft empowers the entire creative process.
colors:
  primary: "#000000"
  secondary: "#7c7c7c"
  tertiary: "#184cef"
  neutral: "#ffffff"
  border: "#e5e7eb"
  brand-lunar-rock: "#c5c5c5"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Cambon Light
    fontSize: 57px
    fontWeight: 400
    lineHeight: 1.08
    letterSpacing: -0.04em
  headline-md:
    fontFamily: GT Eesti
    fontSize: 43px
    fontWeight: 400
    lineHeight: 1.21
  headline-sm:
    fontFamily: GT Eesti
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.19
  headline-xs:
    fontFamily: GT Eesti
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.21
  body-md:
    fontFamily: GT Eesti
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  sm: 8px
  md: 24px
  lg: 40px
spacing:
  xs: 6px
  sm: 16px
  md: 28px
  lg: 40px
  xl: 80px
components:
  button-primary:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.neutral}"
    rounded: "{rounded.lg}"
    padding: 15px 25px
    height: 47px
  button-secondary:
    textColor: "{colors.tertiary}"
    rounded: "{rounded.md}"
    padding: 15px 25px
    height: 47px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 16px
---

# Craft CMS: Editorial Serif Hero with Blue Icon Tabs

## Overview

Editorial and confident. The UI is spacious, with a quiet white surface, high-contrast text, and a single blue accent for intent. The tone serves designers, developers, and marketers who expect clarity over decoration. When tokens don't cover a case, prefer calm whitespace, restrained color, and serif-for-hero, sans-for-UI typography.

## Colors

- Primary (#000000): Deep ink for headlines and core text.
- Secondary (#7c7c7c): Subdued secondary text, metadata, and muted states.
- Tertiary (#184cef): Craft blue for links, icons, and primary actions.
- Neutral (#ffffff): Page canvas and card backgrounds.
- Border (#e5e7eb): Subtle dividers, input borders, and section separators.
- Brand-lunar-rock (#c5c5c5): Neutral UI chrome, disabled icons, and low-emphasis text.
- Surface (#ffffff): Default surface; identical to Neutral.
- On-surface (#000000): Default text color on surfaces; identical to Primary.

## Typography

- Cambon Light (custom): Used for the largest display headline (headline-lg 57px/1.08, -0.04em). Not freely hosted; if unavailable, substitute a high-contrast editorial serif such as Playfair Display, Cormorant Garamond, or Libre Baskerville at comparable sizes.
- GT Eesti (custom): The UI workhorse for headline-md (43px), headline-sm (32px), headline-xs (24px), and body-md (18px/1.5). Not freely hosted; if unavailable, substitute Manrope, Inter, or Plus Jakarta Sans. Keep weights light/regular to preserve the calm tone. Use the serif only for marquee statements; all navigation and body copy remain in the sans.

## Layout

Spacing runs on a compact-to-generous ladder: 6, 16, 28, 40, and 80px. Use xs/sm for element padding and control gaps, md for intra-section spacing, lg for grouping related blocks, and xl for top/bottom section margins. A centered, multi-column grid with wide gutters keeps content readable; allow cards to breathe with at least sm (16px) internal padding and lg (40px) external gutters on desktop.

## Elevation & Depth

Depth is minimal and purposeful. Small and medium shadows use a cool blue tint (rgba(6,67,117,...)) to lift screenshots, sticky bars, or floating panels; large/extra-large shadows are disabled. When no elevation is needed, separate regions with a 1px #e5e7eb border or whitespace instead of darker fills.

## Shapes

Corners communicate hierarchy. Cards use 8px (sm) for subtle softness; secondary buttons use 24px (md); primary buttons are pill-shaped at 40px (lg). Keep imagery and screenshots aligned to 8px corners unless a component specifies a larger radius.

## Components

Buttons and cards
- Primary Button: #184cef background, white text, 47px height, 15px 25px padding, 40px radius. Use for primary CTAs (Demo, Start Trial).
- Secondary Button: Text in #184cef, 47px height, 15px 25px padding, 24px radius. Use for secondary actions adjacent to a primary.
- Link Button: Text-only in #000000; no radius.
- Card: White background, black text, 8px radius, 16px padding; add a #e5e7eb border or sm shadow when needed.

### Header Navigation
Single-line nav with left logo and right-aligned CTAs. Link text uses #000000 with hover/active in #184cef. Primary "View the Demo" uses the 47px pill spec.

### Hero Serif Headline
Center-aligned, two-line headline in Cambon Light at 57px/1.08 with -0.04em tracking. Keep surrounding whitespace at least xl (80px) above and lg (40px) below.

### Capability Icon Tabs
Four items ("Content Creation / Strategy / Design + Development / Ecommerce"). Labels in GT Eesti 18px; icons and active indicator in #184cef. Provide md (28px) gap between items; underline/indicator sits 8–12px below labels.

### Product Screenshot Carousel
Wide screenshot with 8px corner radius and md shadow; sits on white. Use lg (40px) spacing above/below; pagination dots or arrows accented in #184cef.

### Feature Grid
Heading in headline-md (43px). Eight blurbs arranged in a responsive grid; each blurb uses headline-xs (24px) for the title and body-md (18px) for copy. Separate items with #e5e7eb borders and lg (40px) gaps.

### Open Source Strip
Compact band with logos; keep a 1px #e5e7eb top border and sm (16px) vertical padding to maintain quiet hierarchy.

### Community Stats Row
Three stat blocks (Discord, Partners, Sites created). Use headline-sm (32px) for the number, body-md (18px) for labels. Optional sm shadow to lift blocks slightly.

### Cloud Promo Banner
Sub-hero with headline-md (43px) and paired CTAs: Primary "Start a free trial" and Secondary "View Pricing". Maintain lg (40px) spacing and align buttons to the 47px height/radius specs.

### Footer, Multi-Column
Three to four link columns separated by #e5e7eb dividers. Links in #000000 with hover in #184cef; top padding xl (80px), column gaps lg (40px).

## Do's and Don'ts

- Do reserve Cambon Light for the largest marketing headline; don't use the serif for UI labels or body copy.
- Do apply #184cef to links, icons, and primary actions; don't set long paragraphs or large backgrounds in this blue.
- Do observe 80px section spacing on desktop; don't stack feature groups without at least 40px separation.
- Do wrap screenshots with 8px corners and the md blue-tinted shadow; don't introduce heavy or warm-tinted dropshadows.
- Do keep the primary button at 47px height with a 40px radius; don't alter paddings or mix radii within a button row.
- Do use #e5e7eb for dividers and inputs; don't darken borders to compensate for layout—add whitespace instead.

## Agent Prompt Guide

Quick color reference
- Text: #000000
- Background: #ffffff
- Border: #e5e7eb
- Accent: #184cef

1) Build the hero
- Center a two-line H1 set in Cambon Light 400 at 57px, line-height 1.08, letter-spacing -0.04em (fallback: Playfair Display 400). Color #000000 on #ffffff.
- Add a four-item row below for "Content Creation / Content Strategy / Design + Development / Ecommerce" using GT Eesti 400 at 18px (fallback: Manrope 400). Icon strokes and the active indicator use #184cef. Gaps: md (28px). Spacing: lg (40px) above row, lg (40px) below.

2) Define CTAs
- Primary button: height 47px; padding 15px 25px; background #184cef; text #ffffff; border-radius 40px; font GT Eesti 500 (fallback: Inter 500).
- Secondary button: same sizing; text #184cef; border-radius 24px; transparent background.

3) Create the features grid
- Section heading in GT Eesti 400 at 43px, line-height 1.21; color #000000.
- Grid of eight items; each item title in GT Eesti 400 at 24px; copy in 18px/1.5. Card background #ffffff, border 1px #e5e7eb, radius 8px, padding 16px. Grid gap lg (40px). Section margins: xl (80px) top/bottom.

4) Screenshot carousel
- Container on #ffffff with a single image at 8px radius and md shadow (rgba(6,67,117,0.3) 0 0 2px, rgba(6,67,117,0.2) 0 10px 58px). Pagination dots in #184cef. Vertical spacing lg (40px) above and below.

5) Footer
- Top border 1px #e5e7eb; padding-top xl (80px). Three link columns with column gap lg (40px). Links #000000 → hover #184cef. Body text 18px/1.5.

## Similar Brands

- Contentful: Similarly spare with strong blue accents; leans more enterprise, with denser navigation patterns.
- Sanity: Minimal, developer-forward layout; uses more monochrome and fewer serif flourishes than Craft's editorial hero.
- Ghost: Clean typography and plenty of whitespace; bolder dark/light theming and less emphasis on icon tabs.
- Statamic: Clear product storytelling with community proof; more rustic brand color palette versus Craft's crisp blue.
- Webflow: Polished marketing with strong component rhythm; heavier motion and gradients compared to Craft's restrained surfaces.

More like this

Browse Software →
pallyy.com
Pallyy Marketing
Pallyy
Plan, approve, schedule, and publish on one simple social calendar.
Homepage · 23 minutes 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 · 23 minutes ago
kagaz.app
Kagaz Developer Tools
Kagaz
Invoice generator and API that creates beautiful invoices fast.
Homepage · 12 hours ago
polymer.co
Polymer HR & Recruiting
Polymer
Attract and hire great people with a powerful ATS and job board
Homepage · 14 hours ago