Styleguide

Design system reference — tokens, components, typography.

Color Tokens

CSS custom properties defined in assets/styles/_tokens.scss. Override any token in local/assets/styles/ to retheme the entire site.

--bg
Page background
--bg-surface
Sidebar / surface
--bg-elevated
Buttons / inline code
--text
Primary text
--text-muted
Secondary text
--border
Dividers, borders
--accent
Links, CTAs, active
--accent-bg
Accent background
--nav-bg
Nav (always dark)
--footer-bg
Footer (always dark)
--code-bg
Code block bg

Typography

Inter for UI and body text. JetBrains Mono for code, labels, and metadata. Type scale defined in assets/styles/_variables.scss.

Heading 1 — The Static Site Generator
2.25rem · weight 800 · tracking −.04em
Heading 2 — Content Pipeline
1.5rem · weight 700 · border-bottom
Heading 3 — ContentService 1.125rem · weight 700
Heading 4 — Configuration 1rem · weight 600

Body text (1.0625rem · line-height 1.8) — Lorem ipsum dolor sit amet, consectetur adipiscing elit. notACMS renders all content to static HTML at build time, with no database or server-side processing at runtime.

Muted text (.text-muted · 0.9375rem) — Secondary information, captions, metadata. Used for dates, excerpts, and supporting copy throughout the design.

Mono (JetBrains Mono · 0.8125rem) — ./notACMS deploy --prod · _site.yaml · local/content/

Buttons

Classes: .btn base + .btn-primary or .btn-outline. Designed for dark-background contexts (hero, CTA sections).

Get Started GitHub

Labels & Badges

Features .section-label
Open Source · PHP / Symfony · v1.1.0 .hero-label
releases .release-badge
releases .post-badge
open-source symfony php .tag-pill

Callout

Class: .callout + .callout-icon + .callout-text. Rendered from Markdown blockquotes via _prose.scss.

Tip: Place images as close to the content that uses them as possible. notACMS handles the path mapping during build.

Prose

Markdown output is wrapped in .prose. Styles in assets/styles/_prose.scss.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. notACMS renders content through a four-step pipeline: scan → parse → render → emit. Each step is an independent service.

  • Flat Markdown + YAML files — no database required
  • Twig templates — full Symfony DI available
  • CommonMark with GFM extensions and heading anchors
  1. Clone the repository
  2. Run ddev start
  3. Run ./notACMS deploy --prod

Tip: Override any template in local/templates/ to customise output without touching core files.

FieldTypeDescription
titlestringPage title (required)
slugstringURL path override
draftboolHide from production builds
 
# Build and deploy
./notACMS deploy --prod

Feature Card

Classes: .feature-card + .feature-icon + .feature-title + .feature-desc

Markdown + YAML
Write content in Markdown with YAML frontmatter. CommonMark with headings, tables, callouts.
Multilingual
First-class i18n. Content co-located per locale. URL overrides per language.
Full-text Search
Pagefind integration. Static, zero-server-cost search indexed at build time.
PHP / Symfony Core
Full Symfony DI, console commands, Twig templates, SCSS via AssetMapper.

Stat Card

Classes: .stat-card + .stat-card-num + .stat-card-label + .stat-card-desc

0
Database dependency
Content lives in flat Markdown + YAML files. No ORM, no migrations.
1
Build command
./notACMS deploy outputs your complete site to public/static/.
∞
Locales supported
Add any language with a line in _site.yaml. Content co-located per locale.
Apache 2.0
Licensed
Fork it, extend it, make it yours. No vendor lock-in.

Release Card

Classes: .release-card + .release-card-meta + .release-badge + .release-date

releases Apr 15, 2025

notACMS v1.1.0 — New design, docs, and DE locale

This release is all about the meta-layer: the notACMS promotional site now runs on notACMS itself. New amber-phosphor design, full documentation, and German locale.

Read post

Prev / Next Nav

Classes: .prev-next-nav + .prev-next-card / .prev-next-card--next + .prev-next-dir + .prev-next-title

Search Overlay

A full-screen overlay powered by Pagefind. Open via the icon in the nav or press ⌘K / Ctrl+K from anywhere.

Lazy-loads Pagefind index on first open. Results include excerpt with highlighted matches.

Phosphor Icons

Loaded via CDN. Usage: <i class="ph ph-{name}"></i>

Manual book-open
Architecture tree-structure
Customization sliders
Locales globe
Design Ref palette
Releases rocket
GitHub github-logo
Arrow right arrow-right
Arrow left arrow-left
External link arrow-square-out
Theme (light) moon
Theme (dark) sun
Tip callout lightbulb
Dropdown caret-down
Speed / stat lightning
Search magnifying-glass
PHP / Code code
Markdown markdown-logo
Mobile nav list
Database database
Close x