§the online law student
Design system · version 0.1 · October 2026

A law library feel.
A student's voice.

The visual and editorial source of truth for law.bbbuds.com: a real-time journal of online law school and a practical library of free resources.

01 / foundation

Design principles

Academic, but not intimidating. Personal, but not casual. Useful on screen and economical to print.

Clear before clever

Visitors should immediately find a journal entry, course guide, or printable without decoding the navigation.

Evidence over hype

Separate personal experience, official requirements, and general advice. Date information that may change.

Built to last

Lightweight pages, simple components, no mandatory accounts or webfonts. A four-year archive should remain maintainable.

02 / color

Palette & tokens

A restrained palette inspired by old book cloth, library reading rooms, paper, and brass. Green is the primary action color. Burgundy is a small editorial accent.

Library green#1E4C3E · primary

Paper#F7F4ED · canvas

Ivory#FFFDF8 · surfaces

Ink#1C2925 · text

Antique brass#B68B3D · highlights

Ox-blood#713E48 · editorial accent

Color rule: actions use library green. Brass signals a milestone or note. Burgundy identifies editorial labels. Don't create a new color for each class in the website UI; class-specific colors may be used within personal planners.
03 / typography

Type scale

Georgia lends a traditional academic tone to titles. Arial keeps interfaces, long guides, forms, and small labels legible. Both are system fonts and require no downloads.

display / Georgia / 52 px
The road to 2030
heading one / Georgia / 42 px

First year, first week

heading two / Georgia / 32 px

How I plan to study

heading three / Georgia / 24 px

Contracts and case briefs

lead / Arial / 20 px

Law school at home, documented as it happens.

body / Arial / 16 px · 1.65

This site follows one student's experience at NWCU while sharing tools that other online law students may find useful. It's an independent personal project, not an official school resource.

metadata / Arial / 13 px

DECEMBER 2026 · 1L JOURNAL · 6 MIN READ

technical / monospace / 13 px
/resources/case-brief-template/
04 / components

Interface components

Reusable elements for posts, guides, downloads, progress updates, and course pages.

Buttons & links

Primary means an intentional action. Secondary offers an alternative. Not every card needs a button.

topics
1LContractsStudy routineFree PDF
Journal card · example

My first week of online law school

An entry about expectations, time tracking, and getting acquainted with the first four courses.

Planned · December 2026 · 1L journal

Preview the journal layout →

Study progress

A proposed tracker, with sample data clearly labeled.

1L
example
Note: Show actual completed work, not speculative percentages, once classes begin.

Printable resource

PDF
Case brief worksheet
Letter size · black-and-white friendly · sample listing
Download link goes here

Printables should have simple margins, white pages, and little or no colored fill.

05 / patterns

Page templates

Use a consistent structure while giving the personal journal and reference library different kinds of information hierarchy.

the online law studentjournal · toolkit · guide
The personal journal

Learning the law, one week at a time.

A candid record of online law school beginning December 2026.

Latest entry
A dated, firsthand update
Road to 2030
Progress and milestones

Pattern A: editorial home / journal landing page.

the 1L toolkitsearch · topics · downloads
Free student resources

Useful tools. No clutter.

Organize classes, brief cases, and prepare for exams.

Templates
Briefs, IRAC, outlines
Planning
Checklists and trackers

Pattern B: searchable resource library.

Content architecture

Primary navigation

Home · Journal · 1L Toolkit · Online Law School · Road to 2030 · About

Resource filters

Course · Resource type · School year · Last updated · Tested by the author

06 / standards

Hard rules

  1. Sentence-case headings. Use conventional punctuation, proper nouns, and accessible language.
  2. Source legal requirements. Clearly distinguish current official California State Bar and school rules from personal interpretation. Include review dates.
  3. Label personal experience. Disclose that the site is independent of NWCU and is not legal advice.
  4. Print economically. PDFs default to white backgrounds, dark text, US Letter sizing, and generous writing space.
  5. Never fake progress or testimonials. Draft or planned content must be identified as such.
  6. Accessible by default. Semantic headings, keyboard-friendly controls, visible focus states, alt text, and adequate contrast.
  7. Use photos sparingly. Favor authentic photographs of workspaces, books, notes, and lived experiences over decorative stock imagery.
  8. Keep it portable. CSS variables are the single source of truth. Avoid unnecessary plugins, trackers, and external font dependencies.