================================================================================ ALPNEXA CORPORATE IDENTITY GUIDE ================================================================================ Version 2.0 | March 27, 2026 ================================================================================ TABLE OF CONTENTS -------------------------------------------------------------------------------- 1. Brand Overview 2. Color Palette 3. Typography 4. Logo System 5. Logo Usage Rules 6. Logo Application Examples 7. Application Icon System 8. Application Icon Design Specification 9. UI Component Styling 10. Web Application Theming (Authentik, RocketChat, etc.) 11. Spacing, Radius & Elevation 12. Accessibility & Contrast 13. Brand Voice & Messaging 14. File Inventory 15. Quick Reference for Designers ================================================================================ 1. BRAND OVERVIEW ================================================================================ Company Name: Alpnexa Tagline: "Secure. Private. Yours." Industry: Tech / IT Infrastructure / Self-Hosted Services Alpnexa provides secure, privacy-focused, self-hosted technology solutions. The brand identity communicates trust, reliability, and technical precision through a clean, modern visual language anchored by a mountain/wolf mark that symbolizes strength, independence, and resilience. Brand Attributes: - Trustworthy & Secure - Privacy-first - Self-hosted / Independent - Modern & Clean - Technically excellent ================================================================================ 2. COLOR PALETTE ================================================================================ ─── PRIMARY COLORS ─── Navy (Primary Brand Color) Hex: #004C7F RGB: 0, 76, 127 HSL: 204°, 100%, 25% Usage: Primary backgrounds, logo text, headings, app icon backgrounds, major UI surfaces. The core anchor color of the brand. Dark Navy Hex: #133E5D RGB: 19, 62, 93 HSL: 205°, 66%, 22% Usage: Icon fills on light backgrounds, inner card/panel fills on dark backgrounds, tooltips, secondary dark elements, headings on light pages. ─── ACCENT COLORS ─── Teal (Primary Accent) Hex: #00B6C9 RGB: 0, 182, 201 HSL: 186°, 100%, 39% Usage: Interactive elements (buttons, links, toggles), accent highlights, icon accents on dark backgrounds, badges, focus rings, CTAs. The "energy" color of the brand — use to draw attention. Teal Hover Hex: #00D4E8 RGB: 0, 212, 232 HSL: 185°, 100%, 45% Usage: Hover state for teal interactive elements ONLY. Never use as a resting/default state color. Teal Pressed / Active Hex: #009BAA RGB: 0, 155, 170 HSL: 185°, 100%, 33% Usage: Active/pressed/focus state for teal interactive elements. Also used for visited links. Teal Alt (Subdued) Hex: #1297AB RGB: 18, 151, 171 HSL: 188°, 81%, 37% Usage: Alternative teal for icon accents on LIGHT backgrounds where primary teal (#00B6C9) is too bright. Used in the logo icon dark variant. Dark Teal (Readable Links) Hex: #00899A RGB: 0, 137, 154 HSL: 187°, 100%, 30% Usage: Link text on white/light backgrounds where #00B6C9 fails WCAG contrast. Ensures readability while staying on-brand. ─── NEUTRALS ─── White Hex: #FFFFFF Usage: Backgrounds, text on dark surfaces, icon fills on dark bg. Light Gray Background Hex: #F7F9FB RGB: 247, 249, 251 Usage: Page backgrounds, subtle section differentiation. Medium Gray Background Hex: #EEF3F8 RGB: 238, 243, 248 Usage: Card backgrounds, secondary sections, input field backgrounds. Border Gray Hex: #E4E8EC RGB: 228, 232, 236 Usage: Card borders, dividers, input borders (default state). ─── TEXT COLORS ─── Body Text (Primary) Hex: #1A2A3A RGB: 26, 42, 58 Usage: Primary body text, paragraphs, descriptions. High contrast on all light backgrounds. Titles on White (Light BG titles) Hex: #FFFFFF Usage: Titles on dark backgrounds. Titles on Dark (Dark BG titles) Hex: #133E5D Usage: Headings on light backgrounds. Hint Text Hex: #A0AAB4 RGB: 160, 170, 180 Usage: Placeholder text, disabled states, secondary labels. Annotation / Caption Hex: #8892A0 RGB: 136, 146, 160 Usage: Captions, footnotes, metadata, timestamps. ─── COLOR USAGE RULES ─── DO: - Use Navy (#004C7F) as the dominant brand surface color - Use Teal (#00B6C9) sparingly as accent — it must NOT dominate layouts - On dark backgrounds: white text, teal accents - On light backgrounds: body text #1A2A3A, headings #133E5D or #004C7F - Maintain WCAG AA contrast ratios minimum (4.5:1 for text, 3:1 for large) - Use Dark Teal (#00899A) for link text on white if #00B6C9 fails contrast DON'T: - Place teal text on teal backgrounds - Place navy text on navy backgrounds - Use Teal Hover (#00D4E8) as a resting state color - Use more than 2 brand colors in a single element - Mix teal variants within the same UI component ================================================================================ 3. TYPOGRAPHY ================================================================================ ─── FONT STACK ─── Primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif Platform rendering: - macOS / iOS: San Francisco (via -apple-system) - Chrome OS: Roboto (via BlinkMacSystemFont) - Windows: Segoe UI - Linux: System default sans-serif - Fallback: sans-serif Monospace (code, terminal UIs): 'SF Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace ─── TYPOGRAPHIC SCALE ─── Display / Hero: 48px / weight: 700 / line-height: 1.1 Heading 1: 36px / weight: 700 / line-height: 1.2 Heading 2: 28px / weight: 700 / line-height: 1.25 Heading 3: 22px / weight: 600 / line-height: 1.3 Heading 4: 18px / weight: 600 / line-height: 1.35 Body Large: 18px / weight: 400 / line-height: 1.6 Body: 16px / weight: 400 / line-height: 1.6 Body Small: 14px / weight: 400 / line-height: 1.5 Caption: 12px / weight: 400 / line-height: 1.4 Label (uppercase): 12px / weight: 600 / line-height: 1.4 / letter-spacing: 0.06em ─── FONT WEIGHT USAGE ─── 700 (Bold): Logo wordmark, H1, H2, Display headings 600 (Semi-Bold): H3, H4, buttons, labels, sub-headings, badge text 400 (Regular): Body copy, descriptions, input text, captions ─── TYPOGRAPHY RULES ─── - Logo wordmark: always weight 700, letter-spacing -0.5px - Maintain generous line height (1.5–1.6) for body text readability - Do not use italic styles for headings - Letter-spacing: 0 for body text; up to 0.02em for labels; 0.06em for uppercase labels - Never use more than 3 font weights on a single page/screen - Heading color on light bg: #133E5D (Dark Navy) - Heading color on dark bg: #FFFFFF ================================================================================ 4. LOGO SYSTEM ================================================================================ The Alpnexa logo consists of two elements: 1. The ICON — a geometric, angular mountain/wolf mark with a distinctive teal accent slope. The icon is built from two SVG paths: - Main shape: The mountain silhouette with internal cutout (evenodd fill) - Accent slope: A small teal-colored path representing a slope/glacier 2. The WORDMARK — "Alpnexa" set in the system font stack at weight 700. These can be used together (wide or stacked layout) or the icon can be used independently. ─── ICON SVG PATHS (Master Reference) ─── ViewBox: "280 320 1500 960" Main mountain shape: d="M 346 1190 L 348 1209 L 373 1223 L 1697 1223 L 1721 1207 L 1717 1186 L 1471 964 L 1065 372 L 1044 359 L 1025 360 L 1006 378 L 717 785 L 658 796 Z M 1038 459 L 1240 751 L 1132 704 L 1063 620 L 1048 623 L 1042 636 L 1038 676 L 1053 730 L 1126 827 L 976 946 L 968 964 L 983 971 L 1045 968 L 1121 1047 L 949 1148 L 473 1150 L 697 861 L 745 859 L 763 843 Z" Fill rule: evenodd Teal accent slope: d="M 1047 624 L 658 1148 L 741 1149 L 1052 730 L 1037 676 Z" Color mapping per variant: Dark (light bg): Main=#133E5D Accent=#1297AB Text=#004C7F Light (dark bg): Main=#FFFFFF Accent=#00B6C9 Text=#FFFFFF Navy bg: Main=#FFFFFF Accent=#00B6C9 Text=#FFFFFF BG=#004C7F ─── LOGO VARIANTS ─── Icon Only: logo_icon_dark.svg Dark icon for light backgrounds logo_icon_light.svg White icon for dark backgrounds logo_icon_navy_bg.svg Icon on navy rounded square (app icon style) Wide (Horizontal): logo_wide_dark.svg Icon + "Alpnexa" text, dark, transparent bg logo_wide_light.svg Icon + "Alpnexa" text, white, transparent bg logo_wide_navy_bg.svg Icon + "Alpnexa" text on navy background strip Stacked (Vertical): logo_stacked_dark.svg Icon above "Alpnexa" text, dark, transparent bg logo_stacked_light.svg Icon above "Alpnexa" text, white, transparent bg Favicon / App Icon: favicon.svg 512×512 navy rounded square with white icon ─── CLEAR SPACE ─── Minimum clear space around the logo = height of the letter "A" in the wordmark (approximately 25% of the logo height). No graphics, text, or page edges should enter this zone. Icon-only usage: clear space = 20% of icon width on all sides. ─── MINIMUM SIZES ─── Wide logo: Minimum width: 120px Stacked logo: Minimum width: 80px Icon only: Minimum width: 24px Favicon / App icon: Recommended: 512px, minimum: 16px ================================================================================ 5. LOGO USAGE RULES ================================================================================ DO: - Use approved logo files only (never recreate) - Maintain original proportions - Use the correct color variant for the background - Keep the teal accent slope visible at all sizes - Center the stacked logo on splash/login screens DON'T: - Rotate the logo - Stretch or distort proportions - Change colors outside the approved palette - Add drop shadows, gradients, outlines, or effects - Place on busy or low-contrast backgrounds - Rearrange the icon/wordmark relationship - Crop or partially obscure the logo - Use teal for the main mountain shape - Remove the teal accent slope - Recreate in a different typeface - Place the dark variant on dark backgrounds (or vice versa) - Animate the logo without brand approval ================================================================================ 6. LOGO APPLICATION EXAMPLES ================================================================================ LIGHT BACKGROUNDS (white, #F7F9FB, #EEF3F8): Use: logo_wide_dark.svg or logo_stacked_dark.svg or logo_icon_dark.svg Icon fill: #133E5D | Accent: #1297AB | Text: #004C7F DARK BACKGROUNDS (navy #004C7F, dark navy #133E5D, photos, dark UI): Use: logo_wide_light.svg or logo_stacked_light.svg or logo_icon_light.svg Icon fill: #FFFFFF | Accent: #00B6C9 | Text: #FFFFFF NAVY BRANDED SURFACES: Use: logo_wide_navy_bg.svg or logo_icon_navy_bg.svg Background: #004C7F | Icon: #FFFFFF | Accent: #00B6C9 HEADERS / NAVIGATION: Light header → logo_wide_dark.svg, left-aligned, height 48–68px Dark header → logo_wide_light.svg, left-aligned, height 48–68px Compact → logo_icon_dark.svg or logo_icon_light.svg LOGIN / SPLASH SCREENS: Use: logo_stacked_dark.svg (light bg) or logo_stacked_light.svg (dark bg) Center horizontally and vertically. Max height: 180px. Tagline "Secure. Private. Yours." below in annotation color (#8892A0) SOCIAL MEDIA / PROFILE PICTURES: Use: favicon.svg or logo_icon_navy_bg.svg Square format, navy background ensures visibility on any platform EMAIL SIGNATURES: Use: logo_wide_dark.svg, max height 40px Below: Name, title, contact in Body Small (14px, #1A2A3A) ================================================================================ 7. APPLICATION ICON SYSTEM ================================================================================ Application icons represent individual services in the Authentik user library and other dashboards. They follow a consistent design language so the full suite looks cohesive and branded. ─── ICON ANATOMY ─── Every app icon has these layers (bottom to top): 1. BACKGROUND — Navy (#004C7F) rounded square 2. SYMBOL — White (#FFFFFF) stroked/filled icon representing the service 3. INNER FILLS — Dark Navy (#133E5D) for enclosed shapes (screens, shields, etc.) 4. ACCENTS — Teal (#00B6C9) highlights, dots, bars, badges 5. LABEL — Service name in white at the bottom 6. SUB-LABEL (optional) — Secondary name/instance in teal below the label 7. BADGE (optional) — Teal circle with number/abbreviation for variants ─── ICON CATEGORIES ─── Category Icon Style ────────────────────────── ────────────────────────────────────── AI / LLM Brain, lightning, neural nodes Authentication / SSO Shield + key Documents / PDF Document shape with folded corner Workflow / Automation Connected nodes graph Terminal / CLI Terminal window with prompt chevron Chat / Communication Chat bubble with dots Security / Privacy Padlock, shield Links / URL Chain link Downloads / Storage Download arrow with tray Smart Home House outline with windows/door Firewall / Network Shield with bars, hub with spokes Server / Virtualization Server rack stack Containers / Docker Container grid Code Editor Editor window with code brackets <> Remote Desktop Monitor with cursor/window Hardware Management Server chassis with port indicator Performance / Stats Chart lines, bar graphs, magnifying glass Backup Clock overlay on server ─── VARIANT SYSTEM ─── When multiple instances of a service exist, differentiate with: 1. NUMBERED BADGE — Teal circle in top-right or bottom-right with number (1, 2, 3, 4) in navy bold text 2. TEXT BADGE — Teal circle with abbreviation (CS, LLM, etc.) 3. SUB-LABEL — Different subtitle below the main label Example: "Portainer" (main) + "CriticalServices" (sub in teal) 4. OS/PLATFORM BADGE — Ubuntu orange circle, Windows blue square, etc. for platform-specific variants of the same service ================================================================================ 8. APPLICATION ICON DESIGN SPECIFICATION ================================================================================ This section provides exact specifications so future icons match perfectly. ─── CANVAS ─── Size: 512 × 512 px Format: SVG (scalable) ViewBox: "0 0 512 512" ─── BACKGROUND ─── Element: Size: 512 × 512 (full canvas) Fill: #004C7F (Navy) Corner radius: rx="96" ry="96" ─── SYMBOL AREA ─── Safe zone: 64px inset from each edge (symbol area = 384 × 384) Symbol center: Horizontally centered (x=256) Symbol vertical: Centered slightly above middle (~y=200–230) to leave room for the label below ─── STROKES ─── Primary strokes: #FFFFFF, stroke-width: 10–14 Accent strokes: #00B6C9, stroke-width: 8–14 Stroke-linecap: round Stroke-linejoin: round Never use hairline strokes (< 6px) — they vanish at small sizes ─── FILLS ─── Icon body: #133E5D (Dark Navy) for enclosed shapes Accent fills: #00B6C9 (Teal) for highlights, dots, indicators White fills: #FFFFFF for primary shapes, text Opacity variants: Use opacity="0.3"–"0.6" for secondary elements ─── LABEL (Bottom Text) ─── Position: x="256" (centered), y=440–460 Font: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif Size: 22–42px depending on text length Weight: 700 (bold) Fill: #FFFFFF Text-anchor: middle Guidelines for label size: 1–4 characters: 40–42px 5–8 characters: 30–36px 9–14 characters: 22–26px 15+ characters: 20–22px (or split into label + sub-label) ─── SUB-LABEL (Optional) ─── Position: x="256" (centered), y=470–478 (below main label) Font: Same as label Size: 20–24px Weight: 600 Fill: #00B6C9 (Teal) Text-anchor: middle ─── BADGE (Optional, for variants) ─── Shape: Circle Size: r=32–42 Position: Top-right (translate ~370,130) or bottom-right (~370,320) Background: #00B6C9 (Teal) Text fill: #004C7F (Navy) Text size: 20–40px depending on content Text weight: 800 ─── PLATFORM BADGE (Optional) ─── Ubuntu: Circle r=42, fill=#E95420, with simplified "circle of friends" motif (3 white dots on ring) Windows: Rect with rx=12, fill=#0078D4, with 4 white squares Linux/Tux: Circle with simplified penguin outline ─── TEMPLATE SVG STRUCTURE ─── XX Service Name Instance ─── DESIGN CHECKLIST FOR NEW ICONS ─── [ ] Canvas is 512×512 with viewBox="0 0 512 512" [ ] Navy background rect with rx/ry=96 [ ] Symbol is recognizable at 64px (test by scaling down) [ ] White primary strokes, stroke-width ≥ 10 [ ] Teal accents present but not dominant [ ] Inner fills use #133E5D (not black or navy) [ ] Label text is readable and correctly sized for length [ ] Sub-label in teal if needed [ ] Badge uses teal circle with navy text [ ] No fine details that disappear at small sizes [ ] Consistent with existing icon set visual weight [ ] No gradients or effects (flat design only) [ ] SVG is clean, no unnecessary groups or transforms ================================================================================ 9. UI COMPONENT STYLING ================================================================================ Consistent styling for UI elements across all Alpnexa-branded applications. ─── BUTTONS ─── Primary: Background: #00B6C9 Border: #00B6C9 Text: #FFFFFF Weight: 600 Radius: 8px Min height: 40px (48px on login forms) Hover: bg #00D4E8, shadow 0 4px 12px rgba(0,182,201,0.35) Active: bg #009BAA Transition: all 0.2s ease Secondary / Outline: Background: transparent Border: #00B6C9 Text: #00B6C9 Hover: bg rgba(0,182,201,0.06), border #00D4E8 Active: bg rgba(0,182,201,0.12) Tertiary: Same as secondary ─── CARDS ─── Border-radius: 12px Border: 1px solid #E4E8EC Background: #FFFFFF Hover: border-color #00B6C9 box-shadow 0 8px 24px rgba(0,182,201,0.15) transform translateY(-2px) Transition: all 0.25s ease ─── INPUT FIELDS ─── Border-radius: 8px Border: 1px solid #E4E8EC Focus border: #00B6C9 Focus shadow: 0 0 0 2px rgba(0,182,201,0.2) Padding: 0.75rem 1rem Font-size: 0.95rem ─── TOGGLES / SWITCHES ─── Checked color: #00B6C9 ─── TABS ─── Active indicator: border-bottom 2px solid #00B6C9 Active text: #00B6C9 ─── BADGES ─── Primary/unread: bg #00B6C9, text #FFFFFF Read/secondary: bg rgba(0,182,201,0.1), text #00B6C9 ─── LINKS ─── Default: #00B6C9 (or #00899A on light bg for WCAG) Hover: #00D4E8 Visited: #009BAA Header links: inherit (white on dark header, dark on light header) ─── TOOLTIPS ─── Background: #133E5D Text: #FFFFFF Radius: 6px ─── DROPDOWNS ─── Radius: 8px Shadow: 0 8px 24px rgba(0,0,0,0.12) Item hover: bg rgba(0,182,201,0.08), text #004C7F Z-index: 9999 (prevent clipping) ─── MODALS ─── Radius: 12px Shadow: 0 16px 48px rgba(0,0,0,0.2) ─── TABLES ─── Row hover: bg rgba(0,182,201,0.04) Header: weight 600, color #133E5D ─── SCROLLBAR (WebKit) ─── Width: 6px Track: transparent Thumb: rgba(0,76,127,0.15), radius 3px Thumb hover: rgba(0,76,127,0.3) ─── SELECTION (::selection) ─── Background: rgba(0,182,201,0.25) ─── PROGRESS BARS ─── Fill: #00B6C9 ================================================================================ 10. WEB APPLICATION THEMING ================================================================================ ─── AUTHENTIK (auth.alpnexa.com) ─── Framework: PatternFly (pf-c-* classes) CSS location: Brand settings > Custom CSS field Reference file: alpnexa_authentik_custom.css Shadow DOM note: Authentik uses heavy shadow DOM. CSS applies to outer document only. Inner shadow DOM requires JS traversal. Key customizations: - Header: Navy gradient bg with white logo (inverted via CSS filter) - Buttons: Teal primary, teal outline secondary - Cards: 12px radius, teal hover border - Login: 16px rounded card, gradient teal button, 48px height - Sidebar: Teal active/hover with indicator bar - Logo: Wide SVG injected via CSS content property (data URI) - Flows: Titles changed to "Welcome to Alpnexa!" ─── ROCKETCHAT ─── CSS location: Administration > Settings > Layout > Custom CSS Reference file: alpnexa_rocketchat_custom.css Theme: Dark theme with teal accents Key customizations: - Token overrides for buttons, fonts, badges - Navbar icons enlarged to 22px - Sidebar: Teal hover/selected states - "Powered by Rocket.Chat" footer hidden - Local login form hidden (SSO only) - SSO button: Teal, 10px radius, 48px min height - Rocket.Chat branded homepage cards hidden ─── THEMING NEW APPLICATIONS ─── When adding a new application to the Alpnexa stack: 1. Set the app icon to the corresponding Alpnexa-branded SVG 2. Apply these CSS variable overrides where supported: --primary-color: #00B6C9 --primary-hover: #00D4E8 --primary-active: #009BAA --accent-color: #004C7F --text-color: #1A2A3A --heading-color: #133E5D --background: #F7F9FB --border-radius: 8px (inputs), 12px (cards) 3. Replace vendor logos with Alpnexa variants 4. Update page titles to reference "Alpnexa" instead of vendor name 5. Hide vendor branding footers where possible 6. Use SSO via Authentik wherever possible 7. Test readability: dark text on light bg, white text on dark bg ================================================================================ 11. SPACING, RADIUS & ELEVATION ================================================================================ ─── BORDER RADIUS ─── Buttons: 8px Input fields: 8px Cards: 12px Modals/dialogs: 12px Login cards: 16px Tooltips: 6px Dropdowns: 8px App icon bg: 96px (on 512px canvas = ~18.75%) Scrollbar thumb: 3px Badges: full (50% / pill) ─── SPACING SCALE (8px base) ─── 4px — tight (between icon and label) 8px — compact (between related elements) 12px — default (between form elements) 16px — standard (between sections) 24px — comfortable (between card groups) 32px — spacious (between major sections) 48px — generous (page margins, hero padding) 64px — icon safe zone inset (on 512px canvas) ─── ELEVATION / SHADOWS ─── Level 0 (flat): none Level 1 (raised): 0 2px 8px rgba(0,0,0,0.08) Level 2 (card): 0 4px 16px rgba(0,0,0,0.1) Level 3 (dropdown): 0 8px 24px rgba(0,0,0,0.12) Level 4 (modal): 0 16px 48px rgba(0,0,0,0.2) Level 5 (header): 0 2px 12px rgba(0,76,127,0.3) Teal glow: 0 4px 12px rgba(0,182,201,0.35) (hover CTA) Teal strong glow: 0 6px 20px rgba(0,182,201,0.4) (login button hover) ─── TRANSITIONS ─── Default: all 0.2s ease Cards: all 0.25s ease Links: color 0.15s ease ================================================================================ 12. ACCESSIBILITY & CONTRAST ================================================================================ All color combinations must meet WCAG 2.1 AA minimum: - Normal text: 4.5:1 contrast ratio - Large text: 3:1 contrast ratio - UI components: 3:1 contrast ratio ─── VERIFIED COMBINATIONS ─── Text Color Background Ratio Pass? ───────────── ────────── ───── ───── #1A2A3A #FFFFFF 14.5:1 ✅ AAA #1A2A3A #F7F9FB 13.8:1 ✅ AAA #133E5D #FFFFFF 9.5:1 ✅ AAA #004C7F #FFFFFF 7.2:1 ✅ AAA #00899A #FFFFFF 3.5:1 ✅ AA (large text) #FFFFFF #004C7F 7.2:1 ✅ AAA #FFFFFF #133E5D 9.5:1 ✅ AAA #00B6C9 #004C7F 3.9:1 ✅ AA (large text) #00B6C9 #133E5D 4.3:1 ✅ AA #FFFFFF #00B6C9 2.8:1 ⚠️ Large text only NOTE: #00B6C9 on white (#FFFFFF) = 2.6:1 — FAILS WCAG for text. Use #00899A (Dark Teal) for body-size link text on white backgrounds. #00B6C9 is acceptable for large text (18px+ bold or 24px+ regular), icons, and non-text UI elements on white. ─── FOCUS INDICATORS ─── All interactive elements must show a visible focus ring: box-shadow: 0 0 0 2px rgba(0,182,201,0.2) border-color: #00B6C9 Focus ring must be visible on both light and dark backgrounds. ================================================================================ 13. BRAND VOICE & MESSAGING ================================================================================ Tone: Confident, clear, technical but approachable Keywords: Secure, private, self-hosted, independent, reliable, modern Avoid: Hype, buzzwords, vague claims, overly casual language ─── TAGLINE ─── "Secure. Private. Yours." Each word followed by a period to emphasize deliberateness and conviction. Use consistently in marketing materials, login screens, and about pages. ─── NAMING CONVENTIONS ─── Services: "Alpnexa [Service]" — e.g., Alpnexa LLM, Alpnexa Downloads Instances: "[Service] [Qualifier]" — e.g., Proxmox PBS, VSCode Server LLM Internal: Use descriptive names — e.g., "CriticalServices Portainer" ─── FLOW TITLES (Authentik) ─── Use "Welcome to Alpnexa!" for all authentication flows. Append context where needed: "Welcome to Alpnexa! Please select a username." Never reference third-party vendor names in user-facing flow titles. ================================================================================ 14. FILE INVENTORY ================================================================================ ─── BRAND IDENTITY FILES ─── alpnexa_ci_guide.txt This document (brand guidelines) logo_icon_dark.svg Icon, dark fill, transparent bg logo_icon_light.svg Icon, white fill, transparent bg logo_icon_navy_bg.svg Icon on navy rounded square logo_wide_dark.svg Wide logo, dark, transparent bg logo_wide_light.svg Wide logo, white, transparent bg logo_wide_navy_bg.svg Wide logo on navy background logo_stacked_dark.svg Stacked logo, dark, transparent bg logo_stacked_light.svg Stacked logo, white, transparent bg favicon.svg 512×512 favicon / app icon ─── PLATFORM CSS ─── alpnexa_authentik_custom.css Authentik custom CSS (paste into brand settings) alpnexa_authentik_changelog.txt Change log for Authentik modifications alpnexa_authentik_favicon.svg Favicon specifically for Authentik alpnexa_authentik_logo_wide.svg Wide header logo for Authentik alpnexa_rocketchat_custom.css RocketChat custom CSS (paste into layout settings) ─── APPLICATION ICONS ─── 0 Tools / AI: alpnexa_llm.svg Alpnexa LLM (brain icon) alpnexa_litellm.svg Alpnexa LiteLLM (lightning + nodes) alpnexa_ai_sso.svg Alpnexa AI SSO (shield + key) alpnexa_pdf_tools.svg Alpnexa PDF Tools (document + gear) alpnexa_n8n.svg N8N Workflows (connected nodes) alpnexa_openclaw.svg OpenClaw UI (terminal window) alpnexa_openclaw_ubuntu.svg OpenClaw Ubuntu Desktop (desktop + Ubuntu badge) Data Sharing & Links: alpnexa_downloads.svg Alpnexa Downloads (download arrow + tray) alpnexa_rocketchat.svg Alpnexa RocketChat (chat bubble) alpnexa_privatebin.svg PrivateBin (padlock) alpnexa_shortlink.svg Shortlink (chain link) alpnexa_shortlink_privatebin.svg Shortlink + PrivateBin combined alpnexa_breeze_documents.svg Breeze Documents (document + wind) alpnexa_qrpdf.svg QRPDF (QR code + PDF badge) Home Assistant: alpnexa_homeassistant.svg Generic Home Assistant (house) alpnexa_homeassistant_1.svg Home Assistant Instance 1 alpnexa_homeassistant_2.svg Home Assistant Instance 2 alpnexa_homeassistant_3.svg Home Assistant Instance 3 alpnexa_homeassistant_4.svg Home Assistant Instance 4 Networking Infrastructure: alpnexa_opnsense.svg OPNsense (shield + firewall bars) alpnexa_opnsense_performance.svg OPNsense Performance Monitor (chart + magnifier) alpnexa_opnsense_stats.svg OPNsense Stats (shield + bar chart) alpnexa_traefik.svg Traefik Dashboard (network hub) Server: alpnexa_proxmox.svg Proxmox VE (server stack) alpnexa_proxmox_pbs.svg Proxmox Backup Server (server + clock) alpnexa_portainer.svg Portainer (container grid) alpnexa_portainer_cs.svg CriticalServices Portainer (+ CS badge) alpnexa_portainer_docker2.svg Docker 2 Portainer (+ 2 badge) alpnexa_portainer_docker_llm.svg Docker LLM Portainer (+ LLM badge) Remote Desktop: alpnexa_openterminal.svg OpenTerminal (terminal window) alpnexa_openterminal_linux.svg OpenTerminal Linux (+ Ubuntu badge) alpnexa_rdp.svg RDP generic (desktop window) alpnexa_rdp_windows.svg RDP Windows/Ubuntu (+ Windows badge) alpnexa_rustdesk.svg RustDesk Client Generator (monitor + cursor) alpnexa_vscode.svg VSCode Server (code editor) alpnexa_vscode_cs.svg VSCode Server CriticalServices (+ CS badge) alpnexa_vscode_docker_llm.svg VSCode Server Docker LLM (+ LLM badge) alpnexa_vscode_docker2.svg VSCode Server Docker2 (+ 2 badge) alpnexa_ilo.svg iLO ML350 Gen 10 (server chassis) Reference: README_app_icons.txt Quick reference for app icons ================================================================================ 15. QUICK REFERENCE FOR DESIGNERS ================================================================================ ┌──────────────────────────────────────────────────────────────────┐ │ COLORS (copy-paste ready) │ │ │ │ Navy: #004C7F Dark Navy: #133E5D │ │ Teal: #00B6C9 Teal Hover: #00D4E8 │ │ Teal Pressed: #009BAA Teal Alt: #1297AB │ │ Dark Teal: #00899A White: #FFFFFF │ │ Light BG: #F7F9FB Medium BG: #EEF3F8 │ │ Border: #E4E8EC Body Text: #1A2A3A │ │ Hint: #A0AAB4 Annotation: #8892A0 │ ├──────────────────────────────────────────────────────────────────┤ │ RADIUS │ │ │ │ Buttons/inputs: 8px │ Cards/modals: 12px │ Login: 16px │ │ App icon bg: 96px (on 512px) │ Tooltips: 6px │ ├──────────────────────────────────────────────────────────────────┤ │ FONTS │ │ │ │ -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif │ │ Bold=700 Semi-Bold=600 Regular=400 │ ├──────────────────────────────────────────────────────────────────┤ │ APP ICON TEMPLATE │ │ │ │ 512×512 SVG │ BG: #004C7F rx=96 │ Symbol: white strokes 10-14 │ │ Inner fills: #133E5D │ Accents: #00B6C9 │ Label: white bold │ │ Badge: teal circle, navy text │ Sub-label: teal 600 │ ├──────────────────────────────────────────────────────────────────┤ │ LOGO ICON PATH (viewBox 280 320 1500 960) │ │ │ │ Dark: main=#133E5D accent=#1297AB text=#004C7F │ │ Light: main=#FFFFFF accent=#00B6C9 text=#FFFFFF │ └──────────────────────────────────────────────────────────────────┘ ================================================================================ © 2026 Alpnexa. All rights reserved. ================================================================================