# 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) |Token |Hex |Role | |----------|---------|------------------------------------------------------------------| |Deep slate|`#1A1D1E`|Text, primary foreground. Not pure black — slight blue-green cast.| |Wet stone |`#2B3D4F`|Secondary surfaces, footer, navigation chrome | |Mist |`#8A9AA5`|Muted text, dividers | |Fog |`#D8DDE0`|Surface backgrounds, inactive states | |Parchment |`#F2EEE5`|Editorial card backgrounds — field notebook paper | ### 5.2 Warm Axis (Accent) |Token |Hex |Role | |-----------|---------|-----------------------------------| |Cedar bark |`#7A4E2E`|Warm structural accent | |Golden hour|`#D48842`|Interactive hover, attention states| |Lichen |`#8FA97A`|Success, organic accent | |Ochre |`#B8863A`|Data highlights, tags | ### 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 |Radius |Use | |--------------|-------------------------------------------------------------| |`0` |Editorial cards, instrument panels, data plates, photo frames| |`4–8px` |Form inputs, small content cards | |`999px` (pill)|Buttons, toggles, tags, category pills | |`50%` |Status dots, icon containers, small circular UI | 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: ```css --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 |Breakpoint |Width |Use | |-------------|-------|--------------------------| |Mobile |< 750px|Single-column default | |Tablet |750px |Two-column layouts begin | |Small desktop|990px |Three-column layouts begin| |Desktop |1200px |Full layout chrome | |Wide |1460px |Increased whitespace | |Ultrawide |1600px |Maximum content width cap | 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): ```css .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. ```css :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. 1. **Palette test.** Render the two-temperature palette against photographs from Canemah, Anza-Borrego, and Blue Oak Ranch. Confirm the colors belong to the land. 1. **Icon commission.** Draft the first 10 instrument icons. These establish the illustrative hand of the entire system. 1. **Signature device selection.** Choose one of the five candidates in §10.1. Prototype on a single page before adopting system-wide. 1. **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. 1. **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 |Version|Date |Changes | |-------|----------|--------------------------------------------------------------------------------------------------------------| |0.1 |2026-04-15|Initial draft derived from Saltverk design analysis session. Reformatted to conform with CNL-SG-2025-002 v1.1.|