# Aurora Schema: 1.0.0 · Content revision: f5fd78058ba2 Resource base: https://mejohnc.org (or the preview host used to obtain this file). A lighting treatment built from broad, luminous color fields. It supplies atmosphere behind an interface rather than a navigation model. ## Visual family Contemporary interfaces. Editorial family: shared visual vocabulary, not a claim of common origin. ## Visual cues - Diffuse gradients - Dark grounding surface - Sparse luminous accents ## Build it 1. Keep the gradient behind the header. 2. Put body text on an opaque panel. 3. Use one accent for the primary action. ## Example A music discovery page with an aurora header and solid album rows. ## Typography Use a medium-weight sans-serif. Keep luminous effects off the letterforms. ## Practical consequences - Starting projects: Portfolio, Publication. These are suggestions, not restrictions. - Reading/layout: spacious; bold visual emphasis. - Asset work: Atmosphere comes from a gradient; custom images are optional. - Complexity: medium. Allow time for a coherent decorative or image layer and responsive checks. ## Limits Animating the entire background or placing small text over changing colors. ## Reading the collected reference board Look at the large blue light fields and soft-edged color transitions. These poster treatments suggest atmosphere; they do not demonstrate a complete interface. ## Context Contemporary screen interpretation. The recipe is a modern web adaptation. No single inventor or exact founding date is asserted for this interpretation. ## Implementation files - [page](/territories/aurora/) - [guide](/territories/aurora/guide.md) - [brief](/territories/aurora/brief.md) - [tokens](/territories/aurora/tokens.json) - [checks](/territories/aurora/checklist.md) - [example](/territories/aurora/example/) - [versionedGuide](/territories/v1/aurora/guide.md) - [versionedTokens](/territories/v1/aurora/tokens.json) --- # Pixel Art Schema: 1.0.0 · Content revision: f5fd78058ba2 Resource base: https://mejohnc.org (or the preview host used to obtain this file). An image-making approach where the placement of individual pixels is visible and deliberate. Pixel illustration does not require pixel-sized interface controls. ## Visual family Digital nostalgia. Editorial family: shared visual vocabulary, not a claim of common origin. ## Visual cues - Visible pixel grid - Restricted palette - Stepped silhouettes ## Build it 1. Draw icons on a consistent source grid. 2. Scale artwork by whole-number multiples. 3. Pair display lettering with normal body text. ## Example A game library with pixel cover art and readable save-file details. ## Typography A bitmap display face can work for a short title; use a normal-width monospace or sans-serif for descriptions. ## Practical consequences - Starting projects: Portfolio, Store. These are suggestions, not restrictions. - Reading/layout: compact; bold visual emphasis. - Asset work: A small original sprite set gives this direction its identity. - Complexity: medium. Allow time for a coherent decorative or image layer and responsive checks. ## Limits Blurry scaling, tiny bitmap paragraphs, or controls whose hit areas are only as large as their sprites. ## Reading the collected reference board Compare the deliberately stepped silhouettes and limited colors. Some tiles are broader retro illustration references, so inspect the pixel construction rather than assuming every tile uses the same technique. ## Context Contemporary screen interpretation. The recipe is a modern web adaptation. No single inventor or exact founding date is asserted for this interpretation. ## Implementation files - [page](/territories/pixel-art/) - [guide](/territories/pixel-art/guide.md) - [brief](/territories/pixel-art/brief.md) - [tokens](/territories/pixel-art/tokens.json) - [checks](/territories/pixel-art/checklist.md) - [example](/territories/pixel-art/example/) - [versionedGuide](/territories/v1/pixel-art/guide.md) - [versionedTokens](/territories/v1/pixel-art/tokens.json) --- # Japandi Schema: 1.0.0 · Content revision: f5fd78058ba2 Resource base: https://mejohnc.org (or the preview host used to obtain this file). A contemporary interiors-inspired blend of restrained Japanese and Scandinavian references. For screens, the useful translation is material warmth and economical composition. ## Visual family Craft, place & natural materials. Editorial family: shared visual vocabulary, not a claim of common origin. ## Visual cues - Warm neutrals - Uncluttered arrangement - Natural material imagery ## Build it 1. Use one quiet surface color. 2. Align content to a simple grid. 3. Make product photography carry the texture. ## Example A furniture catalog with oak photography, generous gutters, and direct product information. ## Typography Choose an understated sans-serif with open counters. Avoid excessive tracking in body copy. ## Practical consequences - Starting projects: Store, Portfolio. These are suggestions, not restrictions. - Reading/layout: spacious; quiet visual emphasis. - Asset work: Material or product photographs do much of the expressive work. - Complexity: low. Mostly standard CSS; imagery may still need preparation. ## Limits Treating beige as the whole concept or reducing text contrast to create calm. ## Reading the collected reference board Notice the warm paper tones, simplified objects, and generous margins. The board is an interiors-and-print interpretation rather than an example of Japanese interface conventions. ## Context Contemporary screen interpretation. The recipe is a modern web adaptation. No single inventor or exact founding date is asserted for this interpretation. ## Implementation files - [page](/territories/japandi/) - [guide](/territories/japandi/guide.md) - [brief](/territories/japandi/brief.md) - [tokens](/territories/japandi/tokens.json) - [checks](/territories/japandi/checklist.md) - [example](/territories/japandi/example/) - [versionedGuide](/territories/v1/japandi/guide.md) - [versionedTokens](/territories/v1/japandi/tokens.json) --- # Bauhaus Schema: 1.0.0 · Content revision: f5fd78058ba2 Resource base: https://mejohnc.org (or the preview host used to obtain this file). A modern screen interpretation of the Bauhaus school, which operated from 1919 to 1933. Geometric studies are a useful reference, but red-yellow-blue graphics are only one part of its varied output. ## Visual family Modernism & structure · 1919–1933. Editorial family: shared visual vocabulary, not a claim of common origin. ## Visual cues - Geometric composition - Visible hierarchy - Economical forms ## Build it 1. Use a modular grid. 2. Let one geometric form anchor the composition. 3. Assign primary colors distinct visual roles. ## Example An exhibition index with a geometric title panel and disciplined event rows. ## Typography Use a geometric sans-serif for display and a readable sans-serif for details; geometry should not distort long text. ## Practical consequences - Starting projects: Publication, Portfolio. These are suggestions, not restrictions. - Reading/layout: compact; bold visual emphasis. - Asset work: Simple geometric artwork can be made with CSS or SVG. - Complexity: low. Mostly standard CSS; imagery may still need preparation. ## Limits Reducing the school to decorative circles or claiming every Bauhaus work rejected ornament in the same way. ## Reading the collected reference board Compare the geometric balance, color blocks, and directional lettering. These are contemporary poster references, not a catalog of original Bauhaus works. ## Context 1919–1933. The recipe is a modern web adaptation. [The Met: The Bauhaus, 1919–1933](https://www.metmuseum.org/essays/the-bauhaus-1919-1933) ## Implementation files - [page](/territories/bauhaus/) - [guide](/territories/bauhaus/guide.md) - [brief](/territories/bauhaus/brief.md) - [tokens](/territories/bauhaus/tokens.json) - [checks](/territories/bauhaus/checklist.md) - [example](/territories/bauhaus/example/) - [versionedGuide](/territories/v1/bauhaus/guide.md) - [versionedTokens](/territories/v1/bauhaus/tokens.json) --- # Brutalism Schema: 1.0.0 · Content revision: f5fd78058ba2 Resource base: https://mejohnc.org (or the preview host used to obtain this file). A web approach that exposes structure through plain typography, hard boundaries, and direct links. Its architectural namesake is an analogy, not a prescription for bad usability. ## Visual family Modernism & structure. Editorial family: shared visual vocabulary, not a claim of common origin. ## Visual cues - Visible structure - Hard edges - Unembellished controls ## Build it 1. Use explicit link text. 2. Separate sections with rules. 3. Make every action respond immediately. ## Example A project archive with oversized titles, underlined links, and no entrance sequence. ## Typography System sans-serif or monospace works well. Large size and explicit links matter more than a novelty font. ## Practical consequences - Starting projects: Portfolio, Publication, Internal tool. These are suggestions, not restrictions. - Reading/layout: compact; bold visual emphasis. - Asset work: Type, rules, and content can carry the page without images. - Complexity: low. Mostly standard CSS; imagery may still need preparation. ## Limits Confusing deliberate roughness with broken navigation, tiny text, or inaccessible contrast. ## Reading the collected reference board The board combines architectural imagery and forceful print typography. Translate its visible structure into web layout; a concrete building photograph alone does not demonstrate web brutalism. ## Context Contemporary screen interpretation. The recipe is a modern web adaptation. No single inventor or exact founding date is asserted for this interpretation. ## Implementation files - [page](/territories/brutalism/) - [guide](/territories/brutalism/guide.md) - [brief](/territories/brutalism/brief.md) - [tokens](/territories/brutalism/tokens.json) - [checks](/territories/brutalism/checklist.md) - [example](/territories/brutalism/example/) - [versionedGuide](/territories/v1/brutalism/guide.md) - [versionedTokens](/territories/v1/brutalism/tokens.json) --- # Bento Box Schema: 1.0.0 · Content revision: f5fd78058ba2 Resource base: https://mejohnc.org (or the preview host used to obtain this file). A layout pattern using differently sized cards within a shared grid. The hierarchy comes from card size and grouping rather than from a particular color palette. ## Visual family Contemporary interfaces. Editorial family: shared visual vocabulary, not a claim of common origin. ## Visual cues - Modular cards - Shared gutters - Unequal emphasis ## Build it 1. Choose one lead card. 2. Give each card a single purpose. 3. Define the mobile reading order before adding spans. ## Example A product overview with one demonstration, two capabilities, and a compact release note. ## Typography Keep one sans-serif family across cards. Use size and weight to distinguish the lead card from supporting information. ## Practical consequences - Starting projects: Portfolio, Store, Internal tool. These are suggestions, not restrictions. - Reading/layout: compact; quiet visual emphasis. - Asset work: Choose a useful preview or summary for each card. - Complexity: medium. Allow time for a coherent decorative or image layer and responsive checks. ## Limits Making everything a card, cropping essential content to fixed heights, or changing the reading order on mobile. ## Reading the collected reference board Notice how different image and text blocks fit a shared grid. Check which block leads each composition and how the smaller blocks support it. ## Context Contemporary screen interpretation. The recipe is a modern web adaptation. No single inventor or exact founding date is asserted for this interpretation. ## Implementation files - [page](/territories/bento-box/) - [guide](/territories/bento-box/guide.md) - [brief](/territories/bento-box/brief.md) - [tokens](/territories/bento-box/tokens.json) - [checks](/territories/bento-box/checklist.md) - [example](/territories/bento-box/example/) - [versionedGuide](/territories/v1/bento-box/guide.md) - [versionedTokens](/territories/v1/bento-box/tokens.json) --- # Utilitarian Schema: 1.0.0 · Content revision: f5fd78058ba2 Resource base: https://mejohnc.org (or the preview host used to obtain this file). A task-oriented approach that makes information easy to compare and actions easy to repeat. Density is useful only when it reduces work for the reader. ## Visual family Modernism & structure. Editorial family: shared visual vocabulary, not a claim of common origin. ## Visual cues - Explicit labels - Aligned data - Predictable controls ## Build it 1. Align numbers and show units. 2. Keep filters near the results. 3. Use status text alongside color. ## Example An operations queue with owner, state, age, and one clear next action per row. ## Typography Use a legible sans-serif and tabular numerals for comparable values. Reserve monospace for identifiers. ## Practical consequences - Starting projects: Internal tool, Publication. These are suggestions, not restrictions. - Reading/layout: compact; quiet visual emphasis. - Asset work: Real labels, units, and status data matter more than imagery. - Complexity: low. Mostly standard CSS; imagery may still need preparation. ## Limits Hiding important actions in icon-only menus or showing more metrics than a decision needs. ## Reading the collected reference board The examples use restrained grids, alignment, and clear numerical detail. They are mostly graphic layouts; a useful operational interface also needs task-specific information and controls. ## Context Contemporary screen interpretation. The recipe is a modern web adaptation. No single inventor or exact founding date is asserted for this interpretation. ## Implementation files - [page](/territories/utilitarian/) - [guide](/territories/utilitarian/guide.md) - [brief](/territories/utilitarian/brief.md) - [tokens](/territories/utilitarian/tokens.json) - [checks](/territories/utilitarian/checklist.md) - [example](/territories/utilitarian/example/) - [versionedGuide](/territories/v1/utilitarian/guide.md) - [versionedTokens](/territories/v1/utilitarian/tokens.json) --- # Neo Frutiger Aero Schema: 1.0.0 · Content revision: f5fd78058ba2 Resource base: https://mejohnc.org (or the preview host used to obtain this file). A contemporary revival of glossy, nature-and-technology imagery associated with Frutiger Aero. This is a visual vocabulary, not a native operating-system specification. ## Visual family Digital nostalgia. Editorial family: shared visual vocabulary, not a claim of common origin. ## Visual cues - Gloss and translucency - Blue-green imagery - Rounded dimensional forms ## Build it 1. Use one environmental illustration. 2. Add restrained highlights to prominent controls. 3. Keep content surfaces stable and readable. ## Example A weather concept with sky imagery and a solid forecast table. ## Typography Use a humanist sans-serif with open shapes. Gloss belongs to surfaces rather than text. ## Practical consequences - Starting projects: Portfolio, Store. These are suggestions, not restrictions. - Reading/layout: spacious; bold visual emphasis. - Asset work: Glossy objects or nature imagery help establish the mood. - Complexity: medium. Allow time for a coherent decorative or image layer and responsive checks. ## Limits Assuming every glossy interface belongs to the same movement or adding reflective effects to every element. ## Reading the collected reference board Look for the glossy blue forms, green landscapes, and bright skies. The shared cue is optimistic nature-and-technology imagery rather than a single operating system. ## Context Contemporary screen interpretation. The recipe is a modern web adaptation. No single inventor or exact founding date is asserted for this interpretation. ## Implementation files - [page](/territories/neo-frutiger-aero/) - [guide](/territories/neo-frutiger-aero/guide.md) - [brief](/territories/neo-frutiger-aero/brief.md) - [tokens](/territories/neo-frutiger-aero/tokens.json) - [checks](/territories/neo-frutiger-aero/checklist.md) - [example](/territories/neo-frutiger-aero/example/) - [versionedGuide](/territories/v1/neo-frutiger-aero/guide.md) - [versionedTokens](/territories/v1/neo-frutiger-aero/tokens.json) --- # Glassmorphism Schema: 1.0.0 · Content revision: f5fd78058ba2 Resource base: https://mejohnc.org (or the preview host used to obtain this file). A surface treatment that suggests frosted glass through translucency, blur, and a visible edge. Its success depends on what is behind the surface. ## Visual family Contemporary interfaces. Editorial family: shared visual vocabulary, not a claim of common origin. ## Visual cues - Translucent layer - Background blur - Subtle edge highlight ## Build it 1. Use glass for a small overlay or toolbar. 2. Provide an opaque fallback. 3. Test text over the lightest and darkest background regions. ## Example A photo viewer with one translucent toolbar and opaque menus. ## Typography Use medium-weight text on translucent surfaces. Thin strokes are vulnerable to changing backgrounds. ## Practical consequences - Starting projects: Portfolio, Internal tool. These are suggestions, not restrictions. - Reading/layout: spacious; quiet visual emphasis. - Asset work: Glass needs a background with enough variation to reveal it. - Complexity: medium. Allow time for a coherent decorative or image layer and responsive checks. ## Limits Stacking many blurred layers or assuming blur automatically supplies enough contrast. ## Reading the collected reference board The board includes glass-like distortion and refracted print effects. Those are related material references, but not all demonstrate the frosted, blurred surface used in interface glassmorphism. ## Context Contemporary screen interpretation. The recipe is a modern web adaptation. No single inventor or exact founding date is asserted for this interpretation. ## Implementation files - [page](/territories/glassmorphism/) - [guide](/territories/glassmorphism/guide.md) - [brief](/territories/glassmorphism/brief.md) - [tokens](/territories/glassmorphism/tokens.json) - [checks](/territories/glassmorphism/checklist.md) - [example](/territories/glassmorphism/example/) - [versionedGuide](/territories/v1/glassmorphism/guide.md) - [versionedTokens](/territories/v1/glassmorphism/tokens.json) --- # Neo-Brutalism Schema: 1.0.0 · Content revision: f5fd78058ba2 Resource base: https://mejohnc.org (or the preview host used to obtain this file). A contemporary web treatment combining assertive borders, flat color, and hard offset shadows. Its visual weight comes from outlines, spacing, and sharply separated color areas. ## Visual family Contemporary interfaces. Editorial family: shared visual vocabulary, not a claim of common origin. ## Visual cues - Heavy outlines - Flat saturated fills - Offset shadows ## Build it 1. Choose a consistent border weight. 2. Use a hard shadow to signal elevation. 3. Keep labels literal and states distinct. ## Example A workshop registration page with outlined tickets and a high-contrast booking button. ## Typography Use assertive sans-serif headings with plain sentence-case control labels. Borders already provide emphasis. ## Practical consequences - Starting projects: Portfolio, Store, Internal tool. These are suggestions, not restrictions. - Reading/layout: compact; bold visual emphasis. - Asset work: Flat fills, borders, and hard shadows work without illustration. - Complexity: low. Mostly standard CSS; imagery may still need preparation. ## Limits Copying one brand as the definition of the style or using hard shadows on noninteractive decoration indiscriminately. ## Reading the collected reference board Look at the black outlines, flat fills, and offset panel shapes. Several examples use playful pastel color, showing why orange is not a required palette. ## Context Contemporary screen interpretation. The recipe is a modern web adaptation. No single inventor or exact founding date is asserted for this interpretation. ## Implementation files - [page](/territories/neo-brutalism/) - [guide](/territories/neo-brutalism/guide.md) - [brief](/territories/neo-brutalism/brief.md) - [tokens](/territories/neo-brutalism/tokens.json) - [checks](/territories/neo-brutalism/checklist.md) - [example](/territories/neo-brutalism/example/) - [versionedGuide](/territories/v1/neo-brutalism/guide.md) - [versionedTokens](/territories/v1/neo-brutalism/tokens.json) --- # Luxury Typography Schema: 1.0.0 · Content revision: f5fd78058ba2 Resource base: https://mejohnc.org (or the preview host used to obtain this file). An editorial treatment in which proportion, type detail, and spacing carry most of the identity. It does not require microscopic text or excessive empty space. ## Visual family Modernism & structure. Editorial family: shared visual vocabulary, not a claim of common origin. ## Visual cues - Refined display type - Controlled measure - Restrained accents ## Build it 1. Use a high-contrast serif only at display sizes. 2. Keep body copy in a sturdier face. 3. Reserve tracked capitals for short labels. ## Example A small jewelry catalog with large product names and plainly stated materials and prices. ## Typography Try a high-contrast display serif such as Playfair Display for headings, paired with a sturdier reading face. ## Practical consequences - Starting projects: Store, Publication, Portfolio. These are suggestions, not restrictions. - Reading/layout: spacious; quiet visual emphasis. - Asset work: Strong photography is valuable for a product-led treatment. - Complexity: low. Mostly standard CSS; imagery may still need preparation. ## Limits Thin strokes at small sizes, extreme tracking in paragraphs, or making price and availability difficult to find. ## Reading the collected reference board Notice how the serif titles, material photography, and restrained copy work together. The surrounding space gives the type emphasis without requiring every label to be small. ## Context Contemporary screen interpretation. The recipe is a modern web adaptation. No single inventor or exact founding date is asserted for this interpretation. ## Implementation files - [page](/territories/luxury-typography/) - [guide](/territories/luxury-typography/guide.md) - [brief](/territories/luxury-typography/brief.md) - [tokens](/territories/luxury-typography/tokens.json) - [checks](/territories/luxury-typography/checklist.md) - [example](/territories/luxury-typography/example/) - [versionedGuide](/territories/v1/luxury-typography/guide.md) - [versionedTokens](/territories/v1/luxury-typography/tokens.json) --- # Memphis Schema: 1.0.0 · Content revision: f5fd78058ba2 Resource base: https://mejohnc.org (or the preview host used to obtain this file). A graphic interpretation of the Memphis design group's playful clashes of shape, pattern, and color. It is intentionally more unruly than a modernist geometric system. ## Visual family Pop & playful graphics · 1981 onward. Editorial family: shared visual vocabulary, not a claim of common origin. ## Visual cues - Clashing patterns - Playful geometry - Bold color blocks ## Build it 1. Choose a limited set of patterns. 2. Place them in margins or illustration. 3. Keep the reading area comparatively quiet. ## Example A festival program with patterned section dividers and clean schedule cards. ## Typography Bold geometric sans-serif lettering complements the shapes. Keep body text free of pattern and rotation. ## Practical consequences - Starting projects: Portfolio, Store. These are suggestions, not restrictions. - Reading/layout: spacious; bold visual emphasis. - Asset work: A small set of original patterns gives the page coherence. - Complexity: medium. Allow time for a coherent decorative or image layer and responsive checks. ## Limits Putting competing patterns behind text or treating every bright geometric layout as Memphis. ## Reading the collected reference board Compare the patterned fields, clashing shapes, and deliberately playful compositions. The references are modern graphics drawing on the vocabulary of the design group. ## Context 1980s design group. The recipe is a modern web adaptation. [Design Museum: Memphis](https://designmuseum.org/memphis) ## Implementation files - [page](/territories/memphis/) - [guide](/territories/memphis/guide.md) - [brief](/territories/memphis/brief.md) - [tokens](/territories/memphis/tokens.json) - [checks](/territories/memphis/checklist.md) - [example](/territories/memphis/example/) - [versionedGuide](/territories/v1/memphis/guide.md) - [versionedTokens](/territories/v1/memphis/tokens.json) --- # Art Deco Schema: 1.0.0 · Content revision: f5fd78058ba2 Resource base: https://mejohnc.org (or the preview host used to obtain this file). A decorative vocabulary of stepped geometry, symmetry, and stylized luxury. Its screen adaptation works best as a frame around content rather than an all-over effect. ## Visual family Modernism & structure · 1920s–1930s. Editorial family: shared visual vocabulary, not a claim of common origin. ## Visual cues - Stepped forms - Symmetry - Geometric ornament ## Build it 1. Build a symmetrical title composition. 2. Use metallic color as a flat accent. 3. Pair a decorative heading with restrained body text. ## Example A cinema program with stepped borders and a clear screening schedule. ## Typography Use short geometric display lettering, with controlled symmetry. A neutral body face prevents the page becoming a poster at every scale. ## Practical consequences - Starting projects: Store, Publication. These are suggestions, not restrictions. - Reading/layout: spacious; bold visual emphasis. - Asset work: A repeatable geometric frame is more useful than many stock ornaments. - Complexity: medium. Allow time for a coherent decorative or image layer and responsive checks. ## Limits Gold-on-gold text, excessive hairlines, or substituting generic luxury styling for the geometric structure. ## Reading the collected reference board Look for stepped borders, symmetrical framing, and geometric lettering. The metallic-looking accents reinforce the structure rather than defining it by themselves. ## Context Early twentieth century. The recipe is a modern web adaptation. [V&A: Art Deco](https://www.vam.ac.uk/collections/art-deco) ## Implementation files - [page](/territories/art-deco/) - [guide](/territories/art-deco/guide.md) - [brief](/territories/art-deco/brief.md) - [tokens](/territories/art-deco/tokens.json) - [checks](/territories/art-deco/checklist.md) - [example](/territories/art-deco/example/) - [versionedGuide](/territories/v1/art-deco/guide.md) - [versionedTokens](/territories/v1/art-deco/tokens.json) --- # Pop Art Schema: 1.0.0 · Content revision: f5fd78058ba2 Resource base: https://mejohnc.org (or the preview host used to obtain this file). An approach that draws on commercial imagery and popular culture. Repetition, enlarged everyday objects, and comic-print devices are possible techniques, not universal requirements. ## Visual family Pop & playful graphics · 1950s onward. Editorial family: shared visual vocabulary, not a claim of common origin. ## Visual cues - Mass-culture imagery - Repetition - Bold print effects ## Build it 1. Choose one recognizable everyday subject. 2. Use repeated panels deliberately. 3. Keep halftone away from small labels. ## Example A cultural magazine cover with repeated object photography and a plain article index. ## Typography Try heavy condensed headlines. Comic lettering should remain a deliberate reference rather than the default for all text. ## Practical consequences - Starting projects: Publication, Store, Portfolio. These are suggestions, not restrictions. - Reading/layout: compact; bold visual emphasis. - Asset work: Recognizable subject imagery is central to the effect. - Complexity: medium. Allow time for a coherent decorative or image layer and responsive checks. ## Limits Reducing the movement to comic dots or using copyrighted characters without considering their source. ## Reading the collected reference board The board mixes bold commercial lettering, comic imagery, and repeated graphic devices. These are contemporary popular-culture references rather than a survey of the historical movement. ## Context Twentieth-century movement. The recipe is a modern web adaptation. [MoMA: Pop art](https://www.moma.org/collection/terms/pop-art) ## Implementation files - [page](/territories/pop-art/) - [guide](/territories/pop-art/guide.md) - [brief](/territories/pop-art/brief.md) - [tokens](/territories/pop-art/tokens.json) - [checks](/territories/pop-art/checklist.md) - [example](/territories/pop-art/example/) - [versionedGuide](/territories/v1/pop-art/guide.md) - [versionedTokens](/territories/v1/pop-art/tokens.json) --- # Mid-Century Schema: 1.0.0 · Content revision: f5fd78058ba2 Resource base: https://mejohnc.org (or the preview host used to obtain this file). A screen interpretation of mid-century modern graphics and objects: economical forms, warm materials, and playful but controlled abstraction. ## Visual family Modernism & structure. Editorial family: shared visual vocabulary, not a claim of common origin. ## Visual cues - Organic geometry - Warm contrasting colors - Simple illustration ## Build it 1. Pair one organic shape with a clear grid. 2. Use muted colors with a darker text anchor. 3. Choose a small family of repeatable motifs. ## Example A homewares catalog with abstract shapes around straightforward product photography. ## Typography A geometric sans-serif or warm editorial serif can work. Let the illustration decide which feels coherent. ## Practical consequences - Starting projects: Store, Portfolio, Publication. These are suggestions, not restrictions. - Reading/layout: spacious; quiet visual emphasis. - Asset work: Simple organic illustration supports the warm palette. - Complexity: medium. Allow time for a coherent decorative or image layer and responsive checks. ## Limits Turning every section into a retro poster or using period decoration where users need precise controls. ## Reading the collected reference board Compare the flattened organic shapes and economical color combinations. The figures and abstract forms remain readable because the compositions use a few strong relationships. ## Context Contemporary screen interpretation. The recipe is a modern web adaptation. No single inventor or exact founding date is asserted for this interpretation. ## Implementation files - [page](/territories/mid-century/) - [guide](/territories/mid-century/guide.md) - [brief](/territories/mid-century/brief.md) - [tokens](/territories/mid-century/tokens.json) - [checks](/territories/mid-century/checklist.md) - [example](/territories/mid-century/example/) - [versionedGuide](/territories/v1/mid-century/guide.md) - [versionedTokens](/territories/v1/mid-century/tokens.json) --- # Modular Typography Schema: 1.0.0 · Content revision: f5fd78058ba2 Resource base: https://mejohnc.org (or the preview host used to obtain this file). A lettering approach built from repeated geometric units. The system is in the construction of the letters, not simply in using a grid for page layout. ## Visual family Modernism & structure. Editorial family: shared visual vocabulary, not a claim of common origin. ## Visual cues - Repeated letter parts - Consistent module - Systematic variation ## Build it 1. Define a small set of strokes or tiles. 2. Use constructed lettering for short headings. 3. Use a conventional face for reading and controls. ## Example An exhibition identity whose title is constructed from repeatable tiles above a readable program. ## Typography Construct a title from repeated units, then use a conventional text face below it. Show the module if construction is the subject. ## Practical consequences - Starting projects: Portfolio, Publication. These are suggestions, not restrictions. - Reading/layout: compact; bold visual emphasis. - Asset work: Constructed display lettering needs intentional letterform work. - Complexity: medium. Allow time for a coherent decorative or image layer and responsive checks. ## Limits Forcing modular display letters into paragraphs or calling any sans-serif grid layout modular typography. ## Reading the collected reference board Look at the repeated shapes and constructed letter parts. A grid is only the starting point: the defining question is whether the letterforms share a repeatable module. ## Context Contemporary screen interpretation. The recipe is a modern web adaptation. No single inventor or exact founding date is asserted for this interpretation. ## Implementation files - [page](/territories/modular-typography/) - [guide](/territories/modular-typography/guide.md) - [brief](/territories/modular-typography/brief.md) - [tokens](/territories/modular-typography/tokens.json) - [checks](/territories/modular-typography/checklist.md) - [example](/territories/modular-typography/example/) - [versionedGuide](/territories/v1/modular-typography/guide.md) - [versionedTokens](/territories/v1/modular-typography/tokens.json) --- # Y2K Schema: 1.0.0 · Content revision: f5fd78058ba2 Resource base: https://mejohnc.org (or the preview host used to obtain this file). A contemporary reading of late-1990s and early-2000s digital futurism. Chrome, translucent plastics, and inflated forms distinguish it from a 1980s synthwave scene. ## Visual family Digital nostalgia. Editorial family: shared visual vocabulary, not a claim of common origin. ## Visual cues - Chrome and gloss - Inflated shapes - Digital futurism ## Build it 1. Choose one metallic focal object. 2. Pair experimental display type with simple labels. 3. Use a limited bright accent palette. ## Example A music release page with a chrome title object and simple track listings. ## Typography Extended or rounded display lettering can supply the period reference. Keep chrome out of body text. ## Practical consequences - Starting projects: Portfolio, Store. These are suggestions, not restrictions. - Reading/layout: spacious; bold visual emphasis. - Asset work: A single original chrome or translucent object can anchor the page. - Complexity: medium. Allow time for a coherent decorative or image layer and responsive checks. ## Limits Mixing every retro decade together or applying metallic gradients to body text. ## Reading the collected reference board Notice the metallic objects, translucent forms, and shiny digital surfaces. The board mixes millennium-era references with later revival graphics. ## Context Contemporary screen interpretation. The recipe is a modern web adaptation. No single inventor or exact founding date is asserted for this interpretation. ## Implementation files - [page](/territories/retro-y2k/) - [guide](/territories/retro-y2k/guide.md) - [brief](/territories/retro-y2k/brief.md) - [tokens](/territories/retro-y2k/tokens.json) - [checks](/territories/retro-y2k/checklist.md) - [example](/territories/retro-y2k/example/) - [versionedGuide](/territories/v1/retro-y2k/guide.md) - [versionedTokens](/territories/v1/retro-y2k/tokens.json) --- # Cybercore Schema: 1.0.0 · Content revision: f5fd78058ba2 Resource base: https://mejohnc.org (or the preview host used to obtain this file). A broad internet aesthetic drawing on fictional hacker interfaces and digital dystopia. It is expressive fiction, not evidence that a product is technically sophisticated. ## Visual family Digital nostalgia. Editorial family: shared visual vocabulary, not a claim of common origin. ## Visual cues - Dark field - Neon accents - Terminal-like detail ## Build it 1. Use monospace for actual structured information. 2. Keep glitch effects in static artwork. 3. Give real system states explicit labels. ## Example A fiction anthology with terminal-inspired chapter labels and normal reading typography. ## Typography Use monospace for structured labels and a simple sans-serif for longer reading. Do not replace letters with unreadable symbols. ## Practical consequences - Starting projects: Portfolio, Publication. These are suggestions, not restrictions. - Reading/layout: compact; bold visual emphasis. - Asset work: Static digital artwork works; fake live telemetry does not add value. - Complexity: medium. Allow time for a coherent decorative or image layer and responsive checks. ## Limits Fake telemetry, flashing warnings, or presenting decorative code as real diagnostic data. ## Reading the collected reference board Look at the metallic lettering, dark surfaces, and electric purple-blue accents. These are fictional digital moods, not demonstrations of actual cybersecurity tools. ## Context Contemporary screen interpretation. The recipe is a modern web adaptation. No single inventor or exact founding date is asserted for this interpretation. ## Implementation files - [page](/territories/cybercore/) - [guide](/territories/cybercore/guide.md) - [brief](/territories/cybercore/brief.md) - [tokens](/territories/cybercore/tokens.json) - [checks](/territories/cybercore/checklist.md) - [example](/territories/cybercore/example/) - [versionedGuide](/territories/v1/cybercore/guide.md) - [versionedTokens](/territories/v1/cybercore/tokens.json) --- # Synthwave Schema: 1.0.0 · Content revision: f5fd78058ba2 Resource base: https://mejohnc.org (or the preview host used to obtain this file). A retro-futurist visual vocabulary associated with synthwave music, drawing heavily on imagined 1980s nightscapes. It differs from vaporwave's collage and corporate nostalgia. ## Visual family Digital nostalgia. Editorial family: shared visual vocabulary, not a claim of common origin. ## Visual cues - Neon horizon - Sunset bands - Perspective grid ## Build it 1. Keep the horizon in an illustration. 2. Choose two neon accents. 3. Use a dark solid surface for track and event details. ## Example A concert page with a sunset poster and a clean date-and-ticket panel. ## Typography An italic or angular display title can suggest speed. Use solid, unglowing text for event details. ## Practical consequences - Starting projects: Portfolio, Publication, Store. These are suggestions, not restrictions. - Reading/layout: spacious; bold visual emphasis. - Asset work: A horizon or poster illustration carries the genre reference. - Complexity: medium. Allow time for a coherent decorative or image layer and responsive checks. ## Limits Continuous glowing animation, unreadable outlined text, or calling it an original 1980s interface standard. ## Reading the collected reference board The board includes sunset, palm, neon, and retro display cues. Separate the imagined 1980s atmosphere from the more recent music and graphic culture using it. ## Context Contemporary screen interpretation. The recipe is a modern web adaptation. No single inventor or exact founding date is asserted for this interpretation. ## Implementation files - [page](/territories/synthwave/) - [guide](/territories/synthwave/guide.md) - [brief](/territories/synthwave/brief.md) - [tokens](/territories/synthwave/tokens.json) - [checks](/territories/synthwave/checklist.md) - [example](/territories/synthwave/example/) - [versionedGuide](/territories/v1/synthwave/guide.md) - [versionedTokens](/territories/v1/synthwave/tokens.json) --- # Vaporwave Schema: 1.0.0 · Content revision: f5fd78058ba2 Resource base: https://mejohnc.org (or the preview host used to obtain this file). An internet-era collage aesthetic associated with vaporwave music, combining commercial nostalgia, surreal space, and degraded digital media. Its tone can be ambiguous rather than purely celebratory. ## Visual family Digital nostalgia. Editorial family: shared visual vocabulary, not a claim of common origin. ## Visual cues - Pastel digital color - Surreal collage - Obsolete media references ## Build it 1. Compose one deliberate collage. 2. Use degraded texture as an image layer. 3. Keep navigation outside the distortion. ## Example An album archive with a surreal cover collage and plainly labeled listening links. ## Typography Monospace and restrained system typography can reference older software. Use meaningful language rather than decorative foreign glyphs. ## Practical consequences - Starting projects: Portfolio, Publication. These are suggestions, not restrictions. - Reading/layout: spacious; bold visual emphasis. - Asset work: A purposeful collage matters more than adding random retro symbols. - Complexity: medium. Allow time for a coherent decorative or image layer and responsive checks. ## Limits Random Japanese text as decoration, inaccessible glitch effects, or assuming every work makes the same political argument. ## Reading the collected reference board Compare the pastel-neon collage, floating objects, and artificial spatial depth. The examples emphasize a contemporary commercial interpretation of the mood. ## Context Contemporary screen interpretation. The recipe is a modern web adaptation. No single inventor or exact founding date is asserted for this interpretation. ## Implementation files - [page](/territories/vaporwave/) - [guide](/territories/vaporwave/guide.md) - [brief](/territories/vaporwave/brief.md) - [tokens](/territories/vaporwave/tokens.json) - [checks](/territories/vaporwave/checklist.md) - [example](/territories/vaporwave/example/) - [versionedGuide](/territories/v1/vaporwave/guide.md) - [versionedTokens](/territories/v1/vaporwave/tokens.json) --- # Coquette Schema: 1.0.0 · Content revision: f5fd78058ba2 Resource base: https://mejohnc.org (or the preview host used to obtain this file). A contemporary romantic aesthetic using bows, lace, soft colors, and intimate decorative details. Those visual choices do not define the gender or personality of the audience. ## Visual family Romantic worlds. Editorial family: shared visual vocabulary, not a claim of common origin. ## Visual cues - Ribbon motifs - Soft pinks - Delicate decorative framing ## Build it 1. Use one ribbon or border motif. 2. Keep text darker than the pastel surface. 3. Reserve script lettering for a short accent. ## Example A stationery collection with ribbon photography and straightforward product descriptions. ## Typography A restrained serif with an optional short script accent works. Use plain typography for prices and controls. ## Practical consequences - Starting projects: Store, Portfolio. These are suggestions, not restrictions. - Reading/layout: spacious; quiet visual emphasis. - Asset work: A small ribbon or floral motif is sufficient to establish a theme. - Complexity: medium. Allow time for a coherent decorative or image layer and responsive checks. ## Limits Gendered assumptions, unreadable script, or decorative flourishes crowding controls. ## Reading the collected reference board Look at the romantic lettering, pink palette, and soft decorative details. Some examples overlap with broader beauty and fashion branding rather than showing a sharply bounded style. ## Context Contemporary screen interpretation. The recipe is a modern web adaptation. No single inventor or exact founding date is asserted for this interpretation. ## Implementation files - [page](/territories/coquette/) - [guide](/territories/coquette/guide.md) - [brief](/territories/coquette/brief.md) - [tokens](/territories/coquette/tokens.json) - [checks](/territories/coquette/checklist.md) - [example](/territories/coquette/example/) - [versionedGuide](/territories/v1/coquette/guide.md) - [versionedTokens](/territories/v1/coquette/tokens.json) --- # Dark Academia Schema: 1.0.0 · Content revision: f5fd78058ba2 Resource base: https://mejohnc.org (or the preview host used to obtain this file). A contemporary scholarly mood using dark wood, books, archival imagery, and subdued light. Occult and fantasy motifs are optional variants, not the definition of academia. ## Visual family Romantic worlds. Editorial family: shared visual vocabulary, not a claim of common origin. ## Visual cues - Dark warm surfaces - Bookish typography - Archival imagery ## Build it 1. Use a sturdy serif for titles. 2. Show real bibliographic or collection details. 3. Keep the reading surface lighter or the text strongly contrasted. ## Example A reading journal with book details, dated notes, and a restrained library palette. ## Typography A sturdy book serif suits titles and reading. Keep blackletter or occult display lettering out of ordinary paragraphs. ## Practical consequences - Starting projects: Publication, Portfolio. These are suggestions, not restrictions. - Reading/layout: spacious; quiet visual emphasis. - Asset work: Book and archive imagery is helpful but not required for readable notes. - Complexity: low. Mostly standard CSS; imagery may still need preparation. ## Limits Equating scholarship with occult imagery or making a dark page difficult to read. ## Reading the collected reference board The references include book covers, shadowed architecture, and fantasy imagery. The fantasy elements are one variation; a reading journal can use the scholarly atmosphere without them. ## Context Contemporary screen interpretation. The recipe is a modern web adaptation. No single inventor or exact founding date is asserted for this interpretation. ## Implementation files - [page](/territories/dark-academia/) - [guide](/territories/dark-academia/guide.md) - [brief](/territories/dark-academia/brief.md) - [tokens](/territories/dark-academia/tokens.json) - [checks](/territories/dark-academia/checklist.md) - [example](/territories/dark-academia/example/) - [versionedGuide](/territories/v1/dark-academia/guide.md) - [versionedTokens](/territories/v1/dark-academia/tokens.json) --- # Light Academia Schema: 1.0.0 · Content revision: f5fd78058ba2 Resource base: https://mejohnc.org (or the preview host used to obtain this file). A contemporary scholarly mood centered on daylight, paper, and reflective reading. It shares the bookish cues of dark academia with a lighter tonal range. ## Visual family Romantic worlds. Editorial family: shared visual vocabulary, not a claim of common origin. ## Visual cues - Paper colors - Daylight imagery - Scholarly hierarchy ## Build it 1. Use clear chapter headings. 2. Limit the text measure. 3. Pair warm surfaces with dark ink-colored text. ## Example A literature notebook with quotations, sources, and spacious chapter navigation. ## Typography Use a bookish serif, comfortable line-height, and clear footnotes. A light palette is no reason for faint type. ## Practical consequences - Starting projects: Publication, Portfolio. These are suggestions, not restrictions. - Reading/layout: spacious; quiet visual emphasis. - Asset work: Paper tone and typesetting can carry a text-led page. - Complexity: low. Mostly standard CSS; imagery may still need preparation. ## Limits Faint beige text or decorative book imagery replacing useful information about the material. ## Reading the collected reference board Notice the warm paper, classical image fragments, and bookish typography. Several examples overlap with religious or classical editorial graphics. ## Context Contemporary screen interpretation. The recipe is a modern web adaptation. No single inventor or exact founding date is asserted for this interpretation. ## Implementation files - [page](/territories/light-academia/) - [guide](/territories/light-academia/guide.md) - [brief](/territories/light-academia/brief.md) - [tokens](/territories/light-academia/tokens.json) - [checks](/territories/light-academia/checklist.md) - [example](/territories/light-academia/example/) - [versionedGuide](/territories/v1/light-academia/guide.md) - [versionedTokens](/territories/v1/light-academia/tokens.json) --- # Anthropomorphic Schema: 1.0.0 · Content revision: f5fd78058ba2 Resource base: https://mejohnc.org (or the preview host used to obtain this file). A character-based treatment that gives objects human expressions or behavior. It can add identity without pretending the interface has feelings or understands the user. ## Visual family Pop & playful graphics. Editorial family: shared visual vocabulary, not a claim of common origin. ## Visual cues - Expressive characters - Human-like gestures - Consistent character rules ## Build it 1. Give the character a limited supporting role. 2. Keep instructions explicit in text. 3. Use the same expression consistently for the same state. ## Example A language exercise with a small character illustration beside a factual answer explanation. ## Typography Use a friendly but conventional sans-serif. The character can express personality without turning every label into dialogue. ## Practical consequences - Starting projects: Store, Portfolio. These are suggestions, not restrictions. - Reading/layout: spacious; bold visual emphasis. - Asset work: An original character and a few consistent expressions are needed. - Complexity: medium. Allow time for a coherent decorative or image layer and responsive checks. ## Limits Guilt-based reminders, emotional pressure, or mascots interrupting routine tasks. ## Reading the collected reference board Look at how the illustrated objects gain expressions and gestures. Their personality is conveyed in the artwork, while the surrounding text can stay direct. ## Context Contemporary screen interpretation. The recipe is a modern web adaptation. No single inventor or exact founding date is asserted for this interpretation. ## Implementation files - [page](/territories/anthropomorphic/) - [guide](/territories/anthropomorphic/guide.md) - [brief](/territories/anthropomorphic/brief.md) - [tokens](/territories/anthropomorphic/tokens.json) - [checks](/territories/anthropomorphic/checklist.md) - [example](/territories/anthropomorphic/example/) - [versionedGuide](/territories/v1/anthropomorphic/guide.md) - [versionedTokens](/territories/v1/anthropomorphic/tokens.json) --- # Bohemian Schema: 1.0.0 · Content revision: f5fd78058ba2 Resource base: https://mejohnc.org (or the preview host used to obtain this file). An eclectic composition of natural texture, collected objects, and varied patterns. Specific references matter more than a generic claim of being global or exotic. ## Visual family Craft, place & natural materials. Editorial family: shared visual vocabulary, not a claim of common origin. ## Visual cues - Layered texture - Collected objects - Earthy color ## Build it 1. Select patterns from identifiable sources. 2. Balance a busy image with a quiet reading area. 3. Use a repeated spacing system. ## Example An independent maker's catalog with credited textiles and direct descriptions of materials. ## Typography Use a warm serif or simple sans-serif to hold the layered imagery together. Limit the number of display treatments. ## Practical consequences - Starting projects: Store, Portfolio. These are suggestions, not restrictions. - Reading/layout: spacious; quiet visual emphasis. - Asset work: Specific, credited material imagery is more useful than generic patterns. - Complexity: medium. Allow time for a coherent decorative or image layer and responsive checks. ## Limits Treating distinct cultures as interchangeable decoration or making every layer compete for attention. ## Reading the collected reference board The board emphasizes botanical shapes, earthy color, and contemporary lifestyle posters. It is a narrow graphic selection, not a representation of every tradition described as bohemian. ## Context Contemporary screen interpretation. The recipe is a modern web adaptation. No single inventor or exact founding date is asserted for this interpretation. ## Implementation files - [page](/territories/bohemian/) - [guide](/territories/bohemian/guide.md) - [brief](/territories/bohemian/brief.md) - [tokens](/territories/bohemian/tokens.json) - [checks](/territories/bohemian/checklist.md) - [example](/territories/bohemian/example/) - [versionedGuide](/territories/v1/bohemian/guide.md) - [versionedTokens](/territories/v1/bohemian/tokens.json) --- # Shabby Chic Schema: 1.0.0 · Content revision: f5fd78058ba2 Resource base: https://mejohnc.org (or the preview host used to obtain this file). An interiors-inspired treatment of weathered finishes, vintage florals, and soft color. On a screen, the worn effect belongs to imagery and framing rather than text clarity. ## Visual family Craft, place & natural materials. Editorial family: shared visual vocabulary, not a claim of common origin. ## Visual cues - Weathered finish - Vintage floral - Soft pastel ## Build it 1. Use distressing on a border or photo. 2. Keep body type crisp. 3. Repeat one floral motif sparingly. ## Example A vintage homewares listing with condition photographs and clearly labeled item details. ## Typography A serif with a short handwritten accent can establish the mood. Do not distress the text itself. ## Practical consequences - Starting projects: Store, Publication. These are suggestions, not restrictions. - Reading/layout: spacious; quiet visual emphasis. - Asset work: Use a restrained floral or worn-paper image treatment. - Complexity: medium. Allow time for a coherent decorative or image layer and responsive checks. ## Limits Distressing the actual text, low-contrast pastel controls, or manufacturing age as a factual provenance claim. ## Reading the collected reference board Look for faded color, floral decoration, and nostalgic domestic imagery. Keep the weathering in the artwork while preserving crisp captions and controls. ## Context Contemporary screen interpretation. The recipe is a modern web adaptation. No single inventor or exact founding date is asserted for this interpretation. ## Implementation files - [page](/territories/shabby-chic/) - [guide](/territories/shabby-chic/guide.md) - [brief](/territories/shabby-chic/brief.md) - [tokens](/territories/shabby-chic/tokens.json) - [checks](/territories/shabby-chic/checklist.md) - [example](/territories/shabby-chic/example/) - [versionedGuide](/territories/v1/shabby-chic/guide.md) - [versionedTokens](/territories/v1/shabby-chic/tokens.json) --- # Cottagecore Schema: 1.0.0 · Content revision: f5fd78058ba2 Resource base: https://mejohnc.org (or the preview host used to obtain this file). A contemporary pastoral aesthetic of gardens, domestic craft, and rural imagery. It is a mood and storytelling vocabulary, not evidence of how an object was produced. ## Visual family Romantic worlds. Editorial family: shared visual vocabulary, not a claim of common origin. ## Visual cues - Botanical detail - Domestic craft - Pastoral imagery ## Build it 1. Use real material or process photographs. 2. Keep botanical framing outside the text. 3. Let captions explain the pictured activity. ## Example A gardening notebook with seasonal photographs, plant names, and practical observations. ## Typography Use a readable serif for the journal voice and a plain face for plant names, dates, and instructions. ## Practical consequences - Starting projects: Publication, Store, Portfolio. These are suggestions, not restrictions. - Reading/layout: spacious; quiet visual emphasis. - Asset work: Garden, craft, or process photography grounds the visual mood. - Complexity: medium. Allow time for a coherent decorative or image layer and responsive checks. ## Limits Romantic imagery standing in for product facts or implying a handmade origin without support. ## Reading the collected reference board Notice the garden scenes, domestic objects, and handmade-looking illustration. Captions and practical details can make this imagery more than a general rural mood. ## Context Contemporary screen interpretation. The recipe is a modern web adaptation. No single inventor or exact founding date is asserted for this interpretation. ## Implementation files - [page](/territories/cottagecore/) - [guide](/territories/cottagecore/guide.md) - [brief](/territories/cottagecore/brief.md) - [tokens](/territories/cottagecore/tokens.json) - [checks](/territories/cottagecore/checklist.md) - [example](/territories/cottagecore/example/) - [versionedGuide](/territories/v1/cottagecore/guide.md) - [versionedTokens](/territories/v1/cottagecore/tokens.json) --- # Wabi-Sabi Schema: 1.0.0 · Content revision: f5fd78058ba2 Resource base: https://mejohnc.org (or the preview host used to obtain this file). A Japanese aesthetic reference associated with transience, irregularity, and the character of materials. A restrained screen interpretation should not flatten that context into generic cozy branding. ## Visual family Craft, place & natural materials. Editorial family: shared visual vocabulary, not a claim of common origin. ## Visual cues - Material character - Irregular detail - Restraint ## Build it 1. Use real texture with visible variation. 2. Allow asymmetry in imagery. 3. Keep navigation and text alignment dependable. ## Example A ceramics archive with close photographs of surfaces and concise notes about each object. ## Typography A quiet serif or sans-serif can work. Irregular material photography supplies the character; imitation handwriting is unnecessary. ## Practical consequences - Starting projects: Portfolio, Store, Publication. These are suggestions, not restrictions. - Reading/layout: spacious; quiet visual emphasis. - Asset work: Real material variation is difficult to replace with a generic texture. - Complexity: low. Mostly standard CSS; imagery may still need preparation. ## Limits Calling any beige interface wabi-sabi, treating kintsugi as its synonym, or simulating imperfection in functional controls. ## Reading the collected reference board The board emphasizes quiet material imagery and restrained composition. These contemporary graphics are adjacent references; the tea-ceremony source provides more specific cultural context. ## Context Japanese aesthetic reference. The recipe is a modern web adaptation. [The Met: Japanese tea and material aesthetics](https://www.metmuseum.org/essays/the-japanese-tea-ceremony) ## Implementation files - [page](/territories/wabi-sabi/) - [guide](/territories/wabi-sabi/guide.md) - [brief](/territories/wabi-sabi/brief.md) - [tokens](/territories/wabi-sabi/tokens.json) - [checks](/territories/wabi-sabi/checklist.md) - [example](/territories/wabi-sabi/example/) - [versionedGuide](/territories/v1/wabi-sabi/guide.md) - [versionedTokens](/territories/v1/wabi-sabi/tokens.json) --- # Neoclassical Schema: 1.0.0 · Content revision: f5fd78058ba2 Resource base: https://mejohnc.org (or the preview host used to obtain this file). A visual reference to the ordered proportions and antique forms of Neoclassicism. A digital adaptation can borrow its symmetry without pretending a typeface is historically authentic. ## Visual family Ornament & tradition · c. 1760 onward. Editorial family: shared visual vocabulary, not a claim of common origin. ## Visual cues - Symmetrical structure - Classical proportion - Restrained ornament ## Build it 1. Center the main title sparingly. 2. Use balanced margins and clear rules. 3. Keep supporting text conventionally aligned. ## Example A museum collection page with a balanced introduction and a clear object catalog. ## Typography Use carefully proportioned serif titles. Roman-style capitals are best kept to a short heading, not a paragraph. ## Practical consequences - Starting projects: Publication, Store. These are suggestions, not restrictions. - Reading/layout: spacious; quiet visual emphasis. - Asset work: A balanced layout can work with a single object or architectural image. - Complexity: low. Mostly standard CSS; imagery may still need preparation. ## Limits Treating all classical ornament as one period or centering long paragraphs for supposed elegance. ## Reading the collected reference board The board mixes antique sculpture with contemporary dramatic poster design. Study the classical references while distinguishing them from an original Neoclassical composition. ## Context Eighteenth- and nineteenth-century reference. The recipe is a modern web adaptation. [The Met: Neoclassicism](https://www.metmuseum.org/essays/neoclassicism) ## Implementation files - [page](/territories/neoclassical/) - [guide](/territories/neoclassical/guide.md) - [brief](/territories/neoclassical/brief.md) - [tokens](/territories/neoclassical/tokens.json) - [checks](/territories/neoclassical/checklist.md) - [example](/territories/neoclassical/example/) - [versionedGuide](/territories/v1/neoclassical/guide.md) - [versionedTokens](/territories/v1/neoclassical/tokens.json) --- # Baroque Schema: 1.0.0 · Content revision: f5fd78058ba2 Resource base: https://mejohnc.org (or the preview host used to obtain this file). A visual reference to dramatic movement, layered composition, and rich ornament in Baroque art. Its useful digital translation is controlled emphasis rather than maximum decoration everywhere. ## Visual family Ornament & tradition · 1600s–mid-1700s. Editorial family: shared visual vocabulary, not a claim of common origin. ## Visual cues - Dramatic focal point - Layered ornament - Strong tonal contrast ## Build it 1. Choose one dominant image. 2. Concentrate ornament around its frame. 3. Let supporting information remain quiet. ## Example An opera program with a dramatic production image and an uncomplicated booking panel. ## Typography A rich serif display treatment can balance the imagery. This is a modern pairing, not a claim that the typeface dates to the Baroque period. ## Practical consequences - Starting projects: Publication, Store. These are suggestions, not restrictions. - Reading/layout: spacious; bold visual emphasis. - Asset work: One dramatic artwork and a controlled frame establish the direction. - Complexity: medium. Allow time for a coherent decorative or image layer and responsive checks. ## Limits Making every component compete for drama or describing later typefaces as authentic Baroque typography. ## Reading the collected reference board Look at the ornate frames and dense decorative edges. The board is useful for framing ideas but does not capture the full range of Baroque painting, architecture, and sculpture. ## Context Contemporary screen interpretation. The recipe is a modern web adaptation. [V&A: The Baroque style](https://www.vam.ac.uk/articles/the-baroque-style) ## Implementation files - [page](/territories/baroque/) - [guide](/territories/baroque/guide.md) - [brief](/territories/baroque/brief.md) - [tokens](/territories/baroque/tokens.json) - [checks](/territories/baroque/checklist.md) - [example](/territories/baroque/example/) - [versionedGuide](/territories/v1/baroque/guide.md) - [versionedTokens](/territories/v1/baroque/tokens.json) --- # Victorian Schema: 1.0.0 · Content revision: f5fd78058ba2 Resource base: https://mejohnc.org (or the preview host used to obtain this file). A broad reference to nineteenth-century British visual culture, which contained many competing revival styles. Ornate print is one useful source, not a single universal Victorian interface language. ## Visual family Ornament & tradition. Editorial family: shared visual vocabulary, not a claim of common origin. ## Visual cues - Decorative print - Layered borders - Mixed display lettering ## Build it 1. Use one period-inspired title treatment. 2. Give metadata its own simple type style. 3. Use ornament to mark sections. ## Example A local-history exhibition page with a poster-like title and readable artifact captions. ## Typography Try one slab-serif or ornamental headline. Pair it with a quiet reading face rather than a collection of competing period fonts. ## Practical consequences - Starting projects: Publication, Store. These are suggestions, not restrictions. - Reading/layout: compact; bold visual emphasis. - Asset work: One period-inspired title or border needs careful drawing or sourcing. - Complexity: medium. Allow time for a coherent decorative or image layer and responsive checks. ## Limits Stacking many novelty fonts or presenting the entire period as one dark, luxurious look. ## Reading the collected reference board Notice the layered borders, ornamental lettering, and printed ephemera. The examples are period-inspired graphics rather than proof of a single uniform Victorian style. ## Context Contemporary screen interpretation. The recipe is a modern web adaptation. No single inventor or exact founding date is asserted for this interpretation. ## Implementation files - [page](/territories/victorian/) - [guide](/territories/victorian/guide.md) - [brief](/territories/victorian/brief.md) - [tokens](/territories/victorian/tokens.json) - [checks](/territories/victorian/checklist.md) - [example](/territories/victorian/example/) - [versionedGuide](/territories/v1/victorian/guide.md) - [versionedTokens](/territories/v1/victorian/tokens.json) --- # Art Nouveau Schema: 1.0.0 · Content revision: f5fd78058ba2 Resource base: https://mejohnc.org (or the preview host used to obtain this file). A decorative approach associated with flowing lines and stylized natural forms across several media. The relationship between image, lettering, and border matters more than adding a floral icon. ## Visual family Ornament & tradition · 1890s–1910s. Editorial family: shared visual vocabulary, not a claim of common origin. ## Visual cues - Sinuous line - Botanical structure - Integrated framing ## Build it 1. Draw one continuous framing motif. 2. Keep display lettering short. 3. Use plain body text inside the frame. ## Example A botanical exhibition page whose border follows the composition of its main illustration. ## Typography Use organic display lettering for a short title. Keep the smaller text conventional so the border and lettering do not compete. ## Practical consequences - Starting projects: Publication, Store, Portfolio. These are suggestions, not restrictions. - Reading/layout: spacious; quiet visual emphasis. - Asset work: A coherent botanical line drawing is the main asset investment. - Complexity: medium. Allow time for a coherent decorative or image layer and responsive checks. ## Limits Generic flowers without the line structure or elaborate letterforms in controls and paragraphs. ## Reading the collected reference board Compare the continuous curves, botanical framing, and integrated figure-and-letter compositions. Those relationships are more distinctive than a floral motif on its own. ## Context Around 1900. The recipe is a modern web adaptation. [V&A: Art Nouveau](https://www.vam.ac.uk/collections/art-nouveau) ## Implementation files - [page](/territories/art-nouveau/) - [guide](/territories/art-nouveau/guide.md) - [brief](/territories/art-nouveau/brief.md) - [tokens](/territories/art-nouveau/tokens.json) - [checks](/territories/art-nouveau/checklist.md) - [example](/territories/art-nouveau/example/) - [versionedGuide](/territories/v1/art-nouveau/guide.md) - [versionedTokens](/territories/v1/art-nouveau/tokens.json) --- # Gothic Schema: 1.0.0 · Content revision: f5fd78058ba2 Resource base: https://mejohnc.org (or the preview host used to obtain this file). A modern graphic interpretation of Gothic architectural references, including pointed forms and tracery. Black palettes and occult motifs belong to some later reinterpretations, not all Gothic art. ## Visual family Ornament & tradition · Mid-1100s onward. Editorial family: shared visual vocabulary, not a claim of common origin. ## Visual cues - Pointed forms - Vertical emphasis - Tracery ## Build it 1. Use the arch as an image frame. 2. Reserve blackletter for brief titles. 3. Keep navigation in a highly legible face. ## Example An architectural photo essay with arch-shaped images and clear historical captions. ## Typography Blackletter may suit a short display title; use an open, readable serif or sans-serif for supporting text. ## Practical consequences - Starting projects: Publication, Portfolio. These are suggestions, not restrictions. - Reading/layout: spacious; bold visual emphasis. - Asset work: Architectural or genre artwork helps clarify which interpretation you mean. - Complexity: medium. Allow time for a coherent decorative or image layer and responsive checks. ## Limits Conflating medieval architecture, Gothic revival, and contemporary goth culture without explanation. ## Reading the collected reference board The board combines architecture, horror covers, and later goth-associated graphics. Use the distinction between medieval form and contemporary genre imagery when choosing a reference. ## Context Contemporary screen interpretation. The recipe is a modern web adaptation. [The Met: Gothic by Design](https://www.metmuseum.org/de/exhibitions/gothic-by-design-the-dawn-of-architectural-draftsmanship/inside-the-galleries) ## Implementation files - [page](/territories/gothic/) - [guide](/territories/gothic/guide.md) - [brief](/territories/gothic/brief.md) - [tokens](/territories/gothic/tokens.json) - [checks](/territories/gothic/checklist.md) - [example](/territories/gothic/example/) - [versionedGuide](/territories/v1/gothic/guide.md) - [versionedTokens](/territories/v1/gothic/tokens.json) --- # Steampunk Schema: 1.0.0 · Content revision: f5fd78058ba2 Resource base: https://mejohnc.org (or the preview host used to obtain this file). A speculative genre combining historical industrial imagery with imagined technology. Gears and brass establish fiction; they should not obscure how a real interface works. ## Visual family Digital nostalgia. Editorial family: shared visual vocabulary, not a claim of common origin. ## Visual cues - Industrial fantasy - Mechanical detail - Antique material cues ## Build it 1. Give decorative mechanisms a plausible visual role. 2. Use a simple control layout. 3. Separate fictional gauges from real data. ## Example A fictional invention catalog with mechanical illustrations and readable specifications. ## Typography Slab-serif display lettering can reference industrial print. Monospace is useful for actual specifications, not ornamental pseudo-data. ## Practical consequences - Starting projects: Portfolio, Publication. These are suggestions, not restrictions. - Reading/layout: compact; bold visual emphasis. - Asset work: Coherent fictional machinery takes more work than decorative gears. - Complexity: high. Custom artwork or lettering is central to the full expression. ## Limits Random gears on every surface or unlabeled dials that imply nonexistent measurements. ## Reading the collected reference board Look for invented machinery, antique print, and industrial fantasy. The examples are speculative genre graphics, not documentation of functioning historical devices. ## Context Contemporary screen interpretation. The recipe is a modern web adaptation. No single inventor or exact founding date is asserted for this interpretation. ## Implementation files - [page](/territories/steampunk/) - [guide](/territories/steampunk/guide.md) - [brief](/territories/steampunk/brief.md) - [tokens](/territories/steampunk/tokens.json) - [checks](/territories/steampunk/checklist.md) - [example](/territories/steampunk/example/) - [versionedGuide](/territories/v1/steampunk/guide.md) - [versionedTokens](/territories/v1/steampunk/tokens.json) --- # Ethereal Schema: 1.0.0 · Content revision: f5fd78058ba2 Resource base: https://mejohnc.org (or the preview host used to obtain this file). An atmospheric treatment using soft light, translucent imagery, and spacious composition. Softness belongs to the imagery; text and controls still need definite edges. ## Visual family Romantic worlds. Editorial family: shared visual vocabulary, not a claim of common origin. ## Visual cues - Diffused light - Soft layered imagery - Open space ## Build it 1. Use a soft image as the focal point. 2. Place reading text on a stable surface. 3. Keep movement optional and minimal. ## Example A photography portfolio with luminous images and restrained, legible captions. ## Typography Use a clear serif or sans-serif at a comfortable weight. Avoid hairline strokes that vanish into luminous imagery. ## Practical consequences - Starting projects: Portfolio, Publication. These are suggestions, not restrictions. - Reading/layout: spacious; quiet visual emphasis. - Asset work: Luminous photography or illustration carries the effect. - Complexity: medium. Allow time for a coherent decorative or image layer and responsive checks. ## Limits Using low contrast as the defining principle or making the cursor chase floating controls. ## Reading the collected reference board The board uses blur, luminous color, and softened image boundaries. Some tiles are darker and more energetic than a pastel interpretation, showing that light treatment matters more than hue alone. ## Context Contemporary screen interpretation. The recipe is a modern web adaptation. No single inventor or exact founding date is asserted for this interpretation. ## Implementation files - [page](/territories/ethereal/) - [guide](/territories/ethereal/guide.md) - [brief](/territories/ethereal/brief.md) - [tokens](/territories/ethereal/tokens.json) - [checks](/territories/ethereal/checklist.md) - [example](/territories/ethereal/example/) - [versionedGuide](/territories/v1/ethereal/guide.md) - [versionedTokens](/territories/v1/ethereal/tokens.json) --- # Filigree Schema: 1.0.0 · Content revision: f5fd78058ba2 Resource base: https://mejohnc.org (or the preview host used to obtain this file). A reference to delicate ornamental metalwork made from fine threads. In screen graphics, the useful feature is a coherent network of fine lines around a clear central subject. ## Visual family Ornament & tradition. Editorial family: shared visual vocabulary, not a claim of common origin. ## Visual cues - Fine interlaced lines - Delicate border - Ornamental rhythm ## Build it 1. Use vector artwork for clean scaling. 2. Keep detail away from small text. 3. Reduce border complexity on narrow screens. ## Example A craft catalog with detailed object photographs and a fine ornamental heading frame. ## Typography Pair ornate borders with a restrained serif. Do not add a second layer of flourishes to every letter. ## Practical consequences - Starting projects: Store, Publication. These are suggestions, not restrictions. - Reading/layout: spacious; quiet visual emphasis. - Asset work: Intricate vector ornament needs attention at multiple display sizes. - Complexity: high. Custom artwork or lettering is central to the full expression. ## Limits Calling any flourish filigree or using hairline decoration as an essential control boundary. ## Reading the collected reference board Notice the fine ornamental lines framing the titles. These are graphic interpretations of ornamental craft; use the line rhythm without treating every flourish as literal metalwork. ## Context Contemporary screen interpretation. The recipe is a modern web adaptation. No single inventor or exact founding date is asserted for this interpretation. ## Implementation files - [page](/territories/filigree/) - [guide](/territories/filigree/guide.md) - [brief](/territories/filigree/brief.md) - [tokens](/territories/filigree/tokens.json) - [checks](/territories/filigree/checklist.md) - [example](/territories/filigree/example/) - [versionedGuide](/territories/v1/filigree/guide.md) - [versionedTokens](/territories/v1/filigree/tokens.json) --- # Acanthus Schema: 1.0.0 · Content revision: f5fd78058ba2 Resource base: https://mejohnc.org (or the preview host used to obtain this file). An ornamental reference to stylized acanthus foliage used in classical architectural decoration. It is a specific leaf-and-scroll vocabulary rather than a synonym for all botanical ornament. ## Visual family Ornament & tradition. Editorial family: shared visual vocabulary, not a claim of common origin. ## Visual cues - Stylized leaves - Scrolling structure - Architectural framing ## Build it 1. Choose a consistent leaf drawing. 2. Use it at section openings. 3. Leave content columns unornamented. ## Example An architectural detail archive with close images and a restrained leaf divider. ## Typography A balanced serif works with classical leaf ornament. Keep title spacing measured rather than excessively wide. ## Practical consequences - Starting projects: Publication, Store. These are suggestions, not restrictions. - Reading/layout: spacious; quiet visual emphasis. - Asset work: A specific, reusable leaf motif is preferable to generic florals. - Complexity: medium. Allow time for a coherent decorative or image layer and responsive checks. ## Limits Mixing unrelated botanical motifs while labeling them acanthus or overwhelming small screens with borders. ## Reading the collected reference board The board includes several kinds of botanical and classical ornament. Compare the leaf shapes carefully: not every floral border is an acanthus pattern. ## Context Contemporary screen interpretation. The recipe is a modern web adaptation. No single inventor or exact founding date is asserted for this interpretation. ## Implementation files - [page](/territories/acanthus/) - [guide](/territories/acanthus/guide.md) - [brief](/territories/acanthus/brief.md) - [tokens](/territories/acanthus/tokens.json) - [checks](/territories/acanthus/checklist.md) - [example](/territories/acanthus/example/) - [versionedGuide](/territories/v1/acanthus/guide.md) - [versionedTokens](/territories/v1/acanthus/tokens.json) --- # Conceptual Sketch Schema: 1.0.0 · Content revision: f5fd78058ba2 Resource base: https://mejohnc.org (or the preview host used to obtain this file). A deliberately unfinished visual treatment that makes ideas and relationships easy to discuss. Sketchiness can communicate a draft state, but should not conceal the status of real functionality. ## Visual family Art & image-making. Editorial family: shared visual vocabulary, not a claim of common origin. ## Visual cues - Loose line - Annotations - Visible structure ## Build it 1. Use annotations to explain actual decisions. 2. Keep labels typeset and readable. 3. Mark unfinished or hypothetical features explicitly. ## Example A product concept page with an annotated flow and clearly marked open questions. ## Typography Use typeset annotations or highly legible handwriting. Labels should explain the diagram without requiring deciphering. ## Practical consequences - Starting projects: Portfolio, Internal tool. These are suggestions, not restrictions. - Reading/layout: compact; quiet visual emphasis. - Asset work: Original annotations or a simple diagram can supply the sketch layer. - Complexity: low. Mostly standard CSS; imagery may still need preparation. ## Limits Presenting an incomplete workflow as working or making every line so irregular that relationships become ambiguous. ## Reading the collected reference board Look at the loose drawings and informal annotations. Much of this board is finished poster art using sketch-like marks, which differs from an actual early-stage wireframe. ## Context Contemporary screen interpretation. The recipe is a modern web adaptation. No single inventor or exact founding date is asserted for this interpretation. ## Implementation files - [page](/territories/conceptual-sketch/) - [guide](/territories/conceptual-sketch/guide.md) - [brief](/territories/conceptual-sketch/brief.md) - [tokens](/territories/conceptual-sketch/tokens.json) - [checks](/territories/conceptual-sketch/checklist.md) - [example](/territories/conceptual-sketch/example/) - [versionedGuide](/territories/v1/conceptual-sketch/guide.md) - [versionedTokens](/territories/v1/conceptual-sketch/tokens.json) --- # Tenebrism Schema: 1.0.0 · Content revision: f5fd78058ba2 Resource base: https://mejohnc.org (or the preview host used to obtain this file). A dramatic lighting approach in which concentrated illumination emerges from extensive darkness. It is more specific than a dark theme or ordinary high-contrast text. ## Visual family Art & image-making. Editorial family: shared visual vocabulary, not a claim of common origin. ## Visual cues - Dominant shadow - Concentrated light - Dramatic subject ## Build it 1. Let one lit image establish the mood. 2. Keep interface text evenly readable. 3. Reserve darkness for framing rather than hiding controls. ## Example A portrait gallery with one illuminated subject and unobtrusive but visible metadata. ## Typography Use solid, readable text beside the dramatic image. A serif can support the mood without needing a glow or shadow. ## Practical consequences - Starting projects: Portfolio, Publication. These are suggestions, not restrictions. - Reading/layout: spacious; bold visual emphasis. - Asset work: A strongly lit subject image is essential to a full treatment. - Complexity: medium. Allow time for a coherent decorative or image layer and responsive checks. ## Limits Equating any black background with tenebrism or obscuring navigation to create drama. ## Reading the collected reference board Notice how the faces and focal objects emerge from extensive shadow. These contemporary photographic compositions are lighting references, not historical paintings. ## Context Contemporary screen interpretation. The recipe is a modern web adaptation. No single inventor or exact founding date is asserted for this interpretation. ## Implementation files - [page](/territories/tenebrism/) - [guide](/territories/tenebrism/guide.md) - [brief](/territories/tenebrism/brief.md) - [tokens](/territories/tenebrism/tokens.json) - [checks](/territories/tenebrism/checklist.md) - [example](/territories/tenebrism/example/) - [versionedGuide](/territories/v1/tenebrism/guide.md) - [versionedTokens](/territories/v1/tenebrism/tokens.json) --- # Pointillism Schema: 1.0.0 · Content revision: f5fd78058ba2 Resource base: https://mejohnc.org (or the preview host used to obtain this file). An image-making technique using discrete dots of color. It is related to Divisionism, but the terms are not interchangeable: dots are a particular way of separating color. ## Visual family Art & image-making · 1880s. Editorial family: shared visual vocabulary, not a claim of common origin. ## Visual cues - Discrete color dots - Optical mixture - Distance-dependent detail ## Build it 1. Use dots within illustration. 2. Preview at actual display sizes. 3. Preserve clean typography and controls. ## Example An art lesson showing a dotted image beside a zoomed detail and a readable explanation. ## Typography Use clean text as a contrast to the dotted illustration. Pixel fonts would imply a different construction method. ## Practical consequences - Starting projects: Publication, Portfolio. These are suggestions, not restrictions. - Reading/layout: spacious; bold visual emphasis. - Asset work: An actual dotted illustration is needed beyond the neutral interface layer. - Complexity: high. Custom artwork or lettering is central to the full expression. ## Limits Calling any dotted texture pointillism or using dense live particles where a static image would work. ## Reading the collected reference board This board mainly uses halftone and stippled print effects. Those are useful comparisons, but they do not demonstrate the color-separation technique of painted Pointillism; use the linked museum source for that distinction. ## Context Late nineteenth century. The recipe is a modern web adaptation. [The Met: Neo-Impressionism](https://www.metmuseum.org/exhibitions/listings/2001/paul-signac-circle) ## Implementation files - [page](/territories/pointillism/) - [guide](/territories/pointillism/guide.md) - [brief](/territories/pointillism/brief.md) - [tokens](/territories/pointillism/tokens.json) - [checks](/territories/pointillism/checklist.md) - [example](/territories/pointillism/example/) - [versionedGuide](/territories/v1/pointillism/guide.md) - [versionedTokens](/territories/v1/pointillism/tokens.json) --- # Mixed Media Schema: 1.0.0 · Content revision: f5fd78058ba2 Resource base: https://mejohnc.org (or the preview host used to obtain this file). A composition combining distinct media such as photography, drawing, and cut paper. The contrast between the materials should contribute to the idea. ## Visual family Art & image-making. Editorial family: shared visual vocabulary, not a claim of common origin. ## Visual cues - Multiple media - Visible layering - Material contrast ## Build it 1. Choose one dominant medium. 2. Use the second to annotate or contrast. 3. Repeat a small set of alignment points. ## Example A project case study combining process photographs with drawn annotations. ## Typography Choose one dependable reading family. A second display voice should correspond to a distinct layer or speaker. ## Practical consequences - Starting projects: Portfolio, Publication. These are suggestions, not restrictions. - Reading/layout: spacious; bold visual emphasis. - Asset work: Prepare a small set of photographs and drawn or cut-paper overlays. - Complexity: medium. Allow time for a coherent decorative or image layer and responsive checks. ## Limits Adding texture without purpose or letting overlaps cover text and links. ## Reading the collected reference board Compare the photographs, cutout shapes, and drawn additions. The strongest combinations give the added layer a specific role rather than simply adding texture. ## Context Contemporary screen interpretation. The recipe is a modern web adaptation. No single inventor or exact founding date is asserted for this interpretation. ## Implementation files - [page](/territories/mixed-media/) - [guide](/territories/mixed-media/guide.md) - [brief](/territories/mixed-media/brief.md) - [tokens](/territories/mixed-media/tokens.json) - [checks](/territories/mixed-media/checklist.md) - [example](/territories/mixed-media/example/) - [versionedGuide](/territories/v1/mixed-media/guide.md) - [versionedTokens](/territories/v1/mixed-media/tokens.json) --- # Surrealism Schema: 1.0.0 · Content revision: f5fd78058ba2 Resource base: https://mejohnc.org (or the preview host used to obtain this file). An artistic and literary movement exploring the unconscious and unexpected associations. A screen interpretation can use impossible imagery while keeping the actual interaction understandable. ## Visual family Art & image-making · 1924 onward. Editorial family: shared visual vocabulary, not a claim of common origin. ## Visual cues - Unexpected association - Dream logic - Altered scale ## Build it 1. Build one meaningful impossible scene. 2. Keep navigation spatially stable. 3. Use captions when the image needs context. ## Example A literary journal with a surreal cover image and conventional article navigation. ## Typography Conventional typography can make the impossible image more striking. Distort a title only when the distortion carries an idea. ## Practical consequences - Starting projects: Portfolio, Publication. These are suggestions, not restrictions. - Reading/layout: spacious; bold visual emphasis. - Asset work: One meaningful impossible image is the main creative investment. - Complexity: high. Custom artwork or lettering is central to the full expression. ## Limits Random visual oddity without an idea or making essential actions behave unpredictably. ## Reading the collected reference board Look at the altered scale, improbable objects, and impossible spatial relationships. These are contemporary graphic interpretations of surreal imagery. ## Context Twentieth-century movement. The recipe is a modern web adaptation. [MoMA: Surrealism](https://www.moma.org/collection/terms/surrealism) ## Implementation files - [page](/territories/surrealism/) - [guide](/territories/surrealism/guide.md) - [brief](/territories/surrealism/brief.md) - [tokens](/territories/surrealism/tokens.json) - [checks](/territories/surrealism/checklist.md) - [example](/territories/surrealism/example/) - [versionedGuide](/territories/v1/surrealism/guide.md) - [versionedTokens](/territories/v1/surrealism/tokens.json) --- # Mystical Western Schema: 1.0.0 · Content revision: f5fd78058ba2 Resource base: https://mejohnc.org (or the preview host used to obtain this file). A contemporary hybrid of desert imagery, Western lettering, and celestial or occult motifs. It is a constructed mood, not a single historical tradition. ## Visual family Romantic worlds. Editorial family: shared visual vocabulary, not a claim of common origin. ## Visual cues - Desert landscape - Western display type - Celestial motif ## Build it 1. Choose one landscape and one symbol family. 2. Use display lettering only for titles. 3. Explain symbols when they carry meaning. ## Example A fictional desert festival poster with a readable itinerary and location details. ## Typography A short Western display title can establish the genre. Use a conventional serif for the itinerary or story. ## Practical consequences - Starting projects: Publication, Store. These are suggestions, not restrictions. - Reading/layout: spacious; bold visual emphasis. - Asset work: Landscape and symbol choices need to form a coherent scene. - Complexity: medium. Allow time for a coherent decorative or image layer and responsive checks. ## Limits Treating sacred imagery as interchangeable decoration or asserting a shared cultural origin for the whole blend. ## Reading the collected reference board The board mixes desert scenes, celestial imagery, and ornamental framing. It illustrates the hybrid mood rather than one historical or cultural tradition. ## Context Contemporary screen interpretation. The recipe is a modern web adaptation. No single inventor or exact founding date is asserted for this interpretation. ## Implementation files - [page](/territories/mystical-western/) - [guide](/territories/mystical-western/guide.md) - [brief](/territories/mystical-western/brief.md) - [tokens](/territories/mystical-western/tokens.json) - [checks](/territories/mystical-western/checklist.md) - [example](/territories/mystical-western/example/) - [versionedGuide](/territories/v1/mystical-western/guide.md) - [versionedTokens](/territories/v1/mystical-western/tokens.json) --- # Kitsch Schema: 1.0.0 · Content revision: f5fd78058ba2 Resource base: https://mejohnc.org (or the preview host used to obtain this file). A treatment of excess, sentimentality, and conspicuous ornament that can be affectionate, ironic, or both. Its effect depends on the subject and audience. ## Visual family Pop & playful graphics. Editorial family: shared visual vocabulary, not a claim of common origin. ## Visual cues - Deliberate excess - Sentimental imagery - Clashing decoration ## Build it 1. Pick a clear theme for the excess. 2. Keep one stable content grid. 3. Let the joke live in imagery and headlines. ## Example A novelty object collection with exuberant imagery and clear catalog information. ## Typography Choose one exuberant display face and a plain supporting face. Deliberate excess still benefits from hierarchy. ## Practical consequences - Starting projects: Store, Portfolio, Publication. These are suggestions, not restrictions. - Reading/layout: compact; bold visual emphasis. - Asset work: A clear subject for the excess keeps the imagery purposeful. - Complexity: medium. Allow time for a coherent decorative or image layer and responsive checks. ## Limits Assuming irony is obvious or making the actual transaction confusing as part of the joke. ## Reading the collected reference board Notice the exaggerated objects, conspicuous lettering, and cheerful excess. The compositions share an attitude more than a consistent type or color system. ## Context Contemporary screen interpretation. The recipe is a modern web adaptation. No single inventor or exact founding date is asserted for this interpretation. ## Implementation files - [page](/territories/kitsch/) - [guide](/territories/kitsch/guide.md) - [brief](/territories/kitsch/brief.md) - [tokens](/territories/kitsch/tokens.json) - [checks](/territories/kitsch/checklist.md) - [example](/territories/kitsch/example/) - [versionedGuide](/territories/v1/kitsch/guide.md) - [versionedTokens](/territories/v1/kitsch/tokens.json) --- # Graffiti Schema: 1.0.0 · Content revision: f5fd78058ba2 Resource base: https://mejohnc.org (or the preview host used to obtain this file). A reference to lettering and mark-making in public space, with varied practices and local histories. A spray texture alone does not convey the structure or authorship of a piece. ## Visual family Pop & playful graphics. Editorial family: shared visual vocabulary, not a claim of common origin. ## Visual cues - Expressive lettering - Layered marks - Surface context ## Build it 1. Use original or credited artwork. 2. Keep expressive lettering in large images. 3. Typeset dates, locations, and controls plainly. ## Example An artist portfolio showing complete works, detail images, and credited locations. ## Typography Let original lettering remain artwork. Typeset its title, creator, and details in a separate, readable voice. ## Practical consequences - Starting projects: Portfolio, Publication. These are suggestions, not restrictions. - Reading/layout: compact; bold visual emphasis. - Asset work: Original or credited lettering is central; a texture alone is insufficient. - Complexity: high. Custom artwork or lettering is central to the full expression. ## Limits Treating all street art as one style or using an artist's work as anonymous background texture. ## Reading the collected reference board Compare the expressive letter shapes, outlines, and layered marks. Treat individual pieces as authored artwork rather than anonymous background texture. ## Context Contemporary screen interpretation. The recipe is a modern web adaptation. No single inventor or exact founding date is asserted for this interpretation. ## Implementation files - [page](/territories/graffiti/) - [guide](/territories/graffiti/guide.md) - [brief](/territories/graffiti/brief.md) - [tokens](/territories/graffiti/tokens.json) - [checks](/territories/graffiti/checklist.md) - [example](/territories/graffiti/example/) - [versionedGuide](/territories/v1/graffiti/guide.md) - [versionedTokens](/territories/v1/graffiti/tokens.json) --- # Scrapbook Schema: 1.0.0 · Content revision: f5fd78058ba2 Resource base: https://mejohnc.org (or the preview host used to obtain this file). A composition that organizes photographs, notes, and keepsakes as a personal record. It becomes useful when the layering helps connect an image to its story. ## Visual family Craft, place & natural materials. Editorial family: shared visual vocabulary, not a claim of common origin. ## Visual cues - Paper layering - Personal annotation - Chronological fragments ## Build it 1. Pair every image with nearby context. 2. Limit rotation to decoration. 3. Keep the reading order explicit. ## Example A yearly journal with dated photo groups and short notes beside each event. ## Typography Use a readable serif for the story and a limited handwriting accent for personal notes. Dates should be easy to scan. ## Practical consequences - Starting projects: Portfolio, Publication. These are suggestions, not restrictions. - Reading/layout: spacious; quiet visual emphasis. - Asset work: Personal photographs and nearby captions give the layers a reason to exist. - Complexity: medium. Allow time for a coherent decorative or image layer and responsive checks. ## Limits Scattering captions away from photos or turning chronology into a puzzle. ## Reading the collected reference board The board layers cutouts, paper fragments, and handwritten-looking notes. A personal timeline can borrow the material relationships while keeping dates and captions orderly. ## Context Contemporary screen interpretation. The recipe is a modern web adaptation. No single inventor or exact founding date is asserted for this interpretation. ## Implementation files - [page](/territories/scrapbook/) - [guide](/territories/scrapbook/guide.md) - [brief](/territories/scrapbook/brief.md) - [tokens](/territories/scrapbook/tokens.json) - [checks](/territories/scrapbook/checklist.md) - [example](/territories/scrapbook/example/) - [versionedGuide](/territories/v1/scrapbook/guide.md) - [versionedTokens](/territories/v1/scrapbook/tokens.json) --- # Southwest Schema: 1.0.0 · Content revision: f5fd78058ba2 Resource base: https://mejohnc.org (or the preview host used to obtain this file). A regional visual reference to desert landscapes and locally specific craft and architecture. The region contains distinct living cultures; this guide uses landscape color rather than claiming a universal cultural pattern. ## Visual family Craft, place & natural materials. Editorial family: shared visual vocabulary, not a claim of common origin. ## Visual cues - Desert colors - Landscape forms - Material texture ## Build it 1. Start with an identifiable place. 2. Credit any craft or pattern source. 3. Use landscape photography and plain geographic labels. ## Example A desert travel journal with place names, terrain photographs, and credited local work. ## Typography A clear sans-serif lets place and material photography speak. Avoid generic novelty lettering standing in for a specific culture. ## Practical consequences - Starting projects: Publication, Store, Portfolio. These are suggestions, not restrictions. - Reading/layout: spacious; quiet visual emphasis. - Asset work: Place-specific photographs and material references are useful. - Complexity: medium. Allow time for a coherent decorative or image layer and responsive checks. ## Limits Combining Indigenous motifs indiscriminately or describing a contemporary community only as a historical influence. ## Reading the collected reference board These examples lean heavily toward Western poster imagery and desert travel. They are not representative of all Southwestern communities or artistic traditions. ## Context Contemporary screen interpretation. The recipe is a modern web adaptation. No single inventor or exact founding date is asserted for this interpretation. ## Implementation files - [page](/territories/southwest/) - [guide](/territories/southwest/guide.md) - [brief](/territories/southwest/brief.md) - [tokens](/territories/southwest/tokens.json) - [checks](/territories/southwest/checklist.md) - [example](/territories/southwest/example/) - [versionedGuide](/territories/v1/southwest/guide.md) - [versionedTokens](/territories/v1/southwest/tokens.json) --- # Nautical Schema: 1.0.0 · Content revision: f5fd78058ba2 Resource base: https://mejohnc.org (or the preview host used to obtain this file). A maritime-inspired vocabulary of clear markings, navigational structure, and restrained material cues. Decorative stripes are optional; the stronger idea is organized information. ## Visual family Craft, place & natural materials. Editorial family: shared visual vocabulary, not a claim of common origin. ## Visual cues - Marine colors - Clear markings - Navigational order ## Build it 1. Use blue as a controlled accent. 2. Make headings and units explicit. 3. Use chart-like lines only when they communicate relationships. ## Example A sailing journal with dated routes, weather observations, and clearly labeled maps. ## Typography Use a sturdy sans-serif with clear numerals. Coordinates and measurements need consistent units and alignment. ## Practical consequences - Starting projects: Publication, Store, Internal tool. These are suggestions, not restrictions. - Reading/layout: compact; quiet visual emphasis. - Asset work: Clear markings can work without decorative sailing imagery. - Complexity: low. Mostly standard CSS; imagery may still need preparation. ## Limits Fake coordinates, unexplained flag symbols, or ornamental compasses that look like controls. ## Reading the collected reference board Look at the maritime subjects, blue-and-cream combinations, and sailing imagery. A practical interface can borrow the organized markings without copying every decorative motif. ## Context Contemporary screen interpretation. The recipe is a modern web adaptation. No single inventor or exact founding date is asserted for this interpretation. ## Implementation files - [page](/territories/nautical/) - [guide](/territories/nautical/guide.md) - [brief](/territories/nautical/brief.md) - [tokens](/territories/nautical/tokens.json) - [checks](/territories/nautical/checklist.md) - [example](/territories/nautical/example/) - [versionedGuide](/territories/v1/nautical/guide.md) - [versionedTokens](/territories/v1/nautical/tokens.json) --- # Rebus Schema: 1.0.0 · Content revision: f5fd78058ba2 Resource base: https://mejohnc.org (or the preview host used to obtain this file). A visual word puzzle that substitutes pictures for words or syllables. Because its meaning depends on language and context, it is not a universal replacement for written labels. ## Visual family Art & image-making. Editorial family: shared visual vocabulary, not a claim of common origin. ## Visual cues - Image-word substitution - Sequenced symbols - Wordplay ## Build it 1. Use the puzzle as optional content. 2. Provide a text equivalent or reveal. 3. Keep navigation outside the puzzle. ## Example A puzzle page with a picture sequence, a labeled answer field, and an optional explanation. ## Typography Use simple text around the symbols and an explicit text solution. Keep the puzzle's typography distinct from navigation. ## Practical consequences - Starting projects: Publication, Portfolio. These are suggestions, not restrictions. - Reading/layout: compact; bold visual emphasis. - Asset work: Create a coherent image-word puzzle and a text equivalent. - Complexity: medium. Allow time for a coherent decorative or image layer and responsive checks. ## Limits Replacing essential labels with ambiguous icons or assuming the same solution works across languages. ## Reading the collected reference board The examples insert pictures into sentences and typographic layouts. Read the text and image together: the substitution depends on the specific language and phrasing. ## Context Contemporary screen interpretation. The recipe is a modern web adaptation. No single inventor or exact founding date is asserted for this interpretation. ## Implementation files - [page](/territories/rebus/) - [guide](/territories/rebus/guide.md) - [brief](/territories/rebus/brief.md) - [tokens](/territories/rebus/tokens.json) - [checks](/territories/rebus/checklist.md) - [example](/territories/rebus/example/) - [versionedGuide](/territories/v1/rebus/guide.md) - [versionedTokens](/territories/v1/rebus/tokens.json) --- # Kawaii Schema: 1.0.0 · Content revision: f5fd78058ba2 Resource base: https://mejohnc.org (or the preview host used to obtain this file). A reference to Japanese cute culture, expressed through compact forms, friendly characters, and playful detail. A cute appearance does not require childish language or a child audience. ## Visual family Pop & playful graphics · Late 1960s–1970s roots. Editorial family: shared visual vocabulary, not a claim of common origin. ## Visual cues - Rounded silhouettes - Expressive small characters - Playful color ## Build it 1. Use one consistent character language. 2. Keep supporting labels plain. 3. Make the character secondary to the task. ## Example A personal collection tracker with small character illustrations and clear item counts. ## Typography Rounded sans-serif titles can support compact characters. Keep body copy at ordinary reading sizes and use direct labels. ## Practical consequences - Starting projects: Store, Portfolio. These are suggestions, not restrictions. - Reading/layout: spacious; bold visual emphasis. - Asset work: A consistent character or sticker set provides the expressive layer. - Complexity: medium. Allow time for a coherent decorative or image layer and responsive checks. ## Limits Infantilizing the reader, using emotion to pressure a decision, or letting decorative stickers obscure controls. ## Reading the collected reference board The examples combine compact characters, sticker-like objects, and bright packaging compositions. Cute design can be saturated and busy; it is not restricted to pale pastels. ## Context Contemporary screen interpretation. The recipe is a modern web adaptation. [Highlighting Japan: The Evolving Kawaii Culture](https://www.gov-online.go.jp/hlj/en/october_2025/october_2025-00.html) ## Implementation files - [page](/territories/kawaii/) - [guide](/territories/kawaii/guide.md) - [brief](/territories/kawaii/brief.md) - [tokens](/territories/kawaii/tokens.json) - [checks](/territories/kawaii/checklist.md) - [example](/territories/kawaii/example/) - [versionedGuide](/territories/v1/kawaii/guide.md) - [versionedTokens](/territories/v1/kawaii/tokens.json)