Iconography

Clear symbols, consistent meaning

JR Dream uses a curated outline family to support Architectural Minimalism with Technical Precision. Stable geometry, explicit labels and consistent meanings help people distinguish navigation, actions and feedback. Interface symbols never replace the complete JR Dream logo.

These are internally accepted working specifications, pending implementation testing and final company approval. Service and operational examples describe a proposed vocabulary, not evidence of business capabilities or existing software.

Source: Iconography System Exploration & Validation v1.0, pages 1 and 16–17.

Library, source version and meaning register

The source selects 40 Lucide icons, not the entire catalogue. This page renders genuine SVGs from the exact lucide-static 1.59.0 archive. The existing application retains lucide-react 0.468.0 and its current icon usage. These versions are distinct; this page does not establish a second global production icon system.

The original SVGs and full ISC licence, including the Feather-derived MIT notice, are retained alongside the scoped implementation. Commercial use is permitted under those notices; retain the full licence in source and asset distributions. No visible attribution line is required by the reviewed licence.

Use building-complex and trash in the source register. Do not substitute the older Building2 export, or treat aliases as separate meanings. Any future framework upgrade needs deliberate name, geometry, API and licence review.

Register previews use primary charcoal. Their role labels describe intended application colours, demonstrated separately below.

Role key: Primary uses --text-primary; Muted uses --text-secondary; Action uses --action-primary-background on light surfaces. Inherit uses the tested parent text colour. Status roles use their existing foreground/tint pairs. Inverse applications require a suitable light foreground. Exception means only the named patterns described below.

Source: Iconography System Exploration & Validation v1.0, pages 2, 5–7 and 14–17.

Source-defined sizes

Keep the complete 24 × 24 design canvas and proportions. Restrict 16px to simple, labelled supporting roles. Buildings, clipboard details, boxes and settings are denser at small sizes; use 24px or 32px for detailed business concepts. Increase size or use text if recognition is weak, without drawing a special small variant.

A standalone control retains a minimum var(--target-min) 48 × 48px target. A centred 24px glyph has approximately 12px breathing room per side. The glyph size is not the click target.

Source: Iconography System Exploration & Validation v1.0, pages 3–4 and 15.

Stroke and visual weight

These are geometric widths, not constant 2 CSS-pixel strokes at every size. Numerical contrast does not prove that thin strokes remain clear after rasterisation.

Source: Iconography System Exploration & Validation v1.0, pages 3–4 and 8.

Optical balance and label alignment

Equal canvases create stable alignment, not identical visible silhouettes. Keep native optical positioning: do not stretch the bed, thicken only the building or shift individual nodes to equalise bounds. Leading icons use an 8px logical gap via --space-08, alongside the first line of wrapped labels. Centre the pair inside a flexible-height button wrapper.

Optical balance does not introduce a new spacing scale or authorise arbitrary per-icon offsets. The examples preserve source geometry.

Source: Iconography System Exploration & Validation v1.0, pages 3, 10–11 and 14.

Colour roles, contrast and states

Inline SVG strokes inherit semantic currentColor. Use charcoal on light surfaces, muted secondary for supporting metadata and white inside primary orange actions. Primary hover and pressed fills use --action-primary-hover and --action-primary-pressed; the white glyph and its meaning stay stable.

Independent implementation recalculation matches all 14 source ratios to two decimals. These numerical checks do not establish comprehensive WCAG conformance. Meaningful non-text cues target 3:1 against adjacent colours; normal text retains its own 4.5:1 requirement.

• Decorative brand orange passes 3:1 on white but fails normal-text contrast. Use it for restrained decorative emphasis, not as the automatic icon colour or small white labels.
• Error red alone fails on charcoal. Use the existing light error panel with an explicit message.
• Decorative separators are not meaningful icon cues or functional control boundaries.
• Inactive controls are exempt from the non-text criterion; JR Dream still prefers the readable disabled pair, without whole-control opacity.

The source selected recipe uses orange icons on subtle orange fill, with written/semantic state. The accepted documentation sidebar remains solid accessible orange with white text/icons, 4px radius, no marker or selected outline, aria-current="page", existing focus and minimum targets. That shell exception is not a general corporate website selection rule.

Source: Iconography System Exploration & Validation v1.0, pages 8–9 and 15.

Documentation interface specimens

These excerpts demonstrate source-supported combinations. They are not production-ready components, functioning business services or an approved application workflow.

Static feedback is not announced as a live event. The Add demonstration record control above confirms a real local outcome through a success shape, text and polite status announcement. No notification dot, hue or glyph alone carries state.

Source: Iconography System Exploration & Validation v1.0, pages 5–7, 9 and 11–12.

Correct and incorrect applications

Source: Iconography System Exploration & Validation v1.0, pages 3–7 and 9–12.

Names, targets and keyboard access

With equivalent visible wording, hide the redundant SVG using aria-hidden="true" and focusable="false". If a standalone informational SVG is essential, use role="img" with an accessible name, such as an associated title; prefer visible text. Never announce both an image and an equivalent repeated label.

Icon-only exceptions use real buttons with accessible action names. A tooltip may supplement the name. Keep at least 48 × 48px targets, 8px between neighbouring targets, flexible heights and visible focus. Repeated actions should name their object; any later justified icon-only exception must name the record.

Preserve the local 2px focus ring plus 2px surface-coloured gap; inverse focus uses --focus-inverse on charcoal. Do not clip focus or remove required control boundaries. Selection needs semantic current/selected state and written or equivalent meaning. The shell retains its accepted exception above.

