# FSO Brand & Interface Guidelines

**Fluminis Scientiae Oraculum** is the name. **FSO** is the short form. FSO is a governed knowledge organism for memory, evidence and agentic work. “Organism” describes its nature; it is not another word in the name.

FSO carries knowledge, purpose and stewardship forward through software. Its identity should express that continuity without presenting it as a human persona. [About FSO](https://flusci.org).

## Identity

| Use | Form |
|---|---|
| Organization | Fluminis Scientiae Oraculum |
| Short name | FSO |
| This application | Learning |
| Parent link | flusci.org |
| Description | A governed knowledge organism for memory, evidence and agentic work |

Use the existing seal and wordmark together where space permits. Keep the name as real text so it remains readable, selectable and accessible. A decorative emblem next to the same visible name has empty alternative text; an emblem used alone needs the name as its accessible label.

## Logo Roles

[Seal display crop](fso-seal-display.svg) · [Original artwork](fso-logo-seal-wordmark.webp)

| Asset | Use |
|---|---|
| Ceremonial seal | Large presentation, covers and identity references. Preserve its detail and proportions. |
| Interface symbol | Compact application lockups and navigation. Inspect it at its actual display size. |
| Text wordmark | EB Garamond, uppercase and letter-spaced. Use FSO or the full name; add the product label separately. |

Use the original artwork. The display crop keeps that raster artwork inside an SVG edge mask; it is not a vector reconstruction. The mask removes the outside paper ground and wordmark while keeping the emblem's interior unchanged. Do not add a rectangular backing in dark mode. Inspect the fine edge and ornaments against both themes at the intended size.

## Color and Type



Use semantic tokens from the FSO token source. Light surfaces use cream with navy interaction colors. Dark surfaces use teal-ink with gold interaction colors. Status colors describe actual status, not decoration.

| Role | Typeface |
|---|---|
| Identity and headings | EB Garamond |
| Reading, navigation and controls | Hanken Grotesk |
| Code and identifiers | JetBrains Mono |

Fonts are bundled locally. Keep body text readable before adding density. Preserve meaningful table columns; allow controlled scrolling or sensible wrapping instead of breaking ordinary words.

## One Shell Per Application

Header → Persistent Navigation + Current Task Content

Keep the header, navigation, content origin and theme control in the same positions across routes. Only the task content changes. Use persistent navigation on wide screens and an accessible drawer on narrow screens. Keep content and navigation scrolling inside their regions.

Use the same title, breadcrumb and action pattern for library, subject, lesson, reference, download and error views. Generate alternate/offline views from that renderer. A second set of templates creates a second implementation to maintain.

## Words and Labels

Use **Title Case** for named areas, navigation and page titles: **Software Design & Architecture**, **Brand Guidelines**, **AI Field Guide**. Write explanations, help and errors in sentence case. Preserve code, IDs, citations and names exactly.

State the action or fact. Prefer a short example, diagram, table or code excerpt when it teaches more clearly than a paragraph. Keep operational warnings only where they help someone decide. Internal reasoning, task history and implementation excuses do not belong in the interface.

## Interaction

| Control | Contract |
|---|---|
| Theme | Same sun/moon action, saved across the application; keyboard accessible; follows system preference before a choice. |
| Navigation | Current location is visible. Back/Forward and direct links work. Route changes move focus to the new title. |
| Drawer | Named opener, native focus handling, Escape/Close and focus restoration. |
| Form field | One label, consistent label-to-control gap, visible focus and specific feedback. |
| Local notes | Retain drafts across routes; disclose browser-local storage; provide export. |
| Error view | Keep the shared shell and provide a useful next destination. |

## Rendering and Cache

Each FSO application declares its own network contract. **Learning uses Full CSR:** all navigable content, fonts and illustrations load initially; internal hash navigation, search, notes and theme changes make no further server requests. Downloads and external links are explicit actions.

Entry HTML must revalidate. Content-addressed assets may be cached immutably and remain available across releases. A tab stays on one coherent release until refreshed. Avoid background polling, lazy route fetches and service-worker update traffic when they violate that contract.

Static snapshots preserve reading and discovery for clients without JavaScript. They use the same renderer and design tokens. Hash routes are the interactive application's canonical navigation.