summercms/.planning/phases/11.2-ready-to-share-summercms-io-website-and-newsletter-plugin/design

Handoff: SummerCMS Alpha 0.1 Landing Page

Overview

A single-page marketing landing for summercms.io, launching with Alpha 0.1. It has a sticky header with section anchors and a link to /docs, a hero, four content sections (Why, Features, From WinterCMS, Get started) and a footer. It replaces the current "Under construction" page and keeps its navy, yellow and sun identity.

About the Design Files

SummerCMS Landing.dc.html is a design reference built in HTML. It shows the intended look and behavior and is not production code. Recreate it in the target site's stack. If the site has no stack yet, a static-site setup (Astro, Hugo, or a plain HTML/CSS page) is enough: the page is static apart from two small scripts (scroll-spy and copy-to-clipboard). The file loads a design-runtime script (support.js) for previewing; ignore it.

Fidelity

High-fidelity. Colors, type, spacing and copy are final. Match them exactly.

Global

• Page background #233148. Text #e9edf3.
• Fonts: Roboto (300/400/500/700) and Roboto Mono (400/500), from Google Fonts.
• html { scroll-behavior: smooth; scroll-padding-top: 72px } so anchor jumps clear the sticky header.
• Content container: max-width: 1120px; margin: 0 auto; padding: 0 24px.
• Section vertical padding: 96px top and bottom.
• Default link color #f5c55a; hover #fbe3a6. Selection: background #f5c55a, text #1d2940.

Sections

1. Header (sticky)

