Local design-system proof

Tokens, school theming, status states, and Otto AI treatment.

This page proves the visual foundation for Phase 2. It is a local review surface, not a production product workflow.

SettingsBrandingResponsiveApp shellMarketingGuide
Help

What is this page?

Design system proof

Role aware

This page proves Otto colors, typography, status tones, school theming, and AI treatment for future app surfaces.

Audience
Administrator
Current limits
The tokens are local review assets. Publishing brand assets, uploading real logos, and enforcing tenant themes are later work.

Related Otto Guide links

Review proof stylingtaskDesign-system referencereferenceBranding guide areaconceptOpen reference page placeholder

Support request boundary

Use Sev4 for design polish and Sev3 if a token causes unreadable copy. This panel does not submit a support case.

Sev1: Critical outage or data-risk emergency

Target: 1-hour response, 24/7 paging during pilot

Sev2: Major workflow blocked

Target: 4 business hours

Sev3: Standard product question or non-urgent issue

Target: 1 business day

Sev4: How-to, cosmetic, or future enhancement

Target: 2 business days

These preview controls are placeholders. Real AI answers, search, walkthroughs, and support submission come in later tickets.

Foundation

Typography

Bricolage-style headings, Figtree-style body text.

The app uses font tokens with local system fallbacks until bundled font assets are added. Body copy stays calm and readable for dense school operations.

--otto-font-display / --otto-font-body / --otto-font-mono

Otto deep navyCore brand

#0e0e26

Text contrast 18.93:1

Sidebar navyNavigation

#12132b

Text contrast 18.20:1

Otto AI tealAI accent

#00a3b4

Text contrast 5.83:1

AI text tealAccessible teal

#00616c

Text contrast 7.18:1

PageBackground

#f5f7f8

Text contrast 16.51:1

InkPrimary text

#111827

Text contrast 17.74:1

School themes

School primary actions change. Otto AI does not.

SuccessWarningDangerInfo

BPPE Career

Otto Fixture BPPE Career School

Primary actions follow the school theme. AI, status, and danger tokens stay fixed Otto product colors.

School theme
Button contrast
5.47:1
Accessible action shade
#0f766e (5.47:1)

Credit College

Otto Fixture Credit College

Primary actions follow the school theme. AI, status, and danger tokens stay fixed Otto product colors.

School theme
Button contrast
6.70:1
Accessible action shade
#1d4ed8 (6.70:1)

Controls

Buttons and fields keep stable dimensions.

AI

Draft by Otto Advisor

Staff/admin pattern

Sources
Otto can draft a plain-language next step, but a person still reviews, edits, and approves consequential work.

AI

Study with Otto

Student/help pattern

Sources
Student-facing AI remains visibly labeled and keeps the Otto teal treatment even inside a school-branded experience.

Token source notes

Color

Otto brand, school theme, status, and AI colors are separate token groups.

Accessibility

Contrast helpers test readable text, pale color adjustment, and seeded school primary colors.

AI

AI panels always keep Otto teal and an explicit AI label, no matter which school theme is active.