Usage rules

• Body copy: --color-text (Off White) on --color-bg (Dark Gray) is the default — aim for 4.5:1 contrast at minimum.
• Primary CTA: Solid --color-primary background with --color-text label (white/off-white) for strong emphasis on dark pages. On lighter surfaces, use --color-primary as text with an outline or filled white background variant.
• Secondary CTA / Hovers: Use --color-link for text links and --color-link-hover on hover/focus. Provide underline + color change for clear affordance.
• Headers: H1/H2 may appear on --color-surface-deep or --color-bg; H2 can use --color-teal for an approachable accent (use sparingly). Section borders and subtle accents should use --color-primary-light.
• Status indicators: Use --color-error (Firebrick) for destructive actions and error messages; pair with a dark translucent background for banners to preserve contrast. Use --color-success for confirmations.
• Footer & social: Use a gradient background combining --color-steel → --color-cornflower, with small --color-pale-violet accents for buttons or icons. Social icons can use --color-cornflower or --color-pale-violet depending on contrast.
• Expressive backgrounds: Use the purple gradient stack (#53499e → #7050a1 → #8d5aa5) behind large hero art or promotional banners; ensure any overlaid text uses --color-text with a semi-opaque overlay or text-shadow to pass contrast.

Accessibility & contrast notes

• Always verify contrast of text vs background (tooling/automated checks). --color-text on --color-bg should meet WCAG AA body text.
• Colored body text (teal/purple) must always be tested — do not rely on color alone to convey meaning (use icons/labels).
• Links should be clearly visible (color + underline on hover/active + visible focus ring). Use --color-link for default link color and ensure contrast >= 3:1 for non-body text (WCAG guidance).
• For prefers-reduced-motion, remove heavy parallax or dramatic gradients; keep simple fades.

Sentient Meat typography is friendly, easy to read, and accessibly sized. Our intent is to prioritize legibility for low-vision users while keeping visual rhythm and hierarchy clear. Use Ovo for display headings and Raleway for body and UI copy. Avoid overly tight letter-spacing on large text.

• Base font-size: 16px (1rem)
• Primary body: Raleway, fallback system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial
• ‍Headings: Ovo, fallback Georgia, "Times New Roman", serif‍

Type scale

• --type-h1 — 2.2rem (Headline / page H1) — Ovo — strong display
• --type-h2 — 2.0rem (Section H2) — Ovo
• --type-h3 — 1.85rem (Subsection H3) — Ovo
• --type-h4 — 1.7rem (Small heading / card titles) — Raleway/Ovo mix
• --type-body — 1.3rem (Paragraph / primary body copy) — Raleway
• --type-small — 1.0rem (Small text / captions / meta) — Raleway

Notes

• 1rem base = 16px. So 1.3rem ≈ 20.8px (great for readability).
• Keep headings visually distinct but avoid tiny caps or condensed tracking which harms legibility.
• Ovo is decorative — use it primarily for H1–H3. Use Raleway for long headings when you need maximal clarity.

Responsive / practical tips

• Clamp for large headings (optional): If you want H1 to scale fluidly across very wide screens, use font-size: clamp(1.8rem, 1.4rem + 2vw, 2.2rem); — but keep the minimum at or above 1.8rem so low-vision users aren’t forced to zoom on small devices.
• Mobile: Because 1.3rem is intentionally large, test layout wrapping on small viewports. Keep paragraphs single-column and avoid multi-column body text on mobile.
• Spacing: Increase vertical rhythm for readability. For body paragraphs, use margin-bottom: 1rem (≈ 16px) or 1.2rem to create breathing room given larger font sizes.
• Line length: Target ~45–75 characters per line. With larger body text this usually means narrower content columns—use 60–70% column width for long articles or set a max-width of 55ch.

Accessibility reminders (typography-specific)

• Maintain at least 4.5:1 contrast for body text (1.3rem) — larger type can be slightly more forgiving (18pt/24px guidance), but still test.
• Avoid using decorative fonts for body copy. Ovo is fine for headings; if legibility drops at H3/H4 sizes, prefer Raleway for those smaller headings.
• Don’t rely on small caps or condensed tracking — these reduce legibility for low-vision readers.
• Provide a “text size” control in the site settings or obey browser zoom; make sure layout doesn’t break at 200% zoom.

Examples

Heading 1

Heading 2

Heading 3

Heading 4

Body copy: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

1. Item 1
2. Item 2
3. Item 3

Unordered list

• Item A
• Item B
• Item C

Text link

Bold text

Emphasis

^Superscript

_Subscript

Use Webflow’s default breakpoints and rem-based spacing so the layout scales cleanly with browser/text zoom and respects your low-vision-first typography. Root font-size = 1rem = 16px. All spacing tokens below are expressed in rem with the px equivalent in parentheses.

Breakpoints

• Desktop — all screens over 991px, wide layouts, 12-column grid
• Tablet — 991px and below, medium layouts, 8-column grid
• Mobile Landscape — 767px and below, narrow, 4-column grid / stacked cards
• Mobile Portrait — 478px and below, narrowest, single-column flow

Grid & gutters (rem-based)

• Desktop — 12 columns; gutter 1.5rem (24px)
• Tablet — 8 columns; gutter 1.25rem (20px)
• Mobile Landscape — 4 columns; gutter 1rem (16px)
• Mobile Portrait — single-column flow; gutter 1rem (16px)

Practical rules

• Use the 12-column grid for complex layouts (hero + feature columns).
• Move to 8-col at Tablet for two-up content or narrower multi-column cards.
• At Mobile Landscape collapse to 4-col for compact grids; at Mobile Portrait stack to a single column.
• Use consistent container side padding expressed in rem (see tokens below) so page content breathes when users increase text size.

Spacing tokens (rem)

Base spacing unit: --space-1 = 0.5rem (8px)

• --space-xxs = 0.25rem (4px)
• --space-xs  = 0.5rem (8px)
• --space-sm  = 0.75rem (12px) — useful for tight UI gaps
• --space-md  = 1rem (16px) — standard gap / form spacing
• --space-lg  = 1.5rem (24px) — card padding, section gaps
• --space-xl  = 2.5rem (40px) — large section spacing / hero padding
• --space-xxl = 4rem (64px) — big hero margins or full-bleed sections

Usage examples

• Card padding: padding: var(--space-md);
• Vertical rhythm between paragraphs: margin-bottom: var(--space-md);
• Section top/bottom spacing: padding-block: var(--space-xl); (desktop) and padding-block: var(--space-lg); (mobile)
• Grid gap between items: gap: var(--space-lg); on desktop, gap: var(--space-md); on tablet/mobile.

Border radius & elevation (rem)

• --radius-sm = 0.25rem (4px) — inputs, small buttons
• --radius-md = 0.5rem (8px) — cards, modals
• --radius-lg = 1rem (16px) — hero overlays, large panels

Shadow (subtle)

• Examples (use sparingly): box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,0.15); (4px 12px equivalents)