• position: sticky; top: 0; z-index: 10. Height 64px. Background rgba(29,41,64,0.82) with backdrop-filter: blur(12px). Bottom border 1px solid rgba(255,255,255,0.07).
• Row is flex, align-items: center, gap: 16px. Logo, the "ALPHA 0.1" pill and the Docs button all have flex-shrink: 0 and white-space: nowrap.
• Logo (links to #top): a 30px sun icon (masked to a circle, scaled 1.35) next to the wordmark "Summer" + "CMS". Roboto 700, 18px, letter-spacing -0.01em. "Summer" #fff, "CMS" #fbd77e.
• Pill "ALPHA 0.1": 11px/500, letter-spacing 0.12em, color #f5c55a, border 1px solid rgba(245,197,90,0.35), radius 999px, padding 3px 9px.
• Section links: Why #why · Features #features · From WinterCMS #winter · Get started #start.
  • Right-aligned in a flex: 1; min-width: 0; overflow-x: auto wrapper; the inner row has margin-left: auto.
  • Each link: 14px/500, padding 8px 12px, radius 999px, color #c5ccd6.
  • Active link: color #f5c55a, background rgba(245,197,90,0.1).
  • Hidden at viewport ≤ 720px. Below that width the header shows only logo, pill and Docs.
• Docs button → /docs: label "Docs →". Background #f5c55a, text #1d2940, 14px/500, padding 9px 16px, radius 999px. Hover background #fbd77e.

2. Hero (#top)

• Padding 120px 24px 128px. Centered column, text-align: center, overflow: hidden.
• Rays (behind everything, can be turned off): an absolutely positioned layer at inset: -40% -20%.
  • background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,0.035) 0deg 7deg, transparent 7deg 15deg)
  • mask: radial-gradient(circle, #000 10%, transparent 62%)
• Glow: a 520px circle centered 210px from the top, radial-gradient(circle, rgba(245,197,90,0.16), transparent 60%).
• Sun badge: 180px circle with border 1px solid rgba(255,255,255,0.12) and background #29344a, containing the sun image.
• H1 "Summer" + "CMS": clamp(44px, 7vw, 76px), weight 700, line-height 1, letter-spacing -0.02em, margin-top 28px.
  • "Summer" is #fff.
  • "CMS" uses a gradient text fill: linear-gradient(180deg, #fde9b4, #f5c55a).
• Tagline "A new dawn in content management": clamp(18px, 2.2vw, 22px), weight 300, color #c5ccd6, margin-top 16px.
• Description: max-width 600px, 17px, line-height 1.6, color #a3adbd, margin-top 24px. Copy: "A content management framework for Go, inspired by WinterCMS. Plugins, the admin SPA and console commands compile into a single binary."
• CTAs: margin-top 40px, flex row, gap 12px, wraps on narrow screens.
  • Primary "Read the docs" → /docs: background #f5c55a, text #1d2940, 15px/500, padding 14px 26px, pill shape. Hover background #fbd77e.
  • Secondary "Alpha 0.1 is out" → #start: 8px #f5c55a dot before the label. Background rgba(255,255,255,0.06), border 1px solid rgba(255,255,255,0.14), padding 13px 24px. Hover background rgba(255,255,255,0.1).

Section heading pattern (used in every content section)

• Eyebrow: 12px/500, letter-spacing 0.16em, uppercase, #f5c55a.
• H2: clamp(30px, 4vw, 42px), weight 700, line-height 1.15, letter-spacing -0.015em, #fff, margin-top 12px.

3. Why (#why)

• Eyebrow "WHY SUMMER". H2 "What you tested is exactly what you deploy." (max-width 720px).
• Card grid: repeat(auto-fit, minmax(260px, 1fr)), gap 20px, margin-top 48px.
• Cards: background #29344a, border 1px solid rgba(255,255,255,0.08), radius 16px, padding 28px.
  • Number: Roboto Mono 13px, #f5c55a.
  • Title: 20px/500, #fff, margin 16px 0 8px.
  • Body: 15px, line-height 1.6, #a3adbd.
• Card copy:
  1. One binary: "Plugins are Go packages compiled in at build time. Nothing is scanned, loaded or installed at runtime."
  2. YAML-driven admin: "Describe lists and forms in fields.yaml and columns.yaml. An embedded SPA renders them." The file names use inline code: Roboto Mono 13px, #e9edf3.
  3. Headless by design: "A JSON API declared route by route, plus realtime channels. Build the public site in whatever frontend you like."

4. Features (#features)

• Full-bleed band: background #1f2b42, top and bottom borders 1px solid rgba(255,255,255,0.07).
• Eyebrow "WHAT'S IN THE BOX". H2 "The services a content app needs."
• Grid: repeat(auto-fill, minmax(240px, 1fr)). The 1px dividers come from gap: 1px over a rgba(255,255,255,0.08) grid background. Outer border is the same color, radius 16px, overflow: hidden.
• Each tile is a link: background #1f2b42, padding 24px, flex column, gap 6px. Hover background #253350.
  • Title: 16px/500, #e9edf3.
  • Body: 14px, line-height 1.5, #a3adbd.

Title	Body	Link
Admin SPA	Embedded in the binary, driven by each plugin's YAML.	/docs/backend/admin-spa
Models & migrations	GORM structs with fill, validation and pagination helpers.	/docs/database/models
Routing & auth	Route groups, named middleware, tokens and OAuth.	/docs/services/routing
Queued jobs	Dispatched inside the caller's transaction.	/docs/services/jobs
Realtime	Broadcast model changes to subscribed clients.	/docs/services/realtime
Search	Searchable models, synced after commit.	/docs/services/search
Mail & push	Plugin mail templates and push notifications.	/docs/services/mail
Console	Scaffolding, scheduler, workers and your own commands.	/docs/console/introduction

Doc URLs were derived from the docs folder structure. Confirm them against the built docs site.

5. From WinterCMS (#winter)

• Two columns: repeat(auto-fit, minmax(300px, 1fr)), gap 48px, align-items: start.
• Left column
  • Eyebrow "COMING FROM WINTERCMS". H2 "Same shape. Compiled and typed."
  • Paragraph (16px, line-height 1.65, #a3adbd, margin-top 20px): "Plugins still register and boot, require each other, ship migrations and admin YAML. A plugin ports file by file."
  • Link "See the full concept map →" (15px/500) → /docs/setup/coming-from-wintercms.
• Right column: concept table
  • Container: background #29344a, border rgba(255,255,255,0.08), radius 16px.
  • Header row "WINTERCMS | SUMMERCMS": 12px/500, letter-spacing 0.12em, #8a94a3.
  • Rows: grid 1fr 1.3fr, padding 14px 20px, Roboto Mono 13px, divider rgba(255,255,255,0.06). Left cell #a3adbd, right cell #fbe3a6.
  • Row content:

WinterCMS	SummerCMS
Plugin.php	party.Plugin
version.yaml + updates/	pact.HasMigrations
Eloquent models	GORM + lagoon
fields.yaml / columns.yaml	Same YAML, compiled at boot
routes.php	pact.HasRoutes
Event::listen / fire	festival.Bus
Artisan commands	bonfire.Command

6. Get started (#start)

• Full-bleed band: background #1f2b42, top border rgba(255,255,255,0.07).
• Two columns, same grid as the WinterCMS section, align-items: center.
• Left column
  • Eyebrow "GET STARTED". H2 "Build your first app."
  • Requirement chips "Go 1.27" and "PostgreSQL 16": 13px, #c5ccd6, background rgba(255,255,255,0.06), border rgba(255,255,255,0.1), pill shape, padding 6px 12px.
  • Note: "Alpha 0.1 is for early adopters. APIs may change before 1.0."
  • Buttons:
    • "Installation guide" (primary style) → /docs/setup/installation.
    • "Source" (outline style) → https://git.golem15.com/golem15/summercms.
• Right column: terminal card
  • Background #18223a, border rgba(255,255,255,0.08), radius 16px.
  • Title bar: label "terminal" (Roboto Mono 12px, #8a94a3) and a Copy button (12px/500, #c5ccd6, background rgba(255,255,255,0.06), border rgba(255,255,255,0.1), radius 6px, padding 5px 10px).
  • Body: padding 22px 20px, Roboto Mono 14px, line-height 1.9.
  • Each line is its own block element. Comments are #8a94a3. The $ prompt is #f5c55a. A 16px gap separates the two groups.

  # install the summer CLI
  $ go install ./cmd/summer
  
  # build and run the example app
  $ cd examples/hello
  $ summer build
  $ ./bin/hello greeter:hello
  

7. Footer

• Top border rgba(255,255,255,0.07). Padding 32px 24px. 13px, #8a94a3.
• Left: "© 2026 SummerCMS. Something bright is here."
• Right links (#a3adbd, hover #f5c55a, gap 20px):
  • Docs → /docs
  • Source → https://git.golem15.com/golem15/summercms
  • Back to top ↑ → #top

Interactions & Behavior

• Scroll-spy: on window scroll, the active section is the last of why, features, winter, start whose top is less than 140px from the viewport top. That link gets the active style. Above the first section, no link is active.
• Copy button: writes the four commands (without $ or comments) to the clipboard. The label changes to "Copied" for 1.5s, then reverts.
• Responsive: every grid uses auto-fit/auto-fill and collapses to one column on its own. Section links hide at ≤ 720px. Hero type scales with clamp().
• Transitions: none are specified. Hover changes are instant; a 150ms ease on background and color is fine.

State

• activeSection: string
• copied: boolean
• isWide: boolean (matchMedia min-width: 721px)

The prototype also has two config flags: showRays (default true) and scrollSpy (default true).

Design Tokens

Token	Hex	Used for
navy-900	#18223a	terminal background
navy-850	#1d2940	header base, text on yellow
navy-800	#1f2b42	alternate bands
navy-700	#233148	page background
navy-650	#253350	feature tile hover
navy-600	#29344a	cards
yellow-500	#f5c55a	accent
yellow-400	#fbd77e	accent hover, "CMS" in logo
yellow-200	#fbe3a6	link hover, code values
yellow-100	#fde9b4	top of the "CMS" gradient
text	#e9edf3	body text
text-2	#c5ccd6	tagline, nav links
text-3	#a3adbd	body copy
text-4	#8a94a3	captions, comments

• Borders: white at 6, 7, 8, 10, 12 and 14% alpha.
• Radius: 6px (small button), 16px (cards), 999px (pills).
• Spacing in use: 4, 6, 8, 12, 16, 20, 24, 28, 32, 40, 48, 96 and 120px.

Assets

• assets/sun-crop.png (180×180): a placeholder cropped from a screenshot of the current under-construction page. Replace it with the original sun artwork from the existing summercms.io site. A transparent PNG or SVG is best; the hero badge then provides the circle and border.

Files

• SummerCMS Landing.dc.html: the full design reference.
• assets/sun-crop.png: the placeholder sun icon.