Scarlet Sync Design System · reference v0.3

Canonical components and migration guidance

Use the shared primitives first. This catalog distinguishes production-ready components from legacy patterns and exploratory compositions.

Canonical controls Migration status

Product principles

The rules that should survive changing layouts, visual trends, and feature-specific color families.

01 · Direction

Decision first

Put the information needed to choose—availability, conflicts, provenance, and the next action—inside the primary surface.

Calm by default

Use color to communicate identity or state. Keep structural surfaces neutral so dense academic data remains scannable.

Progressive depth

Start with a compact summary, then reveal detail through expansion, a side panel, or a dedicated workspace.

Preserve context

Semester, section IDs, saved-list membership, filters, and handoff destinations must survive navigation and retries.

Evidence is UI

Label live versus cached data, identify its source, and show when it was retrieved whenever freshness affects a decision.

Accessible equivalence

Every pointer interaction needs a keyboard path, visible focus, semantic label, and reduced-motion equivalent.

Calm sensory feedback

Cuelume synthesizes sound through Web Audio; supported devices add a restrained vibration pattern. Both are user-controlled and meaningful actions only by default.

No audio assets · graceful fallback · reduced-motion aware

Interaction feedback

Browsers require a user gesture before audio. Vibration is unavailable on many desktop and iOS browsers, so haptics safely become a no-op there.

Tokens and visual grammar

Use semantic names in shared recipes. Raw values belong at the token boundary, not repeated across feature pages.

02 · Foundations

Brand

Identity and primary product actions

Scarlet 600#CC0033

Primary action, active brand mark

Scarlet 700#A00D25

Primary hover and pressed states

Scarlet 050#FFF1F3

Brand-tinted soft surface

Neutral

Structure, typography, and quiet hierarchy

Slate 950#020617

Dark canvas and strongest text

Slate 700#334155

Supporting text and icons

Slate 200#E2E8F0

Borders and separators

Slate 050#F8FAFC

Grouped page background

White#FFFFFF

Primary light surface

Semantic

State communication, always paired with text or icon

Success#059669

Open, completed, connected

Warning#D97706

Attention, partial, stale

Danger#E11D48

Closed, error, destructive

Information#0284C7

Help, live data, neutral notice

Assistant#7C3AED

AI-generated or assisted action

Transient overlays

Modal, sheet, popover, context, command, and transient map material only

Overlay surfacevar(--ss-overlay-surface)

Canonical opaque transient panel fill

Overlay bordervar(--ss-overlay-border)

Transient panel edge

Overlay scrimvar(--ss-overlay-scrim)

Modal backdrop only

Overlay blurvar(--ss-overlay-blur)

One bounded blur role; zero in the canonical and reduced-transparency policy

Type scale

System font for UI, monospace only for canonical IDs, indexes, and code.

Display

Academic planning, in sync.

36–48 / 1.05 / 600

Page title

Course discovery

24–30 / 1.25 / 600

Section title

Saved course lists

24 / 1.25 / 600

Card title

Data Structures

16 / 1.4 / 600

Body

Compare sections, instructors, and meeting times.

14 / 1.7 / 400

Label

LIVE AVAILABILITY

11 / 1.3 / 700

Data

01:198:112 · index 07291

12 / 1.5 / 500 mono

Spacing

space-14 pxTight icon and inline gaps

space-28 pxControl internals and badge gaps

space-312 pxCompact row padding

space-416 pxDefault card padding

space-520 pxComfortable panel padding

space-624 pxSection card padding

space-832 pxMajor internal separation

space-1248 pxPage-section rhythm

Shape

Control10 px

Inputs, buttons, segmented items

Card16 px

Rows, cards, compact panels

Feature24 px

Hero and large workspace panels

Pill999 px

Badges, chips, avatars; never dense cards

Elevation

Level 0none

Inset and table surfaces

Level 1shadow 1

Default cards

Level 2shadow 2

Floating controls and sticky chrome

Level 3shadow 3

