Logo
Working guidance for the complete JR Dream logo: original assets, clear space, provisional sizes, and faithful implementation.
A consistent identifier
The JR Dream logo provides a consistent brand identifier across digital and printed applications. Use the complete supplied artwork so its English lettering, Arabic lettering, symbol and skyline remain together.
These are internally accepted working specifications, pending final company approval and practical reproduction testing. The source describes the exports as reconstructions; technical export checks do not certify exact reproduction of the original reference.
Source: Logo Usage Guidelines v1.1, pages 1, 6 and 8.
Logo assets
Use these two original SVG exports. Each preview preserves the full square canvas, original proportions, lettering, architectural detail, geometry and colours. Downloads return the supplied files without conversion.
Primary Transparent
White surface · complete 389 × 389 source canvas.
02. Primary Transparent.svg
Reversed Transparent
Charcoal surface · complete 389 × 389 source canvas.
03. Reversed Transparent.svg
These previews keep a minimum 240px canvas width and grow towards 320px where space permits. They are documentation examples, not device-legibility or print proofs.
Source: Logo Usage Guidelines v1.1, pages 1, 3, 5 and 7.
Logo anatomy
The source identifies the following parts of the existing artwork:
- The symbol and its existing circuit details.
- The English lettering.
- The Arabic lettering.
- The skyline illustration.
Keep these elements in their original relationship. Do not separate the symbol, replace lettering, remove details or rearrange the composition.
Source: Logo Usage Guidelines v1.1, pages 1 and 6.
Clear space
X = W ÷ 10, where W is the visible artwork width.
Measure from the outermost artwork, including the English lettering, Arabic lettering and skyline. At the source scale, W is 320 units and the provisional clear space X is 32 units on every side.
Outer square: complete canvas. Solid inner rectangle: measured artwork bounds. Dashed rectangle: the W/10 exclusion boundary.
Schematic illustration of the documented measurements only. It contains no logo artwork and introduces no new logo specification.
| Measurement | Source value | Application |
|---|---|---|
| Complete canvas | 389 × 389 units | Preserve the square and its internal margins. |
| Visible artwork bounds | x35–355; y49–340 | Width 320; height 291 units. Minor antialiasing edge tolerance applies. |
| Minimum clear space | 32 units (W/10) | Measure from every outermost artwork edge. |
| Existing canvas margins | Left 35; right 34; top/bottom 49 units | Already exceed X. Keep adjacent content outside the complete square. |
| At a 240px canvas | Visible width ≈197.4px; X ≈19.7px | Do not crop the export to its visible artwork. |
No additional external padding is required to meet this minimum: the supplied canvas already contains sufficient clear space. Extra layout spacing is optional and is distinct from the logo rule.
Source: Logo Usage Guidelines v1.1, page 2.
Minimum sizes
These are provisional starting points for the complete square canvas, not universally validated reproduction limits. The English and Arabic lettering, circuit details and thin skyline strokes still need actual-size checks.
| Application | Provisional minimum | Preferred larger size | Validation still required |
|---|---|---|---|
| Digital | 240px canvas width | 320px on covers or spacious layouts | Actual phone and desktop displays, including standard- and high-density screens. |
| 50mm canvas width | 65mm where skyline detail matters | Actual-size proofs on the intended stock and printing process. |
The source finds 64–96px too small for the complete logo and describes detail at 160px as fragile. Do not treat these smaller study sizes as permitted alternatives.
For print validation, the guide calls for 35 / 50 / 65mm proofs. The 35mm study is a test comparison, not a replacement minimum. Colour conversion, fine lines, Arabic dots and English counters need printer review; no CMYK recipe is specified.
Source: Logo Usage Guidelines v1.1, pages 3–4.
Background application
The original asset previews above demonstrate Primary Transparent on white and Reversed Transparent on charcoal. Surface selection changes the surrounding page, never the logo artwork.
| Background | Supplied variant | Guidance |
|---|---|---|
| White, warm off-white or light neutral | Primary Transparent | Preserve the original dark lettering, gradients and transparent canvas. |
| Black or charcoal | Reversed Transparent | Preserve the reversed lettering and transparent Arabic interior. |
| Busy photographs or gradients | Avoid these placements | Use a suitable plain surface instead; do not alter the artwork to compensate. |
Do not use Primary Transparent on dark surfaces or Reversed Transparent on light surfaces. The guideline also discusses fixed-background proof exports; those files are not part of this project and no replacements are created here.
Source: Logo Usage Guidelines v1.1, page 5.
Correct and incorrect usage
Use the complete original
- Scale proportionally and retain the complete square canvas.
- Keep adjacent content outside that canvas and use the matching background variant.
- Respect the provisional size rules and validate the intended output.
Avoid these treatments
- No stretching, distortion, cropping, rotation or flipping.
- No recolouring, gradient changes, shadows, bevels, outlines or texture applied to the artwork.
- No removal, separation or rearrangement of the English lettering, Arabic lettering, skyline, circuit details or symbol.
- No replacement lettering or unapproved compact, responsive or symbol-only variants.
- No overlapping copy or crowded placement inside the full square canvas.
Prohibited treatments are described in words only. No altered logo examples or alternative exports are generated.
Source: Logo Usage Guidelines v1.1, pages 2–3 and 6.
Developer implementation
Use the original SVG URL in the future corporate website and preserve the intrinsic 389 × 389 aspect ratio. SVG is the preferred scalable format; inspect masks, gradients and transparency in the intended browser.
Example: Primary Transparent on a light surface
<img
src="/brand/02.%20Primary%20Transparent.svg"
alt="JR Dream"
width="389"
height="389"
class="jr-dream-logo"
/>.jr-dream-logo {
display: block;
inline-size: 320px;
min-inline-size: 240px;
max-inline-size: 100%;
block-size: auto;
}
/* The parent must provide at least 240px of clear width.
Change the layout or seek approval if it cannot. */The numeric HTML dimensions describe the source aspect ratio. CSS controls the displayed canvas size. The minimum width deliberately prevents silently shrinking the complete logo below 240px; its parent must provide enough room. For a dark surface, select the original Reversed Transparent file rather than applying a colour filter.
Accessible image names
- For an informative standalone logo, use
alt="JR Dream". - If the logo is the sole content of a home link, name the destination, for example
alt="JR Dream home". - Use an empty alternative only when nearby accessible text already supplies the same identity and the image adds no further meaning.
- Keep the existing Arabic lettering inside the SVG. Do not transcribe, translate or replace it without competent Arabic-language review.
Responsive placement and compact headers
Let the surrounding layout reflow before reducing the logo. A compact 48–80px header cannot meet the documented complete-logo minimum. If a placement cannot fit the full canvas at the provisional minimum, it requires a separate design decision and approval; do not crop the asset or invent a compact mark.
This documentation website retains its accepted text-only header. These examples are implementation guidance for future applications, not a corporate website redesign.
Image alternative text and the code examples are documentation implementation guidance, not new artwork or brand rules.
Source: Logo Usage Guidelines v1.1, pages 3 and 7; artwork restrictions on page 6.
Validation and approval status
| Review area | Status | Evidence or next action |
|---|---|---|
| Internal working specification | Internally accepted | Use the supplied guideline and original exports as the working reference. |
| Technical export review | Recorded in the source guide | The guide reports export correspondence checks. This does not certify exact reconstruction fidelity or production readiness. |
| Actual-device reproduction | Pending | Check the complete logo at intended sizes on real phone and desktop screens. |
| Physical print reproduction | Pending | Obtain actual-size proofs and review stock, fine detail, gradients and printer-managed conversion. |
| Arabic-language and lettering review | Pending | Obtain competent review of the Arabic lettering and agreed reconstruction fidelity. |
| Final company approval | Pending Joseph Dass’s approval | Record approval, asset version, date and any permitted exceptions before production release. |
Technical checks and internal acceptance are separate from final company approval. Neither this documentation page nor a successful website build validates print reproduction, Arabic linguistic accuracy or real-device legibility.
Source: Logo Usage Guidelines v1.1, page 8.