Design tokens
Colors
Core MASA palette from Figma. Use these CSS variables in blocks and custom CSS.
Brand
Neutrals & utility
Type scale
Typography
Headings, body copy, and inline styles as they appear in page content and Section blocks.
Subhead / eyebrow
Heading 1 — page title scale
Heading 2 — section title
Heading 3 — subsection
Heading 4
Heading 5
Heading 6
Body paragraph with an inline link, strong emphasis, italic emphasis, and a bit of longer copy so you can judge line length and rhythm: MASA supports ambulatory surgery centers across Michigan through advocacy, education, collaboration, and industry resources.
A second paragraph stacks under the first. Keep body bands readable — prefer
contentMaxWidth=standard or default for long-form sections.
Blockquote: “Supporting Michigan’s ASC community through leadership, connection, and a shared commitment to high-quality outpatient care.”
— MASA
Unordered list
- Advocacy and legislative engagement
- Year-round education and events
- Member resources and networking
- Nested item example
- Another nested item
- Committee participation
Ordered list
- Join as a member facility
- Complete your profile in the Members Area
- Register for the next education day
- Engage with a committee
Page building
Content patterns
How common interior copy tends to read inside Section blocks — use these as a visual check when composing About, Committees, and resource pages.
Intro band
Supporting Michigan’s ASC community
The Michigan Ambulatory Surgery Association supports ambulatory surgery centers across the state through advocacy, education, collaboration, and industry resources that help members deliver high-quality outpatient care.
Explore the committees below to learn more about their areas of focus and opportunities to get involved.
Callout
Ready to get involved?
Membership connects your center with statewide advocacy, education days, and peer networks.
Full-bleed band
Edge-to-edge brand section
Use full-width Section backgrounds for emphasis. Keep copy short and pair with a clear CTA.
Data
Tables
Default table styling for schedules, fee lists, and comparison content.
| Session | Track | Time |
|---|---|---|
| Opening remarks | General | 8:30 AM |
| Reimbursement update | Operations | 9:15 AM |
| Clinical quality roundtable | Clinical | 10:30 AM |
Feedback
Alerts
Neutral alert — general notice for members.
Success — your registration was received.
Warning — this event is near capacity.
Error — please correct the highlighted fields.
Gravity Forms markup
Forms
Base field styles mapped to Gravity Forms class names (demo markup only).
Sample inquiry
masa/section
Section backgrounds
Contained + default max width — one of each background option.
isContained=true · background=transparent · contentMaxWidth=default · removeSidePadding=false
Background: transparent
Transparent background — inherits the page surface.
isContained=true · background=light · contentMaxWidth=default · removeSidePadding=false
Background: light
Light cream background (`--color-light`).
isContained=true · background=dark · contentMaxWidth=default · removeSidePadding=false
Background: dark
Dark background with light text treatment.
isContained=true · background=primary · contentMaxWidth=default · removeSidePadding=false
Background: primary
Primary brand blue background.
isContained=true · background=primary-light · contentMaxWidth=default · removeSidePadding=false
Background: primary-light
Soft primary-tint background with primary headings.
isContained=true · background=secondary · contentMaxWidth=default · removeSidePadding=false
Background: secondary
Secondary green background.
isContained=true · background=secondary-light · contentMaxWidth=default · removeSidePadding=false
Background: secondary-light
Soft secondary-tint background.
isContained=true · background=white · contentMaxWidth=default · removeSidePadding=false
Background: white
White panel with light border.
isContained=true · background=image · contentMaxWidth=default · removeSidePadding=false
Background: image
Image background with dark overlay for legibility.
masa/section
Content max widths
Contained light sections at each max-width setting.
isContained=true · background=light · contentMaxWidth=default · removeSidePadding=false
Max width: default
contentMaxWidth=default on a contained light section.
isContained=true · background=light · contentMaxWidth=standard · removeSidePadding=false
Max width: standard
contentMaxWidth=standard on a contained light section.
isContained=true · background=light · contentMaxWidth=small · removeSidePadding=false
Max width: small
contentMaxWidth=small on a contained light section.
masa/section
Layout flags
Contained vs full-bleed, and side-padding removal.
isContained=true · background=primary-light · contentMaxWidth=default · removeSidePadding=false
Contained width
isContained=true — section stays inside the content column.
isContained=false · background=primary · contentMaxWidth=default · removeSidePadding=false
Full width
isContained=false — background bleeds edge-to-edge via the full-bleed pseudo.
isContained=true · background=white · contentMaxWidth=default · removeSidePadding=true
No side padding
removeSidePadding=true — horizontal padding cleared for edge-flush inner content.
isContained=false · background=image · contentMaxWidth=default · removeSidePadding=false
Full width + image
Full-bleed image background with overlay.
masa/section
Useful combos
Common pairings for interior pages.
isContained=true · background=light · contentMaxWidth=standard · removeSidePadding=false
Contained · light · standard
Readable body band for long-form copy.
isContained=true · background=secondary · contentMaxWidth=small · removeSidePadding=false
Contained · secondary · small
Narrow CTA / callout treatment.
isContained=false · background=dark · contentMaxWidth=default · removeSidePadding=true
Full · dark · no side padding
Edge-to-edge dark band for media-heavy layouts.