Dialogs, launchers, preview panes

Actions, controls, and selection

Controls share a minimum height, focus treatment, semantic intent, and plain-language label. Icon-only actions require an accessible name and tooltip.

03 · Inputs

Button intents

Canonical

Primary

One highest-priority action per region

Secondary

Important action without brand dominance

Quiet

Low-emphasis utility inside a surface

Danger

Destructive action after clear intent

AI assist

Action explicitly powered by the assistant

Field anatomy

Canonical

Search courses

Course code, title, instructor, or keyword

Semester

The active term stays visible when filters change.

Filter chips

Card taxonomy and data density

Cards are defined by purpose and anatomy—not by feature color. Domain-specific content fills stable slots.

04 · Surfaces

Surface styles beyond rounded boxes

Editorial edge

Sharp and directional

Use a square surface and accent rule for dense summaries.

Open row

Structure without a box

Dividers can group content without creating another container.

Split tile

Visual anchor

Good for places and utilities.

Graphic block

High emphasis

Reserve for calls to action and orientation.

Summary card

Comfortable

Anatomy

eyebrowprimary valuecontextoptional trend

Dashboard and overview metrics

Avoid: More than one primary action

Entity card

Comfortable

Anatomy

identitystatusmetadataprimary action

Courses, programs, people, places

Avoid: Duplicating the same identifier in every field

Decision card

Rich

Anatomy

identitytradeoffsprovenanceselect/compare

Search results and generated schedules

Avoid: Hiding availability or conflicts behind another click

Utility row

Compact

Anatomy

leading icontitle + detailtrailing action

Events, notifications, list management

Avoid: Card-on-card nesting

Workspace panel

Variable

Anatomy

panel headertoolsscroll regionfooter action

Scheduling, maps, assistant canvas

Avoid: Page-level padding inside every nested region

Empty-state panel

Comfortable

Anatomy

state iconplain-language reasonrecovery action

No results, no saved data, permission gates

Avoid: Generic “nothing here” copy

Shared entity-card reference

Canonical

01:198:112

Data Structures

4 credits · Busch · Fall 2026

Open sections

A compact named-entity summary with explicit term context, availability, and one route-owned action.

Decision-card reference

Experimental

Identity, availability, comparison facts, provenance, and action in one bounded surface.

Recommended anatomy

Fall 2026 · 4 credits

1 of 6 open

01:198:112 · Data Structures

Computer Science core · prerequisite satisfied

Section: 07291
Meeting: MW 2:15–3:35
Location: HLL 252 · Busch
Instructor: A. Miranda · 4.6

liveSource: Schedule of ClassesRetrieved 2 min ago

Every asynchronous state

A complete component is not only its happy path. Loading, empty, stale, error, permission, success, disabled, and partial states belong in the design contract.

05 · Feedback

Canonical

Loading Fall 2026 sections

Name the object and preserve the page skeleton.

Empty

No sections match these filters

Explain which constraints produced the state.

Error

Section availability could not refresh

Preserve the last trustworthy result and its timestamp.

Success

Added to Data Science options

Confirm the object and destination, not only “Success”.

Permission

Sign in to save this course list

Keep the intended destination through authentication.

Stale data

Availability last checked 18 minutes ago

State source and freshness when a decision may have changed.

Inline notices preserve momentum

Use banners or field-level messages for recoverable outcomes. Reserve dialogs for decisions that need explicit confirmation.

Confirmation names the result

“Section 07291 added to Fall 2026” is actionable. “Success” forces the student to reconstruct what changed.

Navigation and workspace structure

Choose a navigation pattern based on the scope of state it changes. Avoid using tabs, segmented controls, and filter chips interchangeably.

06 · Wayfinding

Application shell

Owns global app switching, account, theme, one semantic neutral canvas, and typed route layout metadata; specialized canvas composition remains route-owned.

Page tabs

Switch sibling views without changing the core entity; reflect durable state in the URL.

Segmented control

