Macroscope Visual Language Specification

The Field Instrument Aesthetic

Document ID: CNL-SP-2026-051 Version: 0.1 Date: April 15, 2026 Author: Michael P. Hamilton, Ph.D. Affiliation: Canemah Nature Laboratory, Oregon City, Oregon

AI Assistance Disclosure: This specification was developed with assistance from Claude (Anthropic, Claude Opus 4.6). The AI contributed to analysis of production CSS from the reference source, extraction and articulation of transferable design principles, composition of the recommendation palette and token structure, and manuscript drafting. The author takes full responsibility for the content, accuracy, and conclusions.

Abstract

This specification establishes a portable visual language for Macroscope Next Generation (MNG) interfaces, derived from analysis of production CSS on saltverk.com — an Icelandic artisan salt producer whose e-commerce site demonstrates unusual design coherence atop a standard Shopify Dawn theme. The analysis identifies transferable principles that pull interface design away from generic SaaS conventions and toward the visual register of field notebooks and scientific instruments. The specification defines an organizing principle (“the field instrument aesthetic”), a typography system built on a single family in four weights, a two-temperature color palette tied to Pacific Northwest ecology, a hairline-over-shadow border vocabulary, a custom SVG iconography requirement, interactive element treatments drawn to read as small mechanical objects, and two candidate signature visual devices (topographic ambient layer, editorial plate treatment). Implementation tokens are provided as a CSS custom property block suitable for direct adoption across PHP-based Macroscope sites, React applications, and static HTML. Application guidance maps the visual language onto the four Macroscope domains (EARTH, LIFE, HOME, SELF) and the STRATA integrative layer. The specification is platform-agnostic and expressible in any frontend stack currently deployed on Canemah Nature Laboratory infrastructure. This document is released as v0.1 for evaluation against prototype implementations and is expected to iterate before reaching v1.0 release status.

1. Scope

1.1 Purpose

This specification defines the visual design language for all Macroscope Next Generation (MNG) interface surfaces, including but not limited to: the CWC blog (coffeewithclaude.com), the Canemah Nature Laboratory site (canemah.org), the YEA.earth place-based observatory system, the Macroscope Collaboratory investigation workbench, and any administrative or public-facing dashboards that expose Macroscope data or functionality.

1.2 Audience

This document is intended for the author, Claude in its role as technical collaborator on Macroscope development, and any future contributors to the Macroscope codebase. It assumes familiarity with CSS, basic typography, and the conceptual architecture of the Macroscope paradigm.

1.3 Out of Scope

This specification does not address: backend architecture, database schemas, API contracts, content strategy, editorial voice, or information architecture. It concerns visual presentation only. Interaction design details beyond the treatment of common form controls are deferred to subsequent specifications.

2. Background

2.1 Origin of the Analysis

This specification derives from a design-analysis session conducted on April 15, 2026, examining the e-commerce site of Saltverk, an Icelandic artisan salt producer [1]. The site was selected as a study subject because it exhibits a level of design coherence and brand integrity rarely achieved on templated Shopify storefronts. Raw HTML and the two primary custom stylesheets (custom.css, customhead.css) were retrieved and analyzed to identify the specific techniques responsible for that coherence.

2.2 Key Finding

The coherence of the reference site is attributable to a small number of unified decisions — one typeface family, a two-temperature color palette tied to place, consistent replacement of drop shadows with 1–2px hairlines, and a small custom SVG icon library — executed with discipline across every surface. The organizing principle is a systematic refusal of contemporary SaaS visual conventions in favor of the conventions of print editorial design and artisan product packaging. This principle is portable.

3. Organizing Principle

The Macroscope is a scientific observatory, not a software product. Every visual decision should pull away from SaaS conventions (drop shadows, gradient buttons, stock icons, platform chrome) and toward the visual language of field notebooks, naturalist guides, and precision instruments — objects that are hand-made, purpose-built, and tied to specific places.

Where a typical dashboard declares here is your software, the Macroscope interface should declare here is your instrument. Every element — a toggle, a border, a caption — should appear to belong on a brass-and-glass device or in a letterpressed field manual rather than in a generic web application. This is a semiotic commitment, not a style exercise. If the visual language is coherent, the Macroscope will read as what it is: decades of field ecology, sensor infrastructure, and scientific synthesis — not a generic data platform with an ecological skin.

4. Typography

4.1 Primary Family Recommendation

