Optics

Optics is RoleModel's CSS design system, published as @rolemodel/optics. The installed package is the source of truth for which components and tokens exist. Read it instead of recalling names from memory, since tokens change between versions.

• Tokens: node_modules/@rolemodel/optics/dist/tokens/tokens.json (or the CSS under dist/css/core/tokens/ in older versions)
• Components: node_modules/@rolemodel/optics/dist/css/components/*.css
• Version: the @rolemodel/optics entry in package.json
• Docs: https://docs.optics.rolemodel.design
• Docs for agents: https://docs.optics.rolemodel.design/llms.txt (markdown index; component pages show the HTML for each variant). It covers the latest release, so check names against the installed package.

Before writing CSS

1. Use an Optics component if one fits. Check dist/css/components/ for the block and its modifiers.
2. Reuse a project class if one exists. Search app/assets/stylesheets/.
3. Write a new component only when neither fits: one block per file in app/assets/stylesheets/components/{block}.css, named and nested per the bem-structure skill.

To change how an Optics component looks across the app, override it in app/assets/stylesheets/components/optics-overrides/{component}.css. Don't fork it into a new block.

Optics also ships utility classes (.flex, .gap-sm, and the rest of dist/css/core/utilities.css). RoleModel strongly discourages them in views: style through a BEM block or element instead.