Switch a local presentation mode. Keep to two or three mutually exclusive choices.

Breadcrumb / back

Preserve origin and search state when entering entity detail from Explorer or a saved list.

Bottom command dock

Global search and assistant handoffs—not a duplicate set of every page action.

State ownership hierarchy

The URL owns shareable state; app context owns cross-route preferences; component state owns temporary presentation.

URL / route

App context

Feature state

Component state

Academic and utility patterns

Scarlet Sync has domain objects that generic UI kits do not understand. These patterns standardize what must remain visible across handoffs.

07 · Product language

Course identity

Canonical course code + title
Credits and subject
Semester context
Section index only when section-specific
Link to canonical course profile

Program and requirement

Degree/program name
School and credential
Credit progress
Requirement status
Overlap and prerequisite context

Location and mobility

Campus + human place name
Walking/arrival context
Map action
Transit or permit constraints
Live/cached data source

Assistant contribution

Generated/suggested label
Inputs and assumptions
Tool progress or approval
Undo/revert path
Committed versus proposed state

Icon vocabulary

Heroicons outline is the default. Use a filled icon only for a selected state or compact emphasis.

20–24 px default

Scheduling

Plans, semesters, and time

Degree

Programs and requirements

Transit

Routes and arrivals

Location

Places, rooms, and parking

Conversation

Assistant and class chat

People

Friends, instructors, groups

Alert

Snipes and notifications

Course

Catalog and saved lists

Route families

Feature color lives at the route-family level. Component semantics remain stable so an error still reads as an error on every canvas.

08 · Expression

Core and public

Product home, maintained references, support, and public utility surfaces.

//help /support /admin /apply /developers /design-system /contact /privacy-policy /tos /sirs

Neutral catalog

Quiet, solid academic reading and comparison surfaces.

/explore /courses /professors /course-list

Scheduling tools

A restrained violet rail identifies dense section controls and timetable decisions.

/scheduling /finals /course-lists /course-sniper /classes-by-time /classes-on-map

Academic planning

A restrained emerald rail identifies requirements and plan actions.

/planning /degree-planning /degree-search /prerequisite-checker /gpa-calculator

Campus life

A restrained amber rail identifies feeds, campus services, and outreach.

/events /dining /parking /research-opportunities /research-outreach /resources /cold-email

Campus utilities

A restrained sky rail identifies maps, live status, and utility data.

/campus /map /parking-map /bus-tracker /room-availability /info-rutgers

Assistant workspace

Dedicated full-height workspaces with solid decision panels.

/ai-assistant /ontology

Account and community

A restrained rose rail identifies personal data, connections, and community context.

/profile /friends /class-chat

Authentication and callbacks

Focused entry and callback routes that intentionally suppress product chrome.

/login /onboarding /forgot-password /reset-password /auth /oauth/authorize /oauth/google-callback

Page and component coverage

Coverage status describes system alignment, not product quality. Specialized workspaces can be aligned while intentionally looking different.

09 · Audit

PageFamilyElementsStatus

Dashboard

Core shell

summary chipswidget panelsshortcut gridedit mode

Mixed

Scheduling

builder paneltimetablecourse cardspreferencesgenerated options

Specialized

Explore / Courses

Catalog

search toolbarfacetsentity cardswiki articleprovenance

Aligned

Course utilities

Scheduling

saved listssniper rowstime filtersmap markershandoffs

Mixed

Degree planning

Planning

progress summarysemester canvasrequirement cardsassistant actions

Specialized

Events / Dining

Campus life

source tabsfiltersfeed rowsmenu cardsinfinite states

Mixed

Campus utilities

Utility

map canvasmap handoff tilelive statusselectorsavailability stripsdetail panels

Mixed

Ask Scarlet Sync

Assistant

conversation railmessage cardstool statesartifact canvascomposer

Specialized

Profile / Friends

Account

tab shellprivacy staterequest rowsshared schedules

Mixed

Auth / Onboarding

Auth

