Current Design Language

The current Chips’nCode design grew out of a fairly simple realisation: the site contains several genuinely different kinds of work, and forcing all of them through the same card, header and article template was making each section less itself. A technical reference, a photo essay, an old poem and a project log should clearly belong to the same site, but they should not behave as though they are the same object.

The system now works more like a small publication than a generic portfolio. It shares typography, colour, spacing, navigation and interaction rules globally, then gives each collection enough room to establish its own rhythm. The result is cohesive without being uniform: warm and editorial in its default state, darker and more cinematic where imagery needs it, and deliberately restrained when the content is doing technical work.

The visual foundation

The default palette is built around warm paper, dark ink and a restrained terracotta accent. Sage and related secondary colours distinguish families of content without turning the site into a rainbow of unrelated brands. Dark mode is not an inversion trick: it moves the same hierarchy onto charcoal surfaces with softer cream text and enough colour adjustment to keep borders, links and diagrams legible.

Atkinson is the working face for prose and interface text. It is readable, friendly and sufficiently neutral to carry both documentation and longer writing. Monospace type is reserved for metadata, labels, dates, technical values and small navigational signals. Rothenburg Decorative is used as display ornament—most visibly in the engraved monograms and missing-image treatments—not as a body face. Its job is to add personality in small, controlled doses.

Borders do most of the structural work. Shadows are rare, radii are modest, and panels are used only when something genuinely benefits from being treated as an object. Empty surface is not decoration in itself; width, padding and grouping should always answer to the material inside them.

Element	Present treatment	Purpose
Body copy	Atkinson on warm paper or charcoal	sustained reading
Metadata	compact monospace labels	orientation without visual noise
Accent	terracotta in light mode, warm cream in dark mode	links, active states and small signals
Ornament	Rothenburg Decorative monograms	character, placeholders and collection identity
Structure	fine borders and measured rules	hierarchy without heavy containers

One frame, several editorial modes

The global header and footer establish the site before a collection takes over. Navigation is quiet, the active section is underlined, and theme controls remain available without competing with the page. Below that shared frame, each section uses the structure most suited to it.

Home

The home page is a switchboard rather than a résumé. Its full-width, shallow cinematic hero brings the site’s recurring interests—radio, code, field work and astronomy—into one scene. Latest work appears in compact cards with fixed square thumbnails. Where no image exists, engraved monograms provide an intentional replacement rather than an empty box. Explore and theme links repeat that visual language without turning into another wall of identical cards.

Notebook

Notebook pages are editorial longform. Technical articles use generous readable columns, a sticky section rail and subtle scroll highlighting. Tools and inspectors may break wider when the information genuinely needs the room, but ordinary prose does not inherit that width automatically.

Narrative entries use a magazine-like structure: a wider reading measure, a drop cap, understated separators and pull quotes that change with the reader’s position. The pull quotes remain typographic furniture rather than hyperlinks. Metadata and tags stay compact and attached to the header instead of becoming a second banner.

Poetry

The poetry index is an archive, not a contemporary blog feed. Years form the primary navigation and highlight as the reader moves through the collection. Original title graphics are treated as surviving artefacts and given enough size to be legible; missing artefacts receive a quieter engraved placeholder.

Individual poems remain simple. The curator’s note uses a rail to name its movements while the article itself flows without numbered headings, using small ornamental separators to mark changes in thought.

Projects

Project pages are allowed the greatest local variation because the evidence changes from build to build. The shared shell supplies title, status, actions, metadata, rail behaviour and prose rules. Inside it, a repair can become a photo essay, an activation can use a compact field dashboard, firmware can live in a disclosure panel, and a software project can foreground its live application link.

The important constraint is that local design follows the project rather than replacing the site. Hero images are cropped or contained according to their purpose, captions must describe the photograph they sit beside, and specialist components use the same tokens and interaction habits as the surrounding page.

Documentation

Documentation uses the quietest shared structure: a plain header, compact metadata, a sticky contents rail and a broad technical reading area. Standard documents stay within that shell. Embedded tools can remove the rail and use the available width, but the tool itself should still shrink to the space its information needs. The ASCII DIP pinout catalogue is a good example: the catalogue can span the work area while each pinout plate wraps its actual diagram rather than stretching into an empty terminal-shaped window.

Astrophotography and education

Astrophotography remains image-led and dark by intent; photographs should establish the atmosphere before explanatory material does. Education is currently withheld from public navigation while its structure is reconsidered. Hiding unfinished collections is preferable to preserving a visible section merely for architectural symmetry.

Shared behaviour

Repeated interaction is implemented once and called wherever the same pattern appears. Section rails use a shared scrollspy, whether they are tracking article headings or archive years. Active states are subtle: a small inset rule and a modest colour change, never a large badge. Mobile rails become horizontal and remain usable without trapping the reader’s wheel or touch scrolling.

The same principle applies to code and embedded material. A scrollable code block may consume the wheel while it still has somewhere to go, but must hand scrolling back to the page at its beginning or end. Syntax colour should improve recognition without turning examples into neon illustrations. Core content and navigation remain usable without JavaScript; scripts enhance selection, copying, highlighting and inspection rather than gating access.

Light and dark modes are part of every shared component’s contract. Text, diagrams, placeholders, code, borders and focus states all need an intentional treatment in both. A component is not finished if its foreground colour only happens to work against one surface.

Width and rhythm

There is no universal character count imposed on the whole site. Reading measure is chosen by content type and by the typography actually in use. Narrative prose is kept comfortable; technical prose can run wider when tables, commands or diagrams benefit; image-led and interactive material can use still more space. None of those exceptions justify stretching a small object across a modern desktop display.

Vertical rhythm follows the same rule. Separators should divide ideas, not create ceremonial empty floors around them. Metadata, tags and secondary links are compressed. More space is reserved for a genuine change of mode: prose into an inspector, narrative into an image sequence, or an index into a featured work.

Global first, local when earned

The implementation rule is straightforward:

1. Use global tokens for type, colour, surfaces, borders and spacing.
2. Use the shared collection layout for headers, metadata, rails, taxonomy and endings.
3. Reuse a shared component when the same interaction appears elsewhere.
4. Add local structure only when the content has a real requirement the shared system cannot express.
5. If a local solution becomes a repeated pattern, promote it into the shared system.

This keeps specialist pages from becoming isolated mini-sites while avoiding the opposite failure: making every page look like a lightly edited copy of every other page.

Accessibility and resilience

The site should remain readable at narrow widths, at large desktop widths and at increased text sizes. Focus states must be visible. Navigation and disclosures must work from the keyboard. Images require meaningful alternatives, tables and code need usable overflow, and decorative lettering must never be the only readable label.

Responsive work is not simply collapsing grids. It includes preserving hierarchy, preventing sticky elements from obscuring content, ensuring inner scrollers release the page at their boundaries, and deciding when an image should crop, contain or move out of the way.