SwayReports

SwayBeta.ai Brand Guide

Last updated: February 2026

1. Brand Overview

Full name: SwayBeta.ai Short name: Sway Legal entity: Disagree Wisely, Inc. (Florida nonprofit corporation) Tagline: Funded by grants. Developed with Heterodox Academy. Mission: An AI-scaffolded chat platform to promote constructive disagreement and openness to opposing viewpoints on college campuses.

2. Logo

2.1 Logo Mark (Icon)

The Sway logo mark is a speech bubble containing a graduation cap icon, rendered in a clean, geometric line style. The speech bubble communicates dialogue and conversation; the graduation cap signals education and academic context.

Shape: Rounded speech bubble with a pointed tail at the bottom-left
Outline/stroke: Dark charcoal (~#4A4A4A) thick border around the speech bubble
Fill: Light blue (~#B8D8E8) interior of the speech bubble
Graduation cap icon: Dark charcoal (~#4A4A4A) line-art, centered inside the bubble
Style: Flat, modern, minimal — no gradients, shadows, or 3D effects on the icon itself

2.2 Logo with Wordmark

The full logo places the icon above the wordmark “SwayBeta.ai” set in a bold, dark sans-serif typeface (visually consistent with the bold weight of Roboto or a similar geometric sans-serif). The text color matches the dark charcoal of the icon outline.

Case: “SwayBeta.ai” — camelCase with capital S and B
Weight: Bold / 700

2.3 Logo Usage

Variant	Use case
Icon only	Favicons, app icons, compact spaces
Icon + wordmark (stacked)	Primary brand mark, presentations, headers

2.4 Clear Space

Maintain a minimum clear space around the logo equal to the height of the graduation cap icon on all sides.

2.5 Logo Don’ts

Do not rotate or skew the logo
Do not change the relative proportions of icon and wordmark
Do not place the logo on busy backgrounds without sufficient contrast
Do not recolor the graduation cap independently of the speech bubble outline

3. Color Palette

Sway uses a dual-theme system with dark mode as the default and light mode as an alternative. Colors are implemented as CSS custom properties for consistency.

3.1 Primary Colors

Role	Dark Mode	Light Mode	CSS Variable
Primary	`#8a8aff` (Periwinkle)	`#23004D` (Deep Purple)	`--primary-color`
Link	`#a3a3ff` (Light Periwinkle)	`#23004D` (Deep Purple)	`--link-color`

Primary — Dark mode #8a8aff: A vibrant, soft periwinkle blue-violet. Used for headings, active states, interactive elements, accent borders, and data visualizations.

Primary — Light mode #23004D: A deep, authoritative purple. Used in the same roles as the dark-mode primary but provides high contrast against light backgrounds.

3.2 Background Colors

Role	Dark Mode	Light Mode	CSS Variable
Page background	`#000000` (Pure Black)	`#f5f7fa` (Cool Gray)	`--bg-color`
Card background	`#000000`	`#ffffff` (White)	`--card-bg`
Card header	`#0f0f1d` (Deep Navy)	`#f0f5fc` (Ice Blue)	`--card-header-bg`
Input background	`#252538` (Dark Slate)	`#ffffff`	`--input-bg`
Quote background	`#0a0a15` / `#0d0d14`	`#f8f9fb` / `#f8f7f5`	`--quote-bg`

3.3 Text Colors

Role	Dark Mode	Light Mode	CSS Variable
Primary text	`#ffffff` (White)	`#2c3e50` (Dark Slate)	`--text-color`
Muted text	`#a9adc1` (Cool Gray)	`#5a6a7e` (Slate Gray)	`--muted-text-color`
Footer text	`#999999`	`#999999`	—

3.4 UI Element Colors

Role	Dark Mode	Light Mode	CSS Variable
Border	`#1f1f2d` (Dark Navy)	`#d1d9e6` (Silver)	`--border-color`
Button background	`#391960` (Deep Purple)	`#eef2f7` (Light Gray)	`--button-bg`
Button hover	`#3a3a59` (Muted Violet)	`#d9e2ec` (Medium Gray)	`--button-hover-bg`
Highlight	`rgba(138, 138, 255, 0.1)`	`rgba(35, 0, 77, 0.05)`	`--highlight-bg`
Category pill (inactive)	`#141422` (Near Black)	`#eef2f7` (Light Gray)	`--category-pill-bg`
Category pill (active)	`#8a8aff`	`#23004D`	`--category-pill-active-bg`

3.5 Accent Colors (Testimonials Page)

Role	Dark Mode	Light Mode
Accent warm	`#ff9d6a` (Soft Orange)	`#d4723c` (Burnt Orange)
Accent cool	`#6ae4ff` (Sky Blue)	`#2d8a9e` (Teal)

3.6 Status & Data Colors

Color	Hex	Usage
Green (Success)	`#28a745`	Available badges, positive indicators
Blue (Active)	`#007bff`	Active state badges
Gray (Completed)	`#6c757d`	Completed/neutral badges
Red (Negative)	`#dc3545`	Negative indicators
Orange (CTA)	`#ff7200`	Special action buttons
Purple (Hover)	`#380080`	Light-mode button hover state

3.7 Gradients

Usage	Value
Bar chart accent	`linear-gradient(180deg, #a9a9ff 0%, #8a8aff 100%)`
Feature tile background	`linear-gradient(135deg, var(--primary-glow) 0%, transparent 100%)`
Card background (featured)	`linear-gradient(135deg, var(--card-bg) 0%, var(--quote-bg) 100%)`
Scroll fade indicator	`linear-gradient(to right, transparent, var(--bg-color) 30%)`

4. Typography

4.1 Font Families

Role	Font	Fallback Stack	Source
Headings / Display	Roboto Mono	`monospace`	Google Fonts
Body / UI	Roboto	`-apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif`	Google Fonts
Dashboard / Stats	Segoe UI	`Roboto, "Helvetica Neue", Arial, sans-serif`	System
Decorative quotes	Georgia	`serif`	System

Google Fonts import:

https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&family=Roboto:wght@400;500;700&display=swap

4.2 Type Scale

Element	Font	Size	Weight	Additional
Page title (h1)	Roboto Mono	30pt (~40px)	700	`letter-spacing: 0.01em`
Index page title	Roboto Mono	45px	700	`letter-spacing: 0.01em`
Section title	Roboto Mono	`clamp(1.6rem, 3vw, 2rem)` or 1.8rem	700	Often `text-transform: lowercase`
Card header	Roboto	1.2rem–1.4rem	500–600	—
Body text	Roboto	12pt (~16px) or 1rem	400	`line-height: 1.6–1.7`
Muted / secondary text	Roboto	0.9rem	400	—
Section label	Roboto	0.75rem	600	`text-transform: uppercase; letter-spacing: 0.25em`
Stat numbers	Roboto Mono	2.5rem	700	`line-height: 1`
Category pill	Roboto	0.92rem	500	`white-space: nowrap`
Quote text	Roboto	1.05rem–1.25rem	400 italic	`line-height: 1.7`
Footer	Roboto	9pt	300	Color: `#999999`

4.3 Typographic Conventions

Page titles are rendered in lowercase (e.g., “news & recognition”, “instructor testimonials”)
Section headings use text-transform: lowercase for a clean, modern look
Section labels (small category markers) use text-transform: uppercase with wide letter spacing
Monospaced headings (Roboto Mono) create a technical, data-informed aesthetic that contrasts with the humanist body font (Roboto)

5. Spacing & Layout

5.1 Container

Max width: 1200px, centered
Horizontal padding: 2rem (32px when embedded)
Safe-area support: padding-left: max(1rem, env(safe-area-inset-left))

5.2 Cards

Border radius: 10px–16px (10px for dashboard cards, 12px for content cards, 16px for testimonial quote cards)
Box shadow (dark): 0 4px 15px rgba(0,0,0,0.15–0.2)
Box shadow (light): 0 2px 8px rgba(0,0,0,0.08)
Card padding: 1.5rem–2rem
Card gap in grids: 1.5rem

5.3 Pills & Buttons

Border radius: 50px (fully rounded)
Pill padding: 0.6rem 1.3rem
CTA button padding: 1rem 2rem
Badge border radius: 50px

5.4 Quote Blocks

Left border: 4px solid primary color
Border radius: 0 8px 8px 0 (right side only) or 0 12px 12px 0
Decorative open-quote character: Georgia serif, font-size: 3–4rem, primary color, opacity: 0.2

6. Interaction & Motion

6.1 Transitions

Default easing: ease, 0.2s–0.3s duration
Color transitions: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease
Hover transforms: translateY(-2px) on pills, buttons, and back-to-top
Theme toggle: scale(1.1) on hover

6.2 Scroll Animations

Cards and featured items use intersection observer-triggered fade-in:

Initial state: opacity: 0; transform: translateY(20px)
Visible state: opacity: 1; transform: translateY(0)
Transition: opacity 0.6s ease, transform 0.6s ease

6.3 Hover States

Cards: Border color transitions to --primary-color
Light mode cards: Elevated box shadow on hover
Active pills/nav items: Background fills with primary color, white text
Nav pill active glow: box-shadow: 0 3px 8px rgba(138, 138, 255, 0.3) (dark) / rgba(35, 0, 77, 0.3) (light)

7. Iconography

Icon library: Font Awesome 5.15.3 (some pages use 6.4.2)
Style: Solid (fas) is the default; used for navigation, badges, and UI elements
Common icons:
- fa-sun / fa-moon — Theme toggle
- fa-chevron-up — Back to top
- fa-search — Search
- fa-award, fa-trophy — Awards
- fa-hand-holding-usd — Grants
- fa-chart-bar — Statistics
- fa-quote-left — Testimonials
- fa-envelope, fa-external-link-alt — Contact / links

8. Theme System

Sway defaults to dark mode (<html class="dark-mode">). Users can toggle to light mode via a fixed circular button in the bottom-right corner. Theme preference is stored in localStorage.

8.1 Dark Mode (Default)

Pure black background with periwinkle (#8a8aff) accents. High-contrast white text. Deep navy-tinted surface colors for cards and headers. This is the primary, flagship appearance.

8.2 Light Mode

Cool gray background (#f5f7fa) with deep purple (#23004D) accents. Dark slate text (#2c3e50). White card surfaces with subtle blue-tinted headers. Softer shadows and reduced contrast for daytime reading.

8.3 CSS Implementation

All theme colors are defined as CSS custom properties on :root (dark) and html.light-mode, enabling instant theme switching without page reload:

:root {
  --bg-color: #000000;
  --primary-color: #8a8aff;
  --text-color: #ffffff;
  /* ... */
}

html.light-mode {
  --bg-color: #f5f7fa;
  --primary-color: #23004D;
  --text-color: #2c3e50;
  /* ... */
}

9. Component Patterns

Horizontally scrolling pill bar, sticky at top. Rounded capsule shape (border-radius: 50px). Active state fills with primary color. Centered when content fits, left-aligned and scrollable when overflowing.

9.2 Quote Cards

Two-column grid. 16px border radius. Decorative large open-quote mark (Georgia, 4rem, primary color at 20% opacity). Attribution with strong name and muted role/institution.

9.3 Featured Highlights Grid

4-column grid (responsive to 2-column, then 1-column). 3px solid primary-color top accent bar. Uppercase label with emoji prefix. Subtle gradient background.

9.4 News Items

Full-width cards with title, source (italic, muted), and body text. Entire card clickable (opens link in new tab). Hover border highlights in primary color.

9.5 Stat Displays

Roboto Mono numbers in primary color at 2.5rem. Muted label below. Centered in flexible rows.

9.6 Search

Inline search input with rounded border matching primary color. Search icon prefix. Clear button appears on input. Search highlighting with semi-transparent primary-color background.

10. Framework & Dependencies

Dependency	Version	Purpose
Bootstrap (Bootswatch Darkly/Flatly)	4.5.2	Base CSS framework and theme
Font Awesome	5.15.3 / 6.4.2	Icons
Google Fonts (Roboto, Roboto Mono)	—	Typography
Masonry Layout	4.x	Grid layouts (student feedback)
imagesLoaded	5.x	Image loading detection

11. Voice & Tone

Based on the website content, Sway’s brand voice is:

Academic but accessible: Grounded in research and pedagogy, but written for a broad higher-ed audience
Confident and evidence-based: Leads with data, endorsements, and concrete outcomes
Mission-driven: Centers constructive disagreement, open inquiry, and student empowerment
Lowercase aesthetic: Page titles and section headings use lowercase for a modern, approachable, non-hierarchical feel

12. Quick Reference — Key Hex Values

Dark Mode Primary:     #8a8aff   (Periwinkle)
Light Mode Primary:    #23004D   (Deep Purple)
Dark Background:       #000000   (Pure Black)
Light Background:      #f5f7fa   (Cool Gray)
Dark Text:             #ffffff
Light Text:            #2c3e50
Dark Muted:            #a9adc1
Light Muted:           #5a6a7e
Dark Button:           #391960
Dark Card Header:      #0f0f1d
Light Card Header:     #f0f5fc
Link (dark):           #a3a3ff
Accent Warm:           #ff9d6a / #d4723c
Accent Cool:           #6ae4ff / #2d8a9e
CTA Orange:            #ff7200
Logo Outline:          ~#4A4A4A  (Dark Charcoal)
Logo Fill:             ~#B8D8E8  (Light Blue)