A single typeface family shall be used across all Macroscope surfaces. The recommended family is IBM Plex [2], a humanist-geometric hybrid designed by IBM for their systems and released under the SIL Open Font License. The Plex superfamily provides three coordinated subfamilies suitable for distinct roles:

• IBM Plex Sans — headings, body, UI chrome, navigation
• IBM Plex Serif — long-form narrative (essays, field notes, species accounts)
• IBM Plex Mono — coordinates, timestamps, sensor identifiers, code listings, tabular data

Alternative families acceptable for consideration include Futura (the reference site’s choice), Neue Haas Grotesk, and Söhne. The principle of single-family discipline holds regardless of the specific selection.

4.2 Weight Discipline

No more than four weights shall appear in a single view:

• 300 (Light) — body copy, long-form narrative
• 400 (Regular) — body copy, default weight
• 500 (Medium) — section titles, emphasized UI labels
• 700 (Bold) — hero display, button labels, top-level navigation

4.3 Treatment

• Section titles, buttons, and navigation shall use text-transform: uppercase
• Tight tracking on caps: letter-spacing: -0.1px to 0
• Display type (hero scale): line-height: 0.9 to 1.0 for tight poster-like stacking
• Body text: line-height: 1.5 to 1.6 for readability
• Fluid hero scaling: clamp(4.2rem, 5vw + 2rem, 8rem)

5. Color System

The color palette encodes Pacific Northwest ecology through two thermal axes: a cold primary axis (slate, fog, parchment) and a warm accent axis (cedar, golden hour, lichen). No color shall be fully saturated.

5.1 Cold Axis (Primary)

5.2 Warm Axis (Accent)

5.3 Domain Tagging

The four Macroscope domains receive subtle hue assignments for small-scale tagging (tags, category dots, section indicators). These are never used as large surface colors.

