1. Atlas Academic
  2. Design

Atlas Academic · Design

One site, two looks

Every page is part of one information ecosystem: the same parts, the same names, the same navigation. It wears one of two looks, by the side it is on.

The two sides

Public · the college's look

For students and the public

The landing, the schools, each program's guide and map, the programs page, the faculty directory. In the college's own colours and type, from its theme.yaml, under the college's own header: its schools, programs and faculty.

Internal · Atlas Academic's look

For faculty and staff

Everything under /internal/ and /admin/: the schedule review, the curriculum map, the Playground, proposals, the catalog review. In Atlas Academic's own colours and type (core/site/atlas-theme.yaml), the same at every college, under Atlas Academic's dark bar.

Navigation

Every page gets its side's bar from the site itself (functions/_chrome.js); no page writes its own. Breadcrumbs under it say where a page sits: University, school, program. A faculty member or administrator sees their account in either bar, and a switch to the other side: Internal site → on the public side, Public site → on the internal one.

Templates

PageSideBuilt from
LandingPublica-head with actions and facts; a-grid of school cards; an a-callout for the general education; an internal-only aside
SchoolPublica-crumbs; a-head; program cards in the degree's colour (a-card a-tone); departments as chips
Student guidePublica-crumbs; a-head with the map as its first action and the credits as facts; the guide's own sections
Programs, facultyPublicgenerated; a-crumbs over their own tables and cards
Degree and school mapsEitherthe web app, in whichever side's look its build is for
WorkspaceInternala-head; a-grid of tools, each an a-card a-link
Schedule reviewInternalits own app, in Atlas Academic's look

The same sheet, in each look: the public side's on the left, Atlas Academic's below it on this page.

Type and colour

Display

The quick brown fox

Headings, the page's name, big numbers: --font-display.

Text

Body text, labels, tables and controls: --font-ui, at 15px, with the muted colour for notes.

Colours
  • accent
  • brass
  • rust
  • blue
  • violet
  • moss
  • plum

Degree colours are the college's own on both sides.

Big numbers

411sections this term
9programs
42credits of the core
1,843active students

A note under a heading says what the band is for, in a sentence or two.

A card that is a link

For a tool or a destination: the whole card goes there.

Tables, labels and buttons

DegreeMajorCoreTotal
English, BA3342120
Biology, BS3942120

An aside

For what a reader should know before they go on: the Atlas Core, a rule, a caution.