AGENTS.md

Commands

bundle exec jekyll serve    # Run dev server at localhost:4000
bundle exec jekyll build    # Build to _site/

Architecture

This is a Jekyll static site for Usetix marketing. Key patterns:

Multilingual (EN/DE/PT/FR/ES): Language determined by URL path (/ = English, /de/ = German, /pt/ = Portuguese, /fr/ = French, /es/ = Spanish). Pages use ref in front matter to link translations. Translation strings live in _data/strings.yml (EN), _data/strings_de.yml (DE), _data/strings_pt.yml (PT), _data/strings_fr.yml (FR), and _data/strings_es.yml (ES). Localized URL paths live in _data/paths.yml. Layouts/includes resolve copy via `

` (sets t).

Layout inheritance: All layouts extend base.html which provides HTML document structure plus head.html, header.html, footer.html includes. Child layouts (default, home, post, blog) declare layout: base in front matter.

CSS architecture: Native CSS modules under assets/css/ with a token-first design system:

Folder	Role
`tokens/`	CSS custom properties (colors, type, space, layout, effects) — redesign surface
`base/`	Fonts, reset, element defaults
`components/`	Reusable UI (buttons, cards, header, footer, layout primitives)
`modules/`	Page/section patterns (hero, pricing, blog, …)
`utilities/`	Single-purpose helpers

Entry: assets/css/main.css establishes @layer reset, base, components, modules, utilities. _data/stylesheets.yml is the ordered module manifest rendered as individually cache-busted <link> elements by _includes/head.html. There is no CSS preprocessor or bundler.

Redesign rule: change tokens in assets/css/tokens/ first. Components must not hardcode brand colors — only var(--color-*). Brand accent (--color-accent*) is separate from status colors (--color-positive, --color-info, --color-negative) so marketing can rebrand without breaking success/info UI.

Responsive rules: use the established min-width breakpoints 480px, 640px, 768px, 900px, and 1024px; use 639px for the corresponding below-640px max-width case. Hover-only effects must be wrapped in @media (hover: hover) and (pointer: fine). Keep focus, reduced-motion, and visually-hidden declarations explicit so every module is valid standalone CSS.

Blog posts: English in _posts/, German in de/_posts/, Portuguese in pt/_posts/, French in fr/_posts/, Spanish in es/_posts/. Front matter defaults in _config.yml auto-assign language and layout based on path.