📸 Net Zero Portal: Image Asset & Styling Guidelines

This guide defines how visual assets (photos, maps, and technical diagrams) must be treated within the portal to maintain a high-fidelity "Industrial Journal" aesthetic.

1. Core Visual Treatment

To ensure images blend seamlessly with the Oxford Navy (#0D1520) background, all assets must follow these CSS-equivalent rules:

• Corners: rounded-lg (8px radius).
• Border: 1px solid border using rgba(255, 255, 255, 0.05).
• Color Filter: Apply a global "Sophisticated Desaturation" filter:
  • saturate: 85%
  • brightness: 90%
• Shadows: None. Use the subtle border for separation instead.

2. Sizing & Scaling Tiers (Cinematic Standard)

To maintain a professional "Industrial Journal" rhythm, all visual assets must adhere to these three tiers. Use centered, fixed-width tiers with height: auto to preserve aspect ratios and prevent "visual walls" that block reading flow.

Visual Layout Rules

• Vertical Breathing: All image blocks must use a minimum my-20 (80px) vertical margin to isolate the visual from prose and provide a "curated pause."
• No Wrapping: Body text must never wrap around images. The layout is a strictly vertical, centered stack to maintain the "Vertical Rail" aesthetic.
• Caption Width-Sync: Captions (FIG XX // and Source) must be constrained to the physical width of the image asset (e.g., a 480px image must have a 480px-aligned caption).

  * Global Filters: All images receive a rounded-lg corner, a 1px subtle border (rgba(255,255,255,0.05)), and the saturate-85 brightness-90 desaturation filter.

3. Preferred File Formats

Prioritize technical clarity and performance over file size.

• WebP (Primary): Use for all standard photos and charts. It offers the best balance of quality and transparency.
• PNG-24 (Lossless): Use for technical diagrams, maps, or any asset containing text/fine lines to avoid "ringing" artifacts.
• JPEG: Use only for high-noise photographic landscapes if WebP is unavailable.
• SVG: Use for all icons, simple geometry, and brand marks (NetZero AR Logo).

4. The "Technical Figure" Component

Images are treated as curated data points. Every image must include a structured caption block:

1. Figure Label: FIG XX //
   • Font: JetBrains Mono, Bold.
   • Color: Emerald (#10B981).
2. Caption Prose:
   • Font: Inter, Regular (14px).
   • Color: Muted Slate (#94A3B8).
3. Source Citation:
   • Font: JetBrains Mono, Italic.
   • Style: Attached to the end of the caption or right-aligned below it.

5. Sourcing & Curation

Avoid "stock-photo" aesthetics. Look for: * Industrial Geometry: Symmetry, high-angles, and clean lines. * Desaturated Palettes: Blues, greys, and greens. Avoid warm, vibrant oranges/reds unless they represent a specific "Alert" state. * Abstracts: Use AI-generated (DALL-E 3) 3D renders for conceptual flows that don't have a physical reference.

6. Markdown Implementation (Shortcode)

The portal uses a custom shortcode engine to parse figures:

Supported size values

• size: full (default if omitted)
• size: specimen

Legacy aliases (backward compatibility)

• standard -> full
• wide -> full
• inset -> specimen
• small -> specimen

7. Performance & Optimization Limits

To ensure "Live Data" speed across the portal, all assets must adhere to these optimization constraints:

• Max File Size: 300KB per asset (Targeting <150KB for standard diagrams).
• Resolution Limit: Maximum physical width of 1680px (for 2x scaling on Wide tier).
• Aspect Ratio: No fixed height; preserve original ratio to prevent distortion.
• Quality Setting: When exporting WebP, use a "Lossy" setting between 75%–82%. This is the "sweet spot" where quality is indistinguishable from 100% but file size drops by 70%.
• Strip Metadata: Always "Export for Web" to strip EXIF data (camera info, GPS, etc.), which can add unnecessary KBs to the file.

8. AI Image Generation (Nano Banana 2) Prompt Template

To generate consistent assets and ensure effortless cropping of provenance watermarks, use this standardized "Bleed-Zone" prompt. It forces the content into the upper $70\%$ of the frame.

The Master "Blueprint" Prompt (Revised)

Prompt: "A minimalist technical line-art schematic of [Subject: e.g., a DC Fast Charger]. $16:9$ cinematic aspect ratio. Composition is clean and orthographic. The geometry is strictly grouped in the upper two-thirds of the frame. Thin vector lines use Emerald (#10B981) and Slate (#94A3B8) on a solid Oxford Navy (#0D1520) background. No heavy $3$D shading. Below the main diagram, add significant empty, solid Oxford Navy (#0D1520) padding (a 'bleed area') to separate technical labels from provenance markers. High-end engineering whitepaper aesthetic. $8$k, sharp lines, sophisticated desaturation."

9. Bleed-Zone Workflow & Cropping Standard

Because the NetZero AR portal must maintain a bespoke, authoritative look, images must not be displayed with external platform watermarks.

A. Automatic Workflow (For You)

1. Generate: Use the prompt above in Nano Banana. The technical asset will be generated in the top-left or top-center. The watermarking diamond (or similar) will fall into the empty Oxford Navy "void" at the bottom-right.
2. Crop: Before uploading to /public/assets, open the image in any image editor. Manually crop out the empty bottom $5\text{--}10\%$ of the frame where the watermark sits.
3. Save: Resave the asset as an optimized WebP file at $1440\text{px}$ width (Retina Standard for $720\text{px}$ display). This ensures $100\%$ control over the visible asset.

B. Fallback Workflow (For Cursor/CSS)

If you cannot manually crop an asset, you can apply a standard CSS treatment in the BlogImage component to "hide" the watermark area:

```typescript // Add this to your Tailwind classes for the tag className="object-cover object-top scale-[1.03] rounded-lg overflow-hidden"