Visual system v1 · internal reference ← Front page

Phosphor's daytime sibling

Pagella

The bright, friendly system for neuro-net.net and safelyspace.org. Newsprint paper, espresso ink, and one highlighter that does all the shouting.

pagella.csspagella.jsLight onlyPrefix: pg-Texture: pg-print
01 · Tokens

Paper, ink, one marker

Eleven tokens. Paper is the ground, ink does the work, red labels things, and the highlighter is the only loud color.

Paper--pg-paperThe ground. Flat, never a gradient.
Paper 2--pg-paper-2Boxes, tags, wells.
Ink--pg-inkHeadlines and hard rules.
Ink 2--pg-ink-2Body copy.
Muted--pg-mutedBylines, captions, meta.
Rule soft--pg-rule-softColumn and dotted rules.
Rubric red--pg-redKickers, drop caps, focus. Never errors.
Highlighter--pg-hlThe one loud color.
Red marker--pg-hl-redAt most once per page.
02 · Type

Four faces, four jobs

Every face has exactly one job, so a page reads like a paper even at a glance.

Blackletter
UnifrakturMaguntiaThe Gazette
Headline
Playfair DisplayCells evolve in a browser tab
Body
Source Serif 4

The textbook explains how DNA becomes protein. This one lets you write the sequence yourself, then read it back.

Label
Libre FranklinBiology · Grade 12Front page · rnamaker.safelyspace.org
03 · Highlighter

The marker is the glow

Where Phosphor glows, Pagella highlights. pagella.js sweeps each mark once as it scrolls into view. Without JavaScript, or with reduced motion, the marks are simply there.

Mark the one idea a reader should keep. Two marks in a paragraph are fine; they sweep left to right, one after the other. The red marker is for a single caveat.

<span class="pg-hl">…</span>
04 · Components

Paper parts

Flat, ruled and boxed. Depth comes from a line, never a shadow. Only things you can press get the gentle 4px corner.

Chemistry · Grade 11 NTG

Flashcards for chemistry, topic by topic

Kicker, headline, deck and byline: the story stack.

chemie.safelyspace.org

Drop caps open the lead story only, in rubric red. Body copy stays in Ink 2 with a 1.6 line height so it reads like print, not like an app.

.pg-kicker · .pg-h3 · .pg-deck · .pg-byline · .pg-drop
Open the app Secondary Read the story
FlashcardsRead-aloud5 topics
.pg-btn · .pg-btn--ink · .pg-link · .pg-switch · .pg-tag

Clippy

A boxed small ad for side projects. Title in caps, one line of copy.

More at clippy.neuro-net.net

  1. Numbered rules with roman numerals.
  2. Double border for notices.
  • SubjectBiology
  • FormatSandbox
  • CostFree
.pg-box · .pg-ad · .pg-box--double · .pg-list · .pg-facts
Section head
EditionBiology · Latin · ChemistryNo sign-up
.pg-section · .pg-dateline · .pg-rule · .pg-rule--double · .pg-quote · .pg-grid · .pg-columns
05 · Which one?

Night shift, day shift

Same family, same discipline: flat surfaces, hairline depth, one loud thing. They differ in who the page is for.

PhosphorPagella
MoodNeon, retro-futuristic, CRT terminalClean, bright, friendly newsprint
Use forInfrastructure, dashboards, dev tools, game stuffStudy apps, front pages, anything for classmates or teachers
GroundVoid #0a0e1a, dark onlyPaper #faf6ee, light only
The loud oneSignal cyan glowHighlighter yellow
MotionGlitch on hover, never loopedMarker sweeps once on scroll
CornersSquare, alwaysSquare boxes; 4px on buttons
TypeAldrich + IBM Plex MonoPlayfair + Source Serif + Libre Franklin

Front page

neuro-net.net · safelyspace.org

Pagella

Vocabula Latina

latein.neuro-net.net

Same paper + red, move next

Chemia

chemie.safelyspace.org

Same paper + red, move next

RNA Maker

rnamaker.safelyspace.org

Candidate

Wege zum Glück

philosophen.safelyspace.org

Candidate

Phosphor ref

neuro-net.net/phosphor

Phosphor
06 · Rules

Keeping it Pagella, not just beige

Do

  • Highlight the one idea worth keeping. If everything is marked, nothing is.
  • Let rules do the layout: double rule under a masthead, hairlines between columns.
  • Write like a paper: a kicker, a headline that says what happened, a deck that says why.
  • Keep body copy in the serif. Sans is only for labels, buttons and meta.
  • Ship both languages when the readers are classmates.
  • Use pg-print on front pages; keep busy tools plain.

Don't

  • Don't add drop shadows or cards that float. Paper lies flat.
  • Don't use rubric red for errors or warnings. It labels; it doesn't alarm.
  • Don't loop the marker or re-sweep on scroll back. Once is the whole effect.
  • Don't put blackletter anywhere but a masthead or a notice title.
  • Don't build a dark mode. That's Phosphor's job.

Drop it into any site

<!-- in <head> -->
<link rel="stylesheet" href="https://neuro-net.net/pagella/pagella.css?v=2">
<script src="https://neuro-net.net/pagella/pagella.js?v=2" defer></script>

<!-- then -->
<body class="pg pg-print">   <!-- pg-print = newsprint texture, optional -->
  <span class="pg-stain" style="top:40px;right:10%"></span>   <!-- a coffee ring -->
  <p class="pg-kicker">Latin · Vocabulary</p>
  <h2 class="pg-h2">Ten lessons, read aloud</h2>
  <p>Learn <span class="pg-hl">by listening</span>.</p>
</body>