The source’s accessibility conventions appear on pages 8–10 and reference WCAG non-text contrast on page 17. The demonstrations apply those conventions; automated DOM and contrast checks do not replace screen-reader, native high-contrast, user recognition or comprehensive accessibility testing.

Source: Iconography System Exploration & Validation v1.0, pages 8–10 and 15–17.

Responsive, bilingual and physical contexts

Retain the documented size roles and allow labels and wrappers to grow. A narrower viewport does not justify shrinking detailed service symbols to 16px or compressing a target to its glyph. Use logical placement, an 8px gap and first-line alignment. Inter and IBM Plex Sans Arabic remain the established type families.

For RTL logical Back, choose arrow-right; for Forward, choose arrow-left. Resolve names semantically, not with a global SVG flip. External-link retains its orientation. Download, upload and chevron-down retain vertical direction; disclosures expose aria-expanded. Buildings, beds, tools, documents, statuses and charts retain native geometry. Technical English identifiers here are direction-isolated; no Arabic translation or sample prose is supplied.

Source: Iconography System Exploration & Validation v1.0, pages 10–14 and 16.

Developer and asset governance reference

Import only explicit approved meanings. This page reads its 40 verified assets at build time and alters only rendered size/accessibility attributes, retaining native paths and geometry. Originals, archive integrity and per-file hashes are recorded locally. Do not migrate existing React imports implicitly or mix source releases inside a new production inventory.

.icon-action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-08);
  min-block-size: var(--target-min);
  padding: var(--space-12) var(--space-16);
  border-radius: var(--radius-control);
  color: var(--action-primary-text);
  background: var(--action-primary-background);
}
.icon-action > svg { flex: 0 0 auto; }
.icon-action > span { min-inline-size: 0; overflow-wrap: anywhere; }
.icon-action:hover { background: var(--action-primary-hover); }
.icon-action:active { background: var(--action-primary-pressed); }
/* For wrapped labels: top-align the pair and align the icon with
   the first line. Keep the 8px gap, not arbitrary node shifts. */
.label-pair { display: flex; align-items: flex-start; gap: var(--space-08); }
.icon-action:focus-visible {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
  box-shadow: 0 0 0 var(--focus-offset) var(--focus-gap);
}
@media (forced-colors: active) {
  .icon-action:focus-visible { outline-color: Highlight; box-shadow: none; }
}

<!-- Use the verified source SVG, not a manually redrawn path.
     Set its outer width/height to 20; retain viewBox="0 0 24 24",
     fill="none", stroke="currentColor", stroke-width="2" and round
     caps/joins. Do not set vector-effect="non-scaling-stroke". -->
<button type="button" class="icon-action">
  <!-- Verified plus.svg inline; aria-hidden="true" focusable="false" -->
  <span>Add record</span>
</button>
<!-- Icon-only: put aria-label="Open menu" on the real button.
     A tooltip is supplementary, never the sole accessible name. -->
<!-- Meaningful standalone SVG: role="img" and an accessible name.
     Prefer visible text; never duplicate an equivalent label. -->

// Semantic mapping, not a global transform on all SVGs.
const back = direction === "rtl" ? "arrow-right" : "arrow-left";
const forward = direction === "rtl" ? "arrow-left" : "arrow-right";
// external-link, download, upload and direction-neutral symbols stay intact.
// Load only verified, explicitly selected source assets.

/* A language-specific container also needs its appropriate lang attribute. */
.bilingual-row { display: flex; gap: var(--space-08); text-align: start; }
.bilingual-row > span { min-inline-size: 0; }
/* Isolate mixed identifiers with <bdi dir="ltr">JRD-024</bdi>.
   Set dir="rtl" on the actual Arabic container, once approved copy exists. */

Set --focus-ring and --focus-gap to the immediate local surface, including light content inside an inverse parent. Inline SVG supports inherited colour; an external image does not inherit parent currentColor into its SVG. Use a prepared export with meaningful alternative text, or empty alternative text for redundant imagery.

Future Figma masters use names such as Icon/Lucide/building-complex, retain 24 × 24 frames and original 2-unit strokes, and bind semantic colour variables. Scale vectors and strokes together; resizing only the frame is insufficient. One owner should review changes to meanings, all four sizes, contrast, labels, RTL and licence notices. No Figma library is created here.

For the future corporate website, deliberately select and pin compatible source/framework versions, retain notices and log mapping changes. The source’s proposed asset organisation is governance guidance, not an instruction to create another global icon utility in this repository.

Source: Iconography System Exploration & Validation v1.0, pages 2, 14–15 and 17.

Validation and approval status

The source study reports 40 genuine SVGs and 320 placements across four sizes and two surfaces, 14 colour calculations and static bilingual layout checks. That evidence belongs to the source study, not this website’s browser testing.

Task-specific checks and results are recorded in docs/stage-02.2f-implementation.md. The working source’s label vocabulary, service metaphors and meaning register remain subject to implementation testing and final company approval.

• Actual-screen recognition at standard and high pixel density remains pending.
• Competent Arabic/native-reader review, culturally appropriate meanings and real bilingual content remain pending. No unreliable PDF Arabic sample was reused.
• Real devices, assistive technology, native forced colours, text-spacing overrides and browser zoom/reflow require further testing.
• Figma import, physical print/projector output and final company approval remain pending.

Photography, graphics and architectural motifs have separate source PDFs and remain outside this stage. The original logo and all prior foundations are preserved. Documentation specimens do not establish production component readiness.

Review colour roles and geometry and focus guidance before reuse.

Source: Iconography System Exploration & Validation v1.0, pages 16–17.