Elements · Creator Design System

Code & syntax

Five token roles, line numbers, line highlights, and a copy button that says so. Dark slab by default; a light twin for prose.

handlebars

{{!-- the film, fetched once --}}{{#get "posts" filter="tag:hash-trip" limit="1" as |film|}}  {{#if film.length}}{{> hero-film}}{{/if}}{{/get}}

.codebox — head + lang + [data-copy] · .ln numbers · .ln-hl highlight · .tok-key/-str/-num/-fn/-com

css

/* one accent, rationed */.hero__title em { color: var(--accent); }

.codebox-light — the prose-friendly twin, own token colours

npm run build && npx gscan .

.copy-line — one-liners with the copy chip