Skip to content
Visual Language
Visual navigator

Greenways visual language · v2

Visual navigator

Brand / OS / Product / Infra

Begin typing to search this documentation.

Visual Language

Greenways system · Astro + Starlight

One visual language.
Many worlds.

A shared mosaic construction, adaptive day-and-night system, and disciplined interface shell connect Greenways projects without flattening their identities.

Read the system →Browse sigilsExplore worldsSource ↗
Construction
Irregular Voronoi smalti
Catalogue
62 sigils · 68 places
Theme
Auto · light · dark

01 · Foundations

Rules strong enough
to permit difference.

The system standardises construction and behaviour, not personality.

01

Material before decoration

Stone, glass, metal, foliage, and light behave as physical materials rather than superficial filters.

Read foundation →02

Mosaic at every scale

Detailed and compact marks retain their tessera construction. Small does not mean flat or generic.

Read foundation →03

Shared structure

Headers, search, theme controls, documentation cards, and code panels remain recognisably Greenways.

Read foundation →04

Project character

A feather, compass, mountain, ring, star, or lattice carries its own palette and world logic.

Read foundation →

02 · System

One contract.
Six scales of use.

From a 16-pixel tab mark to a complete world, every layer inherits the same material and interaction rules.

  1. 01FaviconCoarse irregular tesserae remain legible at tab scale.
  2. 02Project sigilA named motif and palette identify the project.
  3. 03Interface shellNavigation, search, theme, and code share behaviour.
  4. 04Editorial artworkDay and night describe one persistent place.
  5. 05WorldArchitecture, ecology, and product purpose become spatial.
  6. 06IntegrityAutomated checks prevent identity drift.

Shared Astro component

Use the contract directly.

Projects consume the same tested components rather than reproducing a visual approximation.

SharedSiteHeader.astroProject shell
---
import DocumentationHeader from "@greenways-ai/visual-language/DocumentationHeader.astro";
---
<DocumentationHeader
  project="hoplite"
  title="Hoplite"
  docsHref="/hoplite/getting-started/"
/>

03 · Day and night

One place.
Two living states.

Night is designed from the accepted day master. It changes illumination and behaviour without moving the world underneath.

Greenways.ai world study

World Confluence

Open concept page
The connected Greenways world confluence in daylight, with rivers, bridges, gardens, and wildlife
DayRoutes, habitats, water, and public life are immediately legible.
The same connected Greenways world confluence at night, with restrained civic lights and resting wildlife
NightThe same geography becomes a field of lanterns, reflections, roosts, and quiet movement.
Locked between states
  • Camera, horizon, rivers, bridges, districts, and mosaic patterns
  • The relationship between civic, cultivated, and wild space
Allowed to change
  • Natural light, practical light, reflections, weather, and atmosphere
  • Credible day activity and nocturnal rest or movement

04 · Catalogue

Marks, places,
and working parts.

The catalogue is a production library, not a mood board.

Greenways peacock featherGreenways peacock feather in dark mode
62 studiesSigil catalogueHearts, eyes, rings, stars, gates, lattices, flora, and architecture.
Jeweled archipelago mosaic world by dayJeweled archipelago mosaic world by night
70 dedicated pagesConcept artEvery environment and product surface has its own day/night art, brief, and master links.Portable AstroComponent catalogueHeaders, search, project switching, code, cards, artwork, and themes.

05 · Adoption

Consume the system.
Do not imitate it.

A project should import canonical assets and components, set its project identity, then prove the result in CI.

  1. 01
    Install

    Pin the package or repository commit used by the project.

  2. 02
    Identify

    Set data-project and use the named project sigil.

  3. 03
    Compose

    Use shared headers, theme controls, cards, and artwork helpers.

  4. 04
    Audit

    Run the visual-integrity check before deployment.

Install from GitHubnpm install github:greenways-ai/visual-languageOpen adoption guide →

Visual integrity

Designed to survive
real interfaces.

Tests cover project motifs, adaptive palettes, compact mosaic construction, contrast, exports, and responsive assets.

Read the checks
Sigil studies
62
World states
136
Theme choices
3
Shared package
1