Build a complete page with OCS grammar before writing custom CSS. Containers establish the page boundary; cards, grids, tables, images, and buttons organize the content inside it.

Button Grammar Grid Grammar Container Grammar

The Container Relationship

Use one ocs__container for the page. Add navigation, section titles, cards, grids, tables, and actions as children. The composition provides structure without page-specific CSS.

ocs__container
|- navigation or ocs__links
|- ocs__section-title
|- ocs__card
|  |- ocs__grid
|  |  `- ocs__grid-cell
|  |     |- image content
|  |     |- text and status
|  |     `- ocs__btn action
|  `- ocs__table-wrap
|     `- ocs__table
`- ocs__pager or footer

Example 1: Project Landing

Overview Work Team
Design-Based Research Hub

Classroom Presence

A preference-aware project page assembled from shared OCS elements.

What the project does

Project placeholder logo

Detect

Collect useful signals from the environment.

Project details

Correlate

Combine evidence into a clear, testable state.

In progress

Explain

Make the result understandable to the person using it.

Planned

Example 2: Card, Grid, and Table

Hardware Plan

Current hardware
Already available for the first prototype.
Next hardware
Purchased only after the first test proves the need.
ItemStatusPurpose
CameraCurrentCapture the room.
ReaderPlannedCollect a second signal.
The same structure adapts to the active user preference theme. No page-specific color CSS is needed.

Example 3: Nonprofit Capstone Hub

A useful hub gives people context before navigation: a few meaningful signals, clear filters, and cards that explain the next step.

Hub Programs Get Involved Impact
Community Organization

Scripps Ranch Fire Safe Council

A nonprofit hub that helps neighbors understand local wildfire risk, find programs, and choose a practical way to help.

12
Active programs
4
Upcoming events
3
Ways to volunteer

Find a starting point

All Prepare Volunteer Learn

Prepare Your Home

Practical home-hardening steps, local guidance, and a clear first action.

Start here

Join a Workday

See upcoming neighborhood fuel-reduction events and sign up for a role.

See events

Learn the Risk

Understand local wildfire conditions through short explainers and updates.

Explore

Make the next action obvious

Visitors should not have to guess whether to donate, volunteer, attend an event, or prepare their home. Give each path a short explanation and one clear action.
Donate Volunteer View events

Rules of Thumb

  • Start with ocs__container for page width and typography.
  • Use ocs__card for a framed section of related content.
  • Use ocs__grid when content needs comparison or repeated layout.
  • Put images in the card or grid cell that explains them.
  • Use ocs__table for structured comparison data.
  • Use ocs__btn, ocs__status-pill, and ocs__callout for actions and state.
  • Use preference tokens through the shared grammar instead of choosing fixed colors.
  • Add custom CSS only when the shared grammar cannot express the required behavior.