Brand Identity & Public Asset Architecture

This specification outlines the official brand identity assets, vector standards, global CDN storage architecture, and consumption rules across the GERCIA platform.

flowchart LR
    subgraph STORAGE ["Cloudflare R2 Storage"]
        R2["Bucket: gercia-assets<br>(Zero-Egress Object Storage)"]
    end

    subgraph CDN ["Cloudflare Anycast Edge"]
        EDGE["assets.gercia.com.br<br>(TLS 1.2+ • Global Cache • CORS)"]
    end

    subgraph CONSUMERS ["Cross-Channel Platform Consumers"]
        WEB["1. Web Portals & Docs<br>(app.*, ops.*, eng.*, docs.*)"]
        EDGE_HW["2. Industrial Hardware Edge<br>(Gercia.Edge Thermal Scales & Labels)"]
        MOBILE["3. Mobile App<br>(GERCIA Care Kotlin Multiplatform)"]
        EMAIL["4. Corporate Communications<br>(Google Workspace & Mailgun)"]
    end

    R2 -->|"Anycast Edge Ingress"| EDGE
    EDGE -->|"HTTP/2 / HTTP/3 (Cached 1yr)"| WEB
    EDGE -->|"1-bit Monochrome Vectors"| EDGE_HW
    EDGE -->|"Brand Media"| MOBILE
    EDGE -->|"Absolute HTTPS Embeds"| EMAIL

1. Visual Primitives & Brand Identity

The GERCIA brand visual language balances computational precision, biotechnological rigor, and human-centric healthcare.

A. The Corporate Wordmark (`GERCIA`)