form cardvalidationprogressrecovery stateredirect handoff

Legacy

Accessibility, interaction, and content

These are release criteria for shared primitives—not optional polish applied after visual approval.

10 · Quality

Interaction checklist

Use a visible :focus-visible ring with at least 2 px perceived thickness and sufficient contrast.
Keep mobile command targets at least 48 × 48 px; compact desktop table actions may return to 36 px with row context.
Do not encode availability, campus, degree status, or conflicts through color alone.
Associate every field with a visible label; use help and error text with aria-describedby.
Announce asynchronous success and error changes through an appropriate live region.
Dialogs and sheets must expose a programmatic name, set initial focus, trap focus, close on Escape or an allowed direct overlay click, restore focus, lock page scrolling, and contain nested scrolling.
Reduced transparency keeps the same overlay anatomy with an opaque surface and no blur; reduced motion never delays focus, portal, Escape, or scroll-lock behavior.
Respect reduced motion for animated backgrounds, dock transitions, shimmer, and canvas movement.
Preserve readable zoom and reflow at 200%; avoid horizontal page scrolling outside purpose-built data canvases.

Content conventions

Actions

Start with a verb: “Save schedule”, “Compare sections”, “Clear filters”.

Errors

Say what failed, what remains safe, and how to recover.

Empty states

Name the absent object and the active constraint that caused it.

Academic IDs

Pair the canonical ID with a human title; distinguish course codes from section indexes.

Freshness

Use source + retrieved time + live/cached label when data can change.

Label generated content and distinguish a suggestion from a committed change.

Privacy

Name the audience explicitly: private, accepted friends, or public.

Shared component contracts

The target is not one giant component library. It is a small reliable core with domain composition layered on top.

11 · Engineering

Interactive platform examples

Canonical

Real controls and content patterns—not only an API inventory.

Reusable across workflows

Course collection toolbar

Search, filter, change density, and create.

01:198:112 · Data Structures

OPEN

4 credits · Busch · MW 2:15 PM · prerequisite satisfied

01:640:250 · Introductory Linear Algebra

WAITLIST

3 credits · Livingston · TTh 10:20 AM · 2 alternatives

Updated

Status feedback

Interactive examples are ready.

Degree complete

76%

+12 credits

Hill Center

Busch · 6 min walk · 3 rooms open

Primitive	Owns	Variants	Current	Target
Generated assistant panel	bounded typed composition, evidence, fallback, local filtering/checklists	metric · comparison · checklist · invalid	app/ai-assistant/workspace/AssistantGeneratedPanel.tsx	Experimental model-composed presentation; no record mutations
Button / IconButton	size, intent, disabled/loading, focus, accessible icon label	primary · secondary · quiet · danger · AI	app/Components/Button.tsx	Shared primitive; legacy variants remain compatible
Surface / PageOrientation	radius, border, elevation, padding, route orientation	inset · card · floating	app/Components/OperationalPage.tsx + --ss tokens	Shared operational foundation
Status	semantic tone, icon, text label	neutral · positive · warning · critical · information	OperationalStatus / Status	Universal semantic state vocabulary
Field	label, help, error, disabled, focus	text · search · select · textarea	app/Components/Field.tsx	Canonical shared field shell; compatibility adapter removed
EntityCard	identity, metadata, status, actions	course · program · person · location	Feature-specific cards	Shared anatomy, domain slots
DataState	loading, empty, error, stale, partial, retry	inline · panel · page	OperationalState / DataState	Shared state contract
Modal / Sheet	focus trap, escape, initial/restored focus, scroll lock, title, semantic transient material	dialog · alertdialog · bottom sheet · right sheet	app/Components/Modal.tsx + app/Components/Sheet.tsx	Canonical accessible overlay shells
Context menu / Mobile filter sheet	position or dock clearance, keyboard entry, dismissal, restored focus, semantic transient material	pointer menu · mobile bottom menu · route filter sheet	app/Components/ContextMenu.tsx + app/Components/MobileFilterSheet.tsx	Canonical task-local transient shells
Search / Assistant overlays	command or conversation continuity, focus containment/restoration, nested scrolling, semantic transient material	populated · empty · loading · error · narrow	app/Components/UniversalSearch/SearchDialog.tsx + app/Components/Assistant/AssistantModal.tsx	Canonical service-backed transient workspaces
Specialized decision overlays	approval safety, schedule diagnosis, anchored tour steps, research-detail inspection, canonical transient lifecycle	alertdialog · diagnostic dialog · anchored tour · responsive detail dialog	ToolApprovalModal + NoScheduleModal + OnboardingTour + AccessibleResearchDialog	Canonical material with feature-owned content and dismissal policy
Contextual help	hover/focus/tap access, viewport placement, Escape/outside dismissal, text description	short · long · viewport edge	app/Components/InfoTooltip.tsx	Canonical supplemental help; primary facts and warnings remain visible
Provenance	source, retrieved time, freshness, kind	live · cached · generated · checked-in · user-provided	OperationalSource / Provenance	Shared data-footnote