Responsive rules & practical patterns

• Flow-first: design components to stack vertically by default; use columns for desktop and tablet only. This keeps the mobile experience predictable when users enlarge text.
• Container padding: use rem-based padding on containers — e.g., padding-inline: 1.5rem (24px) on Desktop, 1rem (16px) on Tablet and smaller. This ensures consistent breathing room at larger text sizes.
• CTAs: when content appropriate, keep primary CTA above the fold on Mobile Landscape and Mobile Portrait (place a sticky or prominently positioned CTA when appropriate).
• Feature tiles/cards: compress to single-column cards at Mobile Portrait; at Mobile Landscape use 2-up or 4-col grid depending on card size and content density.
• Max-width & line length: set content column max-width: 55ch or max-width: 60rem depending on the layout to maintain readable line length with your 1.3rem body text.
• Gutters & gaps: prefer gap for grid/stack spacing (rem tokens) rather than fixed pixel margins — gap scales with root font-size and respects zoom.
• Zoom & accessibility testing: test layouts at 150% and 200% browser zoom and with larger root font sizes — rem tokens will preserve proportions and spacing.

Keep motion subtle and brief (150–250ms). Use motion for affordance only (e.g., menu open, card hover). Provide a “Reduce motion” preference respect: if prefers-reduced-motion is set, remove parallax and reduce animation to fades only.