• EARTH — wet stone (#2B3D4F)
• LIFE — lichen (#8FA97A)
• HOME — cedar (#7A4E2E)
• SELF — ochre (#B8863A)

5.4 Rules

• No pure black or pure white; use #1A1D1E and #F2EEE5 as the extremes
• No neon or fully-saturated hues
• No gradients — flat color only
• Colors shall be tested against photographs from Canemah, Anza-Borrego, and Blue Oak Ranch before final adoption; the palette must belong to the land it represents

6. Line and Edge Vocabulary

Hairlines replace shadows. This is the single most transferable technique identified in the reference analysis, and the most reliable mechanism for pulling an interface out of the SaaS register.

6.1 Border Weights

• 1px solid — hairline dividers, small control outlines, thin pill borders
• 2px solid — editorial cards (“postcard” treatment), instrument panels, framed content
• Borders of 3px or greater shall not be used
• box-shadow shall not be used anywhere except in the single signature halo case defined in §10.1

6.2 Border Radii

The contrast between rectangular editorial blocks and pill/circle interactive elements is structural: geometry communicates function. Rectangles are content to read; pills and circles are things to operate.

7. Iconography

7.1 Scope

A custom SVG icon library shall be developed for Macroscope use. Icon fonts (Font Awesome, Material, Heroicons, Lucide) shall not be used. The initial icon library shall cover the following categories, sufficient for MNG v1:

• Instruments — sensor node, weather station, camera trap, acoustic recorder, hydrophone, anemometer, minirhizotron, GPS receiver
• Habitats — oak woodland, riparian corridor, grassland, intertidal, watershed, old-growth
• Organisms — silhouettes of signature taxa per reserve (raptor, passerine, ungulate, amphibian, fungus, invertebrate)
• Data and state — signal strength, uplink active, sample pending, observation verified, alert
• Architecture — field station, data center, archive, observatory

A 30 to 40 icon starter set is sufficient for v1; expansion is expected.

7.2 Drawing Rules

• Single consistent stroke weight (1.5px recommended)
• No fill unless the form specifically requires it
• Square viewBox (24×24 or 48×48)
• Line caps rounded, joins rounded
• Monochrome — inherit color from parent via currentColor
• Drafted once in Figma or Illustrator, exported as individual SVGs, versioned in the Macroscope repository

8. Layout and Spacing

8.1 Spacing Scale

The following fluid spacing scale shall be adopted as CSS custom properties:

--space-1: 0.5rem;    /* 8px */
--space-2: 1rem;      /* 16px */
--space-3: 1.5rem;    /* 24px */
--space-4: 2rem;      /* 32px */
--space-6: 3rem;      /* 48px */
--space-8: 5rem;      /* 80px */
--space-12: 9rem;     /* 144px */

Section padding scales per breakpoint: mobile var(--space-4) var(--space-3) → desktop var(--space-12) var(--space-8).

8.2 Breakpoints

Content maximum width shall be 1600px.

8.3 Full-Bleed Editorial Sections

Use the following pattern to break the content container for storytelling moments (field-station portraits, landscape context, observatory imagery):

.full-bleed {
  margin-left: calc(-50vw + 50%);
  width: 100vw;
}

Full-bleed sections shall be used sparingly — reserved for moments where the content warrants the full viewport width.

9. Interactive Elements

Every control shall be styled to read as a small mechanical object. The reference site’s custom subscription toggle — an 88×48 pill track with a 36×36 outlined knob, transitioning on 0.25s — is the exemplar.

9.1 Buttons

• Pill shape (border-radius: 999px)
• 1px or 2px solid border
• text-transform: uppercase, font-weight: 700
• letter-spacing: -0.1px
• Padding: minimum 0.75rem 1.5rem
• Hover state: border-color or background shift; no drop shadow

9.2 Toggles and Switches

• Visible pill track with outline
• Visible knob with its own outline
• 0.25s transitions
• No material ripples, no depth effects, no 3D treatments

9.3 Form Inputs

• 1px solid hairline border
• Subtle radius (4–8px) or none
• Focus state: border color shift plus 2px inset ring; no blue glow

10. Signature Visual Devices

10.1 Candidates

Five candidate signature devices are available for selection. At least one shall be adopted; no more than two shall be used system-wide.

A. Topographic ambient layer. Subtle isolines (opacity 0.06–0.10) rendered as SVG background on major section transitions. Evokes cartography, field survey, and place-specificity.

B. The editorial plate. Photographs framed like museum specimen labels: 2px solid border, tight inner margin, a small caption bar beneath with coordinates, timestamp, and observation ID in monospaced type. Turns every image into a documented record.

C. Instrument brackets. Corner marks — [ ] or ⌐⌐ — around key data moments. Signals this is an observation, not merely a number.

D. Coordinate marginalia. Section headers stamped with a small monospaced metadata block in the corner: 45.3487° N / 122.6077° W · 2026-04-15T06:14Z. Field-notebook provenance.

E. Ambient halo (borrowed from reference). One soft blurred color field behind hero imagery per view. border-radius: 525px; filter: blur(100px); opacity: 0.3. This is the single permitted soft-edge moment and shall appear at most once per page.

10.2 Recommended Adoption

Devices A (topographic ambient layer) and B (editorial plate) are recommended as the MNG signature pair. Both reinforce the observatory identity without becoming tiring with repeated use. Device E may be adopted as a tertiary option for hero product or specimen photography.

11. Rejected Patterns

The following elements shall not appear in any Macroscope interface:

• Drop shadows (except the single signature halo defined in §10.1E, if adopted)
• Gradient buttons or gradient text
• Rounded-rectangle cards with pastel backgrounds
• Stock icons (Material, Font Awesome, Heroicons, Lucide)
• Emoji in UI chrome
• Skeuomorphic glass or frosted-blur effects
• Neon or fully-saturated accent colors
• More than one typeface family
• More than four weights per view
• Platform-default form controls (checkbox, radio, select) without styling
• SaaS-style progress bars as filler
• Bootstrap-style tooltip arrows
• Generic “Get started” hero CTAs

12. Implementation Tokens

The following CSS custom property block shall be placed in a design-tokens.css file at the root of each Macroscope site and imported before any component stylesheets.

:root {
  /* Typography */
  --font-sans: "IBM Plex Sans", system-ui, sans-serif;
  --font-serif: "IBM Plex Serif", Georgia, serif;
  --font-mono: "IBM Plex Mono", Menlo, monospace;

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;

  /* Cold axis */
  --slate-deep: #1A1D1E;
  --slate-stone: #2B3D4F;
  --slate-mist: #8A9AA5;
  --slate-fog: #D8DDE0;
  --parchment: #F2EEE5;

  /* Warm axis */
  --cedar: #7A4E2E;
  --golden: #D48842;
  --lichen: #8FA97A;
  --ochre: #B8863A;

  /* Domain colors */
  --earth: var(--slate-stone);
  --life: var(--lichen);
  --home: var(--cedar);
  --self: var(--ochre);

  /* Edges */
  --hairline: 1px solid var(--slate-deep);
  --frame: 2px solid var(--slate-deep);
  --divider: 1px solid var(--slate-mist);

  /* Radii */
  --radius-none: 0;
  --radius-card: 8px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* Space */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-6: 3rem;
  --space-8: 5rem;
  --space-12: 9rem;

  /* Motion */
  --ease-out: cubic-bezier(0, 0, 0.3, 1);
  --t-short: 0.15s;
  --t-default: 0.25s;
  --t-long: 0.5s;
}

13. Application to the Four Macroscope Domains

13.1 EARTH

Geography, climate, environment.

• Dominant color: wet stone
• Iconography emphasis: weather station, anemometer, watershed, topographic elements
• Most visible signature device: topographic ambient layer
• Content treatment: data-dense surfaces, monospaced timestamps, plated satellite imagery

13.2 LIFE

Biodiversity, taxonomy, ecology.

• Accent color: lichen
• Iconography emphasis: species silhouettes, habitat types, acoustic recorder, camera trap
• Content treatment: field-guide layout — image plate plus caption plus taxonomic marginalia
• Long-form content set in Plex Serif for species accounts and narrative observations

13.3 HOME

Human-built habitat.

• Accent color: cedar
• Iconography emphasis: field station, archive, data center, observatory architecture
• Content treatment: instrument panel or admin dashboard — more chrome and more controls, but the hairline vocabulary is preserved
• Scheduled tasks, system status, deployment dashboards live here

13.4 SELF

Personal health, work, reading, writing, social.

• Accent color: ochre
• Iconography emphasis: reading, writing, sensor (for biometrics), movement
• Content treatment: quieter and more journal-like; CWC essays live here
• Long-form serif dominant

13.5 Cross-Domain (STRATA Integrative Layer)

• All four domain colors used as small tags
• Primary palette remains the cold axis
• The observatory aesthetic matters most here: synthesis views shall feel like a master field notebook, not a business intelligence tool

14. Limitations and Caveats

14.1 Derivative Analysis

The principles in this specification derive from analysis of a single reference source, selected for its design coherence rather than its ecological or scientific relevance. The transferability of those principles to scientific instrumentation interfaces is asserted but not yet tested against actual Macroscope prototypes. Prototype validation is the next required step.

14.2 Typography Selection

The recommendation of IBM Plex is provisional. Final typeface selection should be validated against real Canemah photographs, CWC essay pages, and instrument-panel mockups before v1.0 release. Futura and Neue Haas Grotesk remain viable alternatives.

14.3 Palette Validation

The Pacific Northwest palette is proposed without photographic validation. The specification explicitly requires that colors be tested against photographs from Canemah, Anza-Borrego, and Blue Oak Ranch before adoption. Hex values may shift based on that testing.

14.4 Version Status

This document is v0.1 — a draft specification intended to structure discussion and prototype evaluation. Substantial revision is expected before v1.0 release status.

15. Adoption Path

1. Type test. Mock two CWC essay pages and one admin dashboard in IBM Plex Sans/Serif versus Futura versus one alternative family. Select based on rendered feel.
2. Palette test. Render the two-temperature palette against photographs from Canemah, Anza-Borrego, and Blue Oak Ranch. Confirm the colors belong to the land.
3. Icon commission. Draft the first 10 instrument icons. These establish the illustrative hand of the entire system.
4. Signature device selection. Choose one of the five candidates in §10.1. Prototype on a single page before adopting system-wide.
5. CWC pilot application. Apply the complete specification to a single CWC essay page and evaluate. The blog is the lowest-risk testbed because existing content and traffic absorb the migration cost.
6. Iterate to v1.0. Incorporate findings from steps 1–5 into a v1.0 release of this specification before system-wide rollout.

16. References

[1] Saltverk ehf. (2026). “LAVA SALT — Saltverk.” https://saltverk.com/products/saltverk-lava-salt (accessed April 15, 2026). Source HTML and custom.css v211244850980526441764243554 analyzed during preparation of this specification.

[2] IBM (2024). “IBM Plex.” https://www.ibm.com/plex/ (accessed April 15, 2026). Open-source typeface superfamily released under SIL Open Font License.

[3] Hamilton, M. P. (2025). “Canemah Nature Laboratory Technical Note Style Guide.” CNL-SG-2025-002, v1.1.

Document History