Recipe ownership

Types define allowed choices. Recipe objects map choices to complete class strings. Components own semantics and behavior. Pages compose them without redefining their states.

type ButtonIntent = 'primary' | 'secondary' | 'quiet' | 'danger' | 'ai';const buttonRecipes: Record<ButtonIntent, string> = { ... };<Button intent="primary" loading={isSaving}>Save schedule</Button>

Definition of done

Typed variants and stable public props
Light, dark, mobile, and reduced-motion behavior
Loading, empty, error, disabled, and long-content states
Keyboard path, visible focus, semantics, and announcements
Screenshot examples and owning spec updated

Components for the routes students use

Reference compositions for scheduling, degree search, maps, events, room availability, and dining. Each example keeps the decision, state, provenance, and next action together.

12 · Product workflows

Scheduling

Experimental

Course selection + weekly canvas

Open route

Weekly schedule

Schedule 1 of 7 · 19 credits

Mon

Data Structures11:30 AM

Tue

Robotics3:50 PM

Wed

Data Structures11:30 AM

Thu

Robotics3:50 PM

Fri

Data Structures11:30 AM

Degree search

Experimental

Program fit + requirement progress

Open route

Maps

Experimental

Map controls + location inspector

Open route

Lot 54 · Busch

Available now · commuter

42 spaces

Events

Experimental

Date-led event rows

Open route

Room availability

Experimental

Room status + occupancy timeline

Open route

Dining

Experimental

Photo-led hall + concise menu cards

Open route

Livingston

Dinner · 78 items

Adopt without a rewrite

Standardize the shared vocabulary first, then migrate coherent workflows. Do not halt product work for a single all-at-once component rewrite.

13 · Roadmap

Now

Name the system

Typed catalog and usage rules
Canonical intents and state language
Card anatomy and density definitions

New work has a shared vocabulary.

Button and icon button
Surface and badge
Field adoption and data state
Dialog and provenance

Repeated class strings begin disappearing.

Then

Migrate by workflow

Course utilities
Dashboard and profile
Campus feeds and utilities
Auth and onboarding

Whole journeys become internally consistent.

Ongoing

Verify the contract

Visual regression states
Keyboard and screen-reader checks
Dark mode and responsive matrices
Decision-density review

Consistency remains measurable.

Hero and top-section patterns

A top section should orient the student with context, state, and a useful next action. These patterns offer different levels of personality without becoming empty decoration.

14 · Orientation

Editorial masthead

Build a schedule that fits your life.

Lead with purpose, one useful fact, and one next action.

Operational brief

Tuesday · Fall 2026

Good morning, Akash.

2:15 PM

Next class

Open snipes

76%

Degree

Context bar

Classes on Map

Fall 2026TuesdayNow

14 active classes · data refreshed 1 min ago

Progress orientation

18 credits until graduation

Two core requirements and one capstone remain in the current plan.