Brand / Cosmic Ink

Paper. Ink.
Room to think.

The visual reference for this site. These specimens use the same styles as the pages you read.

Read design.md →

Identity and reading layouts approved / 25 October 2026

Martian Mono font license

Warm paper. Clear signals.

Keep the reading surface quiet. Blue leads the eye; violet and red appear sparingly. Texture and cosmic detail belong in the artwork.

  • Paper#f3f0e9
  • Ink#171722
  • Muted#565363
  • Line#ccc7c0
  • Blue#3455db
  • Violet#7050ba
  • Red spark#bc3447

One family, different voices.

Martian Mono Variable / Self-hosted

Curiosity, made tangible.

A heading gives the idea a home.

This is the reading size: 21.25 pixels at your browser's default settings, on desktop and phone. Short lines and generous spacing make room for the next thought. Line lengths follow the text size when you zoom in or out.

Supporting text / still readable, simply quieter.

A link has a clear destination →

Familiar pieces.

A useful callout adds context without competing with the explanation.

Show worked solution

Use native disclosures for answers. The reading experience still works without JavaScript.

Two kinds of writing
LearnNotes
An ordered path through a topicA standalone idea or reflection
Previous and next lessonBack to the notes index

Images explain an idea. Body text stays selectable. Keyboard focus stays visible. Motion respects the reader's preferences.

Figures that explain a step.

Keep labels selectable and describe the change beside the figure. Time runs downward. Comparisons stack on phones, and a selected path has a written label as well as color.

  1. 1 · Read the stock

    Alice
    Sees one ticket.

    Bob
    Sees the same ticket.

  2. 2 · Make one decision

    A guarded update checks the stock as it changes it.

Before
1 ticket + 0 orders

After a committed purchase
0 tickets + 1 order

The stock change and order belong in one transaction. This figure summarizes the successful path.
Routing page: 20 | 40

Find 27.

↓ Choose one range

  • Below 20

    Skip.

  • 20 up to 40

    Follow this branch.

  • 40 and above

    Skip.

Equality routes right in this example. The middle range contains 27.

Read the complete examples in One ticket, two buyers, Finding one row, and Versions and snapshots.

The approved direction.

ImageGen concepts guide the composition. The working site uses real text and accessible controls; the revised lesson phone view sets the large-text direction.

Learning library & course overview

Approved desktop and phone layouts: simple course rows, prerequisites, and an ordered curriculum.
Learning library & course overview / Approved 25 October 2026. Illustrative content.

Lesson reader

Approved lesson layout: desktop course sidebar and contents list; phone with large reading text and collapsible navigation.
Lesson reader / Approved 25 October 2026. Illustrative content.

Standalone article

Approved blog article: a quiet text column and responsive explanatory diagram, without a course sidebar.
Standalone article / Approved 25 October 2026. Illustrative content.