• Imagery style: documentary / collaborative photos, mixed-media collages, candid shots of residents and shared spaces. Avoid exploitative or sensationalized images. When using portraits, request explicit consent for web use.
• Alt text guidance: describe content and context (e.g., “Image: two artists collaborating on mural in a living room studio”). For decorative images, use empty alt alt="".
• Iconography: geometric, simple line icons that scale well. Keep icon hit targets >= 44px.

• All pages: semantic HTML headings, landmarks (header, main, footer, nav).
• Contrast: ensure body text meets at least WCAG AA (4.5:1) — use --color-dark-gray on --color-off-white as the default.
• Keyboard focus: visible focus ring on all interactive items.
• Forms: labels + helper text + ARIA error messages.
• Media: captions/transcripts for videos; descriptive alt text for images.
• Language: explicit inclusive language and an approachable tone; provide pronoun field on contribution/contact forms (opt-in).
• Safer Spaces content: link to policy and display prominent contact info for reporting concerns.

Structure

• Left: Logo Link (SVG) — alt "Sentient Meat", aria-label="Home"
• Center / Right: Primary nav links
• Right-most: Utility actions (Login)

Behavior

• Desktop: horizontal nav, visible focus states for all links.
• Tablet → Mobile: hamburger button opens an accessible slide-over (role=dialog) with a focus trap. Close on Escape and return focus to the toggle.
• Add “Skip to content” as the first focusable item in the header.

States & styling

• Link default: color var(--color-link); visited var(--color-link-visited); hover/focus var(--color-link-hover) + underline on hover.
• Active link: include aria-current="page" and a visual indicator (small underline or bold).
• Mobile hamburger: visible label aria-expanded="false|true". Provide a 44–48px hit target.

Accessibility

• All links keyboard-focusable; visible focus ring uses --color-link-hover
• Hamburger dialog must trap focus and include a close button with aria-label="Close menu"

Component Samples

Buttons communicate actions. Use primary for the highest-priority actions (Apply / Donate), secondary for less-prominent actions, and ghost/text for inline links.

Inline links

Text only, underline on hover. Use var(--color-link); ensure 1rem minimum hit target with padding.

Link text

Default button

Structure

• Labels above inputs (required). Use for attribute and matching id.
• Helper text below input for instructions; error text replaces or appears below helper text in case of validation error.

Input states

• Focus: border 2px solid var(--color-link) (or --color-link-hover), shadow for emphasis.
• Error: border 2px solid var(--color-error) and aria-invalid="true", inline error message with role="alert" and aria-live="polite".
• Success: border 2px solid var(--color-success), optional success text.

Checkboxes / Radios

Group with <fieldset> and <legend>; provide keyboard focus states and ensure 44px tap targets.

Validation patterns

Validate on blur; provide helpful microcopy on what's expected (ex: file upload size, supported formats). Error messages should describe the problem and the next step.

Accessibility

Associate all fields with labels; use aria-describedby for helper text references; error messages must be programmatically associated and announced (aria-live).

Search

Use single-line search input with role="search", placeholder text Search events, artists, & workshops and accessible label (aria-label when necessary).

Labels above inputs (required). Use for attribute and matching id.

• Structure: H1 (2.2rem, Ovo), lead paragraph (1.3rem), Primary CTA, Secondary CTA, supporting image or art.
• Visual: place content; overlay gradient for drama. Always ensure the H1 and paragraph meet contrast with overlay.
• Behavior: hero media must include alt text or transcript if it’s video.

• Layout: Half width on desktop. Title (H4 1.7rem), short description (1.3rem), optional meta (date, est. 2014), entire card is button.
• Hover: H4: border-bottom: 3px solid var(--color-cornflower);
• Focus: outer-glow: 0 0 8px 3px var(--color-cornflower); keyboard users same affordance.

• Content: outline logo, EIN, nav links, social icons with aria-label.
• Visual: background of var(--color-teal) overlaid with gradient radial-gradient(135deg, var(--color-green 22%), var(--color-dark-purple 72%)) with small --color-teal accents. Text uses var(--color-off-white) and readable sizes (≥1rem).
• Accessibility: links and social icons must have accessible names (e.g., aria-label="Instagram — Sentient Meat"). Don’t use tiny text—minimum 1rem.