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

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/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.