Construction: Set in uppercase (All-Caps) using Plus Jakarta Sans (ExtraBold 800) with calibrated tracking (+0.635px / ~+3.5% letter spacing) to ensure authoritative visual mass without stroke collision.
Registered Trademark (®): Positioned with optical breathing room to the right of the A apex, aligned with the upper cap-height baseline exclusively inside the official vector logo assets.
Primary Corporate Palette: Deep Petrol (#003a49) — communicating clinical stability, cryptographic data security, and enterprise SaaS authority.
Runtime Typography Separation Standard: The geometric Plus Jakarta Sans is exclusively reserved for the pre-rendered, vectorized SVG brandmark assets. All runtime web interfaces, portal badges, and companion titles use Inter to eliminate font delivery bloat, avoid typographic uncanny valley, and maximize data density legibility.

B. The Circular Crosshair Monogram (`G`)

Semiotics & Geometry: A precision-engineered circular emblem constructed from four quadrant segments partitioned by 36px orthogonal crosshair slits. The lower-right quadrant forms the stylized capital letter G through an integrated horizontal crossbar ($y = 214..294$, width 90px) and a smooth concave return arc ($r = 104$px) matching the inner radius of the primary circle.
Clinical Calibration Metaphor: Represents surgical focus, precision measurement in compounding chemistry, and data triangulation across the platform’s triad (Doctor, Patient, Pharmacy).
Standalone Usage Standard: The monogram is intentionally designed to function as an independent mark, mobile client app icon, browser favicon, digital seal, or hardware stamp. It is strictly never locked up directly alongside the full corporate wordmark GERCIA in headers or document titles.

C. Official Corporate Slogan & B2B2C Positioning

Official Slogan: GERCIA — Inteligência que acompanha o cuidado
Semiotics & Triangulation Architecture:
- Inteligência (The B2B Foundation): Anchors the brand in advanced enterprise SaaS engineering, sovereign AI (MCP & Gercia.Server), clinical precision, and regulatory compliance (ANVISA RDC 67/2007, CFM Res. 1.821). Gives Doctors and Compounding Pharmacies absolute confidence in computational reliability, data security, and operational intelligence.
- que acompanha (The Triangulation Bridge): Solves the historical fragmentation of healthcare by bridging Doctors, Compounding Pharmacies, and Patients into an unbroken, synchronized care journey. Signifies active presence, treatment fidelity, and continuous clinical oversight.
- o cuidado (The B2C Human Anchor): Elevates the platform above a cold administrative ERP or database, anchoring the software in healthcare ethics, patient well-being, empathy, and personalized compounding adherence.
Implementation Standards:
- Institutional Website (apps/site): Configured as the authoritative page title tag: <title>GERCIA — Inteligência que acompanha o cuidado</title>.
- Mobile Client (GERCIA Care): Rendered on splash screens and patient onboarding flows in native SwiftUI and Jetpack Compose.
- Corporate & Marketing Collateral: Preserved verbatim as the primary brand signature across institutional presentations and partner contracts.

2. Cloudflare R2 CDN Architecture (`assets.gercia.com.br`)

All public brand assets, media badges, and marketing collateral are centralized in Cloudflare R2 under the gercia-assets bucket, eliminating asset bloat from the Git repository:

Authoritative Domain: https://assets.gercia.com.br (routed via CNAME to public.r2.dev with active Cloudflare proxying and minimum TLS 1.2).
Zero Egress Advantage: Cloudflare R2 incurs zero bandwidth egress charges, allowing unlimited high-volume media delivery across web browsers, email clients, and hardware edge agents.
Global CORS Policy: Configured with an open CORS rule to prevent cross-origin rendering blocks in client-side web applications and modern frontend runtimes:
```
[
  {
    "AllowedOrigins": ["*"],
    "AllowedMethods": ["GET", "HEAD"],
    "AllowedHeaders": ["*"],
    "MaxAgeSeconds": 86400
  }
]
```
Edge Caching Policy: In production, assets are served with long-term immutable cache headers: Cache-Control: public, max-age=31536000, immutable

3. Directory Taxonomy & Vector Asset Catalog

The gercia-assets bucket enforces a structured directory hierarchy to segregate brand identity, email media, and public documentation collateral:

assets.gercia.com.br/
├── brand/               # Official corporate logos, monograms, and brand variations
├── docs/                # Screenshots, product diagrams, and user manual guides
├── email/               # Email signatures, header banners, and transactional badges
├── marketing/           # Press kits, social media share cards, and public campaigns
└── pages/               # Cloudflare custom error templates, WAF interception, and challenge pages

Official Production Vector Catalog (`brand/`)

Storage Key (Path)	Format / MIME	Hex Fill	Intended Usage & Consumption Standard
`brand/gercia-logo-petrol.svg`	`image/svg+xml`	`#003a49`	Primary Brand Mark: Public website, B2B SaaS portal (`app.`), operations portal (`ops.`), and light-mode documentation.
`brand/gercia-logo-white.svg`	`image/svg+xml`	`#ffffff`	Inverted Brand Mark: Dark-mode portal navigation bars, dark hero sections, and high-contrast presentation decks.
`brand/gercia-logo-black.svg`	`image/svg+xml`	`#000000`	Monochrome Wordmark: High-contrast black-and-white medical reports, printed clinical records, and thermal document printing.
`brand/gercia-symbol-petrol.svg`	`image/svg+xml`	`#003a49`	Primary Monogram Emblem: Authoritative source for browser favicons (`favicon.svg`, `favicon.ico`), mobile app icons (`GERCIA Care`), social media avatars, and software station badges. Automatically supports dark mode in modern browsers (`#ffffff`).
`brand/gercia-symbol-white.svg`	`image/svg+xml`	`#ffffff`	Inverted Monogram Emblem: Dark-mode application icons, inverted system badges, and dark footer emblems.
`brand/gercia-symbol-black.svg`	`image/svg+xml`	`#000000`	Hardware Thermal Symbol: Compounding pharmacy precision scales, thermal label printers (Zebra, Argox, Elgin), and bottle labels.

4. Channel Consumption Patterns

A. Documentation & Static Portal Headers (Astro Starlight)

To ensure optimal performance and eliminate build-time network coupling, static web portals (docs/, apps/site/) reference the R2 CDN assets via semantic <img> tags with explicit optical height constraints and a calibrated vector slash lockup:

<a href={siteTitleHref} class="site-title sl-flex">
    <img
        class="brand-logo brand-logo-light"
        src="https://assets.gercia.com.br/brand/gercia-logo-petrol.svg"
        alt="GERCIA"
        loading="eager"
        decoding="async"
    />
    <img
        class="brand-logo brand-logo-dark"
        src="https://assets.gercia.com.br/brand/gercia-logo-white.svg"
        alt="GERCIA"
        loading="eager"
        decoding="async"
    />
    <svg class="site-divider" viewBox="0 0 8 16" width="8" height="16" fill="currentColor" aria-hidden="true">
        <polygon points="5.3,0 7.8,0 2.5,16 0,16" />
    </svg>
    <span class="site-title-badge" translate="no">Engineering</span>
</a>

<style>
    .site-title {
        display: flex;
        align-items: center;
        text-decoration: none;
        white-space: nowrap;
    }

    .brand-logo {
        height: 1.18rem;
        width: auto;
        max-height: 1.18rem;
        object-fit: contain;
        object-position: 0 50%;
        display: block;
        margin-right: 0.22rem;
    }

    .brand-logo-dark {
        display: none;
    }

    :global(:root[data-theme='dark']) .brand-logo-light {
        display: none;
    }

    :global(:root[data-theme='dark']) .brand-logo-dark {
        display: block;
    }

    .site-divider {
        height: 0.95rem;
        width: auto;
        aspect-ratio: 8 / 16;
        color: #003a49;
        margin-right: 0.48rem;
        user-select: none;
        flex-shrink: 0;
        display: block;
        transform: translateY(-0.5px);
    }

    .site-title-badge {
        font-family: var(--sl-font, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
        font-weight: 600;
        font-size: 1rem;
        letter-spacing: -0.015em;
        color: #003a49;
        line-height: 1;
    }

    :global(:root[data-theme='dark']) .site-divider,
    :global(:root[data-theme='dark']) .site-title-badge {
        color: #ffffff;
    }
</style>

Dynamic Light/Dark Theme Switching: In light mode, the primary Deep Petrol logo (gercia-logo-petrol.svg) is rendered. In dark mode, pure CSS :global(:root[data-theme='dark']) instantly swaps it to the inverted white mark (gercia-logo-white.svg), guaranteeing zero Cumulative Layout Shift (CLS = 0) and avoiding any JavaScript flashing.
Optical Height Calibration: Logo height set to height: 1.18rem (~18.8px).
Vector Slash Divider: Replaces legacy typographical bullets with an optical 8×16 vector polygon slash (<polygon points="5.3,0 7.8,0 2.5,16 0,16" />) scaled to height: 0.95rem (~15.2px), aligning seamlessly with the cap-height of the wordmark and descriptor.
Title Sizing & Typography: Companion title badge set in Inter (font-size: 1rem / 16px, font-weight: 600, letter-spacing: -0.015em), achieving optimal optical balance without visual competition.
Asymmetrical Kerning: Calibrated with tighter logo-to-slash spacing (margin-right: 0.22rem / ~3.5px) and balanced slash-to-descriptor spacing (margin-right: 0.48rem / ~7.7px) to account for the angular slope of the slash.

B. Enterprise Web Application Shell Architecture (`@gercia/app`)

The Angular 22 Single Page Application (@gercia/app) delivers a unified layout architecture supporting both B2B SaaS tenants and internal operations staff.

flowchart TD
    subgraph Host ["@gercia/app Angular SPA Shell"]
        PORTAL{"isOps() Signal"}
        
        subgraph SideNav ["SideNav Navigation Shell"]
            OPS_LOCKUP["GERCIA / Operations<br>(Non-clickable Static Container)"]
            APP_LOCKUP["GERCIA / Farmácia<br>(Non-clickable Static Container)"]
            DOCK["64px Docked State<br>(Cross-fade to Circular G Monogram)"]
        end
        
        subgraph TopBar ["HeaderBar (UserProfileMenu)"]
            PROFILE["[ User Name ] ( PrimeNG Avatar ) [ Sair ]"]
        end
        
        subgraph Feedback ["Interactive UX Feedback"]
            LOADER["Floating Breathing G Monogram (44px)<br>(Frosted Blur Backdrop 8px)"]
            ROUTING["Router Navigation Events"]
        end
    end

    PORTAL -- "true (ops.*)" --> OPS_LOCKUP
    PORTAL -- "false (app.*)" --> APP_LOCKUP
    OPS_LOCKUP -. "Sidebar Collapse" .-> DOCK
    APP_LOCKUP -. "Sidebar Collapse" .-> DOCK
    ROUTING --> LOADER

1. SideNav Brand Lockup & Dynamic Descriptors

To avoid confusing navigation state or accidental full-page refreshes in the Angular SPA runtime, the primary brand lockup in the SideNav component is implemented as a non-interactive static container (<div class="gercia-brand-link"> with cursor: default; user-select: none;), rather than an anchor tag (<a>):

<div class="gercia-brand-link">
    <div class="gercia-brand-full">
        <img class="gercia-brand-logo brand-logo-light"
             src="https://assets.gercia.com.br/brand/gercia-logo-petrol.svg"
             alt="GERCIA"
             loading="eager"
             decoding="async" />
        <img class="gercia-brand-logo brand-logo-dark"
             src="https://assets.gercia.com.br/brand/gercia-logo-white.svg"
             alt="GERCIA"
             loading="eager"
             decoding="async" />
        <svg class="site-divider" viewBox="0 0 8 16" width="8" height="16" fill="currentColor" aria-hidden="true">
            <polygon points="5.3,0 7.8,0 2.5,16 0,16" />
        </svg>
        @if (isOps()) {
            <span class="site-title-badge">Operations</span>
        } @else {
            <span class="site-title-badge">Farmácia</span>
        }
    </div>
    <img class="gercia-brand-symbol brand-logo-light"
         src="https://assets.gercia.com.br/brand/gercia-symbol-petrol.svg"
         alt="GERCIA"
         loading="eager"
         decoding="async" />
    <img class="gercia-brand-symbol brand-logo-dark"
         src="https://assets.gercia.com.br/brand/gercia-symbol-white.svg"
         alt="GERCIA"
         loading="eager"
         decoding="async" />
</div>

Portal Descriptor Mapping:
- Operations (ops.*): Displays Operations in the SideNav header lockup.
- B2B SaaS Portal (app.*): Displays Clínica, Odontologia, or Farmácia dynamically based on the active client’s licensed vertical context.
- Veterinary Portal (app.gercia.vet.br / vet.*): Displays Veterinária in the SideNav header lockup.
Optical Parity: Logo height (height: 1.18rem), vector slash (height: 0.95rem), and Inter typography (font-weight: 600, font-size: 1rem) maintain strict 1:1 optical parity with the documentation portal.
Docked Circular Monogram Cross-Fade: When the sidebar collapses into 64px docked mode (.gercia-sidenav-docked), .gercia-brand-full transitions to opacity: 0; pointer-events: none;, while the centered circular monogram .gercia-brand-symbol transitions in smoothly (opacity: 1; transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);).

2. Standalone Breathing Monogram Loading State

For Angular route transitions and asynchronous data loading states, the UI uses the standalone 44px circular monogram (gercia-symbol-petrol.svg) featuring a gentle CSS pulse breathing animation against a frosted glass backdrop:

.gercia-reconnect-card {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 20px -2px rgba(0, 58, 73, 0.08);
}

.gercia-reconnect-brand-symbol {
    width: 44px;
    height: 44px;
    object-fit: contain;
    animation: gercia-breathe 2s ease-in-out infinite;
}

@keyframes gercia-breathe {
    0%, 100% {
        transform: scale(0.95);
        opacity: 0.85;
    }
    50% {
        transform: scale(1.05);
        opacity: 1;
    }
}

Routing Feedback: Displayed during Angular Router state transitions while standalone components load asynchronously.
Transient Disconnection Indicator: Replaces intrusive modals with an unobtrusive, centered floating emblem during transient network reconnections.

3. Top Bar User Profile Standard

The top bar user profile menu in the Angular enterprise layout enforces a streamlined, single-line horizontal layout:

Layout Sequence: [ User Full Name ] ( PrimeNG Avatar ) [ Sair ].
PrimeNG Integration: Rendered using PrimeNG avatar primitives (<p-avatar shape="circle" styleClass="gercia-user-avatar">), presenting computed user initials (e.g., LG) or authenticated profile photos.
Zero Visual Redundancy: Subtitle roles (such as “Operações GERCIA” or “Farmacêutico Responsável”) and promotional tier chips are intentionally omitted from the top bar to preserve clean negative space and avoid cognitive competition with the SideNav portal badge.

C. GERCIA Custom Corporate Scrollbar Architecture

To maintain unified platform elegance across long medical records, compounding orders, and engineering documentation, all web interfaces enforce a custom thin scrollbar synchronized to the Petrol chromatic scale:

Light Mode: Deep Petrol thumb (rgba(0, 58, 73, 0.20)) with hover saturation (rgba(0, 58, 73, 0.45)).
Dark Mode: Luminous Petrol Cyan thumb (rgba(94, 192, 216, 0.28)) with hover saturation (rgba(94, 192, 216, 0.55)).
Browser Viewport Window Compensation: Chromium on Windows 11 applies an automatic ~50% idle attenuation to the root window scrollbar (html). To prevent the root scrollbar from appearing lighter or washed out compared to inner scrollable panes (e.g. sidebar navigation menus), the root window thumb is calibrated to rgba(0, 58, 73, 0.32) in Light Mode and rgba(94, 192, 216, 0.44) in Dark Mode, achieving pixel-perfect perceptual uniformity.

D. Hardware Edge & Compounding Pharmacy Stations (`Gercia.Edge`)

Pharmacy compounding stations operate industrial thermal label printers (e.g., Zebra ZD220, Argox OS-214 Plus, Elgin L42 Pro) connected to serial analytical scales.

The 1-Bit Monochrome Rule: Thermal print heads operate strictly in 1-bit monochrome (pixels are either burned black or left blank). Sending colored vectors (such as navy blue) triggers printer driver half-tone dithering, producing jagged, dotted edges.
Production Standard: Gercia.Edge exclusively consumes brand/gercia-symbol-black.svg and brand/gercia-logo-black.svg (#000000), guaranteeing razor-sharp thermal burn on formula prescription labels and milligram weighing slips.

E. Corporate Email Signatures & Communications

Modern email clients (Gmail, Microsoft Outlook, Apple Mail) strictly prohibit inline SVG and embedded data URIs due to spam heuristics and HTML sanitizer engines.
Email signatures must reference high-density PNG exports stored in the email/ prefix:
- Standard Density (@1x): ~180px to 220px width.
- Retina Density (@2x): Exported at 2x resolution with HTML width="200" constraints for high-DPI displays.