{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "press-kit-brand-assets", "title": "Press Kit Brand Assets", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/press-kit-brand-assets/press-kit-brand-assets.component.ts", "content": "// Brand guidelines and press kit hub: official logo downloads (SVG/4K PNG/WebP),\n// OKLCH brand palette tokens, executive leadership headshots (300 DPI), and press\n// contact resources. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, computed, signal } from '@angular/core'\nimport {\n Check,\n CheckCircle2,\n Copy,\n Download,\n ExternalLink,\n FileArchive,\n FileCode,\n FileImage,\n FileText,\n Globe,\n Info,\n Layers,\n LucideAngularModule,\n Mail,\n Palette,\n ShieldCheck,\n User,\n XCircle,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiAvatarComponent, UiAvatarFallbackComponent, UiAvatarImageComponent } from '@/ui/avatar/avatar.component'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport {\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardFooterComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n} from '@/ui/card/card.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\n\nexport interface LogoAsset {\n id: string\n title: string\n category: string\n description: string\n dimensions: string\n bestFor: string\n theme: 'light' | 'dark' | 'adaptive'\n formats: { label: string; ext: string; size: string }[]\n}\n\nexport interface BrandColor {\n id: string\n name: string\n hex: string\n oklch: string\n rgb: string\n role: string\n contrast: string\n usage: string\n bgClass: string\n textDark?: boolean\n}\n\nexport interface Executive {\n id: string\n name: string\n role: string\n bio: string\n avatarUrl?: string\n initials: string\n fileSize: string\n dimensions: string\n topics: string[]\n socials: { platform: 'x' | 'linkedin' | 'github'; url: string }[]\n}\n\nexport interface BrandGuidelineRule {\n type: 'do' | 'dont'\n text: string\n}\n\nconst DEFAULT_LOGOS: LogoAsset[] = [\n {\n id: 'horizontal-primary',\n title: 'Primary Horizontal Logo',\n category: 'Full Wordmark',\n description: 'The standard lockup combining the faceted block logomark with horizontal typography and .dev badge.',\n dimensions: '3840 × 1080 px',\n bestFor: 'Light surfaces, navigation bars, marketing hero headers, and pitch decks.',\n theme: 'light',\n formats: [\n { label: 'Vector SVG', ext: 'svg', size: '14 KB' },\n { label: '4K PNG (Alpha)', ext: 'png', size: '280 KB' },\n { label: 'Modern WebP', ext: 'webp', size: '94 KB' },\n ],\n },\n {\n id: 'app-icon-mark',\n title: 'Square App Icon Mark',\n category: 'Logomark Symbol',\n description: 'Standalone geometric prism icon optimized for square aspect ratios and high-density icons.',\n dimensions: '1024 × 1024 px',\n bestFor: 'Favicons, desktop dock icons, app store assets, and square social avatars.',\n theme: 'adaptive',\n formats: [\n { label: 'Vector SVG', ext: 'svg', size: '8 KB' },\n { label: 'High-Res PNG', ext: 'png', size: '165 KB' },\n { label: 'Icon WebP', ext: 'webp', size: '62 KB' },\n ],\n },\n {\n id: 'monochrome-dark',\n title: 'Dark Mode Monochromatic Logo',\n category: 'Dark Backgrounds',\n description: 'Single-tone pure-white silhouette engineered for deep slate surfaces and obsidian backgrounds.',\n dimensions: '3840 × 1080 px',\n bestFor: 'Developer terminals, dark theme dashboards, midnight wallpapers, and video overlays.',\n theme: 'dark',\n formats: [\n { label: 'Vector SVG', ext: 'svg', size: '12 KB' },\n { label: '4K PNG (White)', ext: 'png', size: '240 KB' },\n { label: 'Dark WebP', ext: 'webp', size: '88 KB' },\n ],\n },\n {\n id: 'monochrome-light',\n title: 'Light Mode Inverted Logo',\n category: 'Print & Documents',\n description: 'High-density obsidian monochrome lockup for single-ink printing and high-contrast editorial media.',\n dimensions: '3840 × 1080 px',\n bestFor: 'Whitepapers, physical print collateral, invoices, PDF documents, and newsprint.',\n theme: 'light',\n formats: [\n { label: 'Vector SVG', ext: 'svg', size: '12 KB' },\n { label: '4K PNG (Black)', ext: 'png', size: '235 KB' },\n { label: 'Print WebP', ext: 'webp', size: '85 KB' },\n ],\n },\n]\n\nconst DEFAULT_COLORS: BrandColor[] = [\n {\n id: 'primary-emerald',\n name: 'Primary Emerald',\n hex: '#10B981',\n oklch: 'oklch(0.696 0.170 162.48)',\n rgb: 'rgb(16, 185, 129)',\n role: 'Primary Interactive Brand Color',\n contrast: 'WCAG AAA 7.4:1',\n usage: 'Primary brand color for CTAs, active pills, key highlights, and success indicators.',\n bgClass: 'bg-[#10B981]',\n textDark: true,\n },\n {\n id: 'midnight-slate',\n name: 'Midnight Slate',\n hex: '#0F172A',\n oklch: 'oklch(0.208 0.042 265.75)',\n rgb: 'rgb(15, 23, 42)',\n role: 'Dark Neutral Surface Base',\n contrast: 'WCAG AAA 16.2:1',\n usage: 'Core neutral background and high-contrast dark surface foundations across dark layouts.',\n bgClass: 'bg-[#0F172A]',\n textDark: false,\n },\n {\n id: 'accent-blue',\n name: 'Accent Blue',\n hex: '#3B82F6',\n oklch: 'oklch(0.623 0.214 259.80)',\n rgb: 'rgb(59, 130, 246)',\n role: 'Secondary Interactive Accent',\n contrast: 'WCAG AA 4.8:1',\n usage: 'Secondary accent for active links, information badges, focus rings, and secondary metrics.',\n bgClass: 'bg-[#3B82F6]',\n textDark: true,\n },\n {\n id: 'background-base',\n name: 'Background Base',\n hex: '#F8FAFC',\n oklch: 'oklch(0.985 0.002 247.80)',\n rgb: 'rgb(248, 250, 252)',\n role: 'Light Neutral Surface Fills',\n contrast: 'WCAG AAA 19.5:1',\n usage: 'Clean ambient light surface foundation, card backgrounds, and elevated container fills.',\n bgClass: 'bg-[#F8FAFC]',\n textDark: true,\n },\n {\n id: 'amber-highlight',\n name: 'Amber Highlight',\n hex: '#F59E0B',\n oklch: 'oklch(0.769 0.188 70.08)',\n rgb: 'rgb(245, 158, 11)',\n role: 'Warning & Spotlight Accent',\n contrast: 'WCAG AAA 8.1:1',\n usage: 'Warm highlight for warnings, pro tier tags, system notices, and featured sponsor badges.',\n bgClass: 'bg-[#F59E0B]',\n textDark: true,\n },\n]\n\nconst DEFAULT_EXECUTIVES: Executive[] = [\n {\n id: 'elena-rostova',\n name: 'Elena Rostova',\n role: 'Chief Executive Officer & Co-Founder',\n bio: 'Pioneered component registry architecture and headless design systems. Former principal architect at NextGen UI. Leading UIPKGE’s mission to make design-engineering frictionless for global software teams.',\n avatarUrl: 'https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?q=80&w=400&auto=format&fit=crop',\n initials: 'ER',\n fileSize: '12.4 MB',\n dimensions: '4000 × 5000 px · 300 DPI',\n topics: ['Component Architecture', 'Design Systems', 'Open-Source Sustainability', 'Developer Experience'],\n socials: [\n { platform: 'x', url: 'https://x.com/elenarostova' },\n { platform: 'linkedin', url: 'https://linkedin.com/in/elenarostova' },\n { platform: 'github', url: 'https://github.com/elenarostova' },\n ],\n },\n {\n id: 'marcus-vance',\n name: 'Marcus Vance',\n role: 'Chief Technology Officer & Co-Founder',\n bio: 'Specializes in multi-framework compiler tooling, zero-runtime tokens, and high-performance WebAssembly render pipelines. Previously led frontend infrastructure and UI performance engineering at CloudScale.',\n avatarUrl: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=400&auto=format&fit=crop',\n initials: 'MV',\n fileSize: '11.8 MB',\n dimensions: '4000 × 5000 px · 300 DPI',\n topics: ['Web Performance', 'AST Tooling', 'Tailwind v4 Engine', 'Reka UI Headless Core'],\n socials: [\n { platform: 'x', url: 'https://x.com/marcusvance' },\n { platform: 'linkedin', url: 'https://linkedin.com/in/marcusvance' },\n { platform: 'github', url: 'https://github.com/marcusvance' },\n ],\n },\n]\n\nconst DEFAULT_GUIDELINES: BrandGuidelineRule[] = [\n { type: 'do', text: 'Maintain minimum clear space equal to 50% of the logomark height around all sides.' },\n { type: 'do', text: 'Use the official OKLCH and Hex values when reproducing brand swatches in digital media.' },\n { type: 'do', text: 'Use high-contrast monochromatic variants for single-color print, laser etching, or stamps.' },\n { type: 'dont', text: 'Do not stretch, distort, rotate, or alter the aspect ratio of official logo assets.' },\n { type: 'dont', text: 'Do not add drop shadows, outer glows, strokes, or unapproved gradients to the mark.' },\n { type: 'dont', text: 'Do not place the full-color primary mark on low-contrast or visually busy backgrounds.' },\n]\n\ntype PressKitTab = 'all' | 'logos' | 'colors' | 'leadership' | 'press'\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-press-kit-brand-assets, [ui-press-kit-brand-assets]',\n standalone: true,\n // React renders the root
itself: the host stays out of layout and `class` goes to the root.\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiAvatarComponent,\n UiAvatarFallbackComponent,\n UiAvatarImageComponent,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardFooterComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiSeparatorComponent,\n ],\n template: `\n
\n
\n \n
\n
\n
\n
\n \n \n Media & Brand Hub\n \n \n {{ version }}\n \n Updated {{ lastUpdated }}\n
\n\n

\n {{ title }}\n

\n\n

\n {{ subtitle }}\n

\n\n
\n
\n \n Editorial Use License (CC BY-NC 4.0)\n
\n \n
\n \n 24 Verified Brand Assets\n
\n \n
\n \n Vector & 300 DPI Print Ready\n
\n
\n
\n\n
\n \n @if (downloadedKey() === 'all-zip') {\n \n } @else {\n \n }\n \n {{\n downloadedKey() === 'all-zip'\n ? 'Press Kit Downloaded'\n : 'Download Complete Press Kit (.ZIP · ' + pressKitZipSize + ')'\n }}\n \n \n\n
\n \n @if (copiedKey() === 'email-header') {\n \n } @else {\n \n }\n {{ copiedKey() === 'email-header' ? 'Copied' : 'Press Desk' }}\n \n\n \n @if (copiedKey() === 'boilerplate-header') {\n \n } @else {\n \n }\n {{ copiedKey() === 'boilerplate-header' ? 'Copied' : 'Boilerplate' }}\n \n
\n
\n
\n
\n\n \n @if (variant === 'default') {\n
\n \n \n All Assets\n \n \n \n Logos & Marks ({{ activeLogos().length }})\n \n \n \n Color Palette ({{ activeColors().length }})\n \n \n \n Leadership ({{ activeExecutives().length }})\n \n \n \n Press Contact\n \n
\n }\n\n \n @if (activeTab() === 'all' || activeTab() === 'logos') {\n
\n
\n
\n
\n \n Official Vectors & Assets\n
\n

Official Logo Downloads

\n

\n High-resolution vector assets for print and digital publishing. Please preserve minimum clear space.\n

\n
\n \n 4 Approved Variants\n \n
\n\n
\n @for (logo of activeLogos(); track logo.id) {\n \n
\n
\n {{ logoPreviewLabel(logo) }}\n
\n \n {{ logo.dimensions }}\n \n
\n
\n\n
\n
\n

{{ logo.title }}

\n {{ logo.category }}\n
\n

\n {{ logo.description }}\n

\n
\n \n Best for: {{ logo.bestFor }}\n
\n
\n
\n\n
\n
\n
\n Available Formats\n Vector & Bitmaps\n
\n
\n @for (fmt of logo.formats; track fmt.ext) {\n \n
\n @if (downloadedKey() === logo.id + '-' + fmt.ext) {\n \n } @else {\n \n }\n {{ fmt.label.split(' ')[0] }}\n
\n {{ fmt.size }}\n \n }\n
\n
\n
\n
\n }\n
\n
\n }\n\n \n @if (activeTab() === 'all' || activeTab() === 'colors') {\n
\n
\n
\n
\n \n Token Palette & Swatches\n
\n

Official Brand Palette & OKLCH

\n

\n Perceptually uniform color tokens with high WCAG contrast ratings for both dark and light UI surfaces.\n

\n
\n \n 5 Core Swatches\n \n
\n\n
\n @for (color of activeColors(); track color.id) {\n
\n
\n
\n
\n \n {{ color.contrast }}\n \n
\n
\n \n {{ color.hex }}\n \n
\n
\n\n
\n
\n

{{ color.name }}

\n

{{ color.role }}

\n
\n\n

\n {{ color.usage }}\n

\n\n
\n \n {{ color.hex }}\n \n @if (copiedKey() === 'hex-' + color.id) {\n \n } @else {\n \n }\n {{ copiedKey() === 'hex-' + color.id ? 'Copied' : 'HEX' }}\n \n
\n\n \n \n {{ oklchInner(color.oklch) }}\n \n \n @if (copiedKey() === 'oklch-' + color.id) {\n \n } @else {\n \n }\n {{ copiedKey() === 'oklch-' + color.id ? 'Copied' : 'OKLCH' }}\n \n
\n
\n
\n
\n
\n }\n
\n
\n }\n\n \n @if (activeTab() === 'all' || activeTab() === 'leadership') {\n
\n
\n
\n
\n \n Media Spokespersons\n
\n

Executive Leadership & Bios

\n

\n Official executive headshots and media blurbs for press releases, podcasts, and event keynotes.\n

\n
\n \n 300 DPI Studio Photography\n \n
\n\n
\n @for (exec of activeExecutives(); track exec.id) {\n
\n
\n
\n \n \n \n {{ exec.initials }}\n \n \n\n
\n
\n

{{ exec.name }}

\n Executive\n
\n

{{ exec.role }}

\n

{{ exec.dimensions }}

\n
\n
\n\n

\n {{ exec.bio }}\n

\n\n
\n Speaking Topics & Focus Areas:\n
\n @for (topic of exec.topics; track topic) {\n \n {{ topic }}\n \n }\n
\n
\n
\n\n \n
\n \n {{ exec.fileSize }} RAW TIFF & JPG\n
\n\n \n @if (downloadedKey() === 'headshot-' + exec.id) {\n \n } @else {\n \n }\n {{\n downloadedKey() === 'headshot-' + exec.id\n ? 'Headshot Downloaded'\n : 'Download Headshot (300 DPI)'\n }}\n \n
\n
\n }\n
\n \n }\n\n \n @if (activeTab() === 'all' || activeTab() === 'press') {\n
\n
\n
\n
\n
\n \n Press & Media Inquiries\n
\n {{ version }}\n
\n

Get in Touch with Media Relations

\n

\n Direct access for accredited tech journalists, conference organizers, analysts, and podcast hosts.\n

\n
\n\n
\n \n
\n
\n \n
\n
\n

{{ pressEmail }}

\n

Official Media & Inquiries Desk

\n
\n
\n \n @if (copiedKey() === 'press-email') {\n \n } @else {\n \n }\n {{ copiedKey() === 'press-email' ? 'Copied' : 'Copy' }}\n \n
\n\n
\n
\n
\n \n < 24h Response\n
\n

\n Prompt turnaround on verified interview and quote requests.\n

\n
\n\n
\n
\n \n Embargo Previews\n
\n

\n Advance beta access and documentation under NDA/embargo.\n

\n
\n
\n
\n\n
\n
\n Need company numbers & metrics?\n \n @if (downloadedKey() === 'factsheet-pdf') {\n \n } @else {\n \n }\n {{\n downloadedKey() === 'factsheet-pdf'\n ? 'Downloaded'\n : 'Company Fact Sheet (.PDF · ' + factSheetPdfSize + ')'\n }}\n \n
\n
\n
\n\n
\n
\n
\n
\n \n Brand Rules & Boilerplate\n
\n \n @if (copiedKey() === 'boilerplate-text') {\n \n } @else {\n \n }\n {{ copiedKey() === 'boilerplate-text' ? 'Copied Boilerplate' : 'Copy Boilerplate' }}\n \n
\n

Official Company Boilerplate

\n

\n Approved copy for standard \"About the Company\" sections in press releases and event booklets.\n

\n
\n\n
\n \n \"{{ boilerplateText }}\"\n
\n\n
\n Brand Usage Rules:\n
\n @for (rule of visibleGuidelines(); track rule.text) {\n
\n @if (rule.type === 'do') {\n \n } @else {\n \n }\n {{ rule.text }}\n
\n }\n
\n
\n
\n\n
\n
\n Questions regarding brand trademark usage?\n \n Contact Legal Desk\n \n \n
\n
\n \n \n }\n \n \n `,\n})\nexport class UiPressKitBrandAssetsComponent {\n protected readonly Check = Check\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly Copy = Copy\n protected readonly Download = Download\n protected readonly ExternalLink = ExternalLink\n protected readonly FileArchive = FileArchive\n protected readonly FileCode = FileCode\n protected readonly FileImage = FileImage\n protected readonly FileText = FileText\n protected readonly Globe = Globe\n protected readonly Info = Info\n protected readonly Layers = Layers\n protected readonly Mail = Mail\n protected readonly Palette = Palette\n protected readonly ShieldCheck = ShieldCheck\n protected readonly User = User\n protected readonly XCircle = XCircle\n\n @Input() companyName = 'UIPKGE'\n @Input() title = 'Brand Guidelines & Press Kit'\n @Input() subtitle = 'Official logos, brand colors, typography rules, and executive media assets.'\n @Input() version = 'v2.4'\n @Input() lastUpdated = 'August 2026'\n @Input() pressEmail = 'press@uipkge.dev'\n @Input() pressKitZipSize = '48 MB'\n @Input() pressKitZipUrl = '#'\n @Input() factSheetPdfSize = '2.4 MB'\n @Input()\n boilerplateText =\n 'UIPKGE is an open-source multi-framework UI registry providing accessible standalone components for Vue, React, and Angular with 100% code ownership. Headquartered in San Francisco with a distributed core maintainer team.'\n @Input() variant: 'default' | 'compact' = 'default'\n @Input('class') className?: string\n\n private readonly logosInput = signal(undefined)\n private readonly colorsInput = signal(undefined)\n private readonly executivesInput = signal(undefined)\n private readonly guidelinesInput = signal(undefined)\n\n @Input() set logos(v: LogoAsset[] | undefined) {\n this.logosInput.set(v)\n }\n @Input() set colors(v: BrandColor[] | undefined) {\n this.colorsInput.set(v)\n }\n @Input() set executives(v: Executive[] | undefined) {\n this.executivesInput.set(v)\n }\n @Input() set guidelines(v: BrandGuidelineRule[] | undefined) {\n this.guidelinesInput.set(v)\n }\n\n readonly activeLogos = computed(() => this.logosInput() ?? DEFAULT_LOGOS)\n readonly activeColors = computed(() => this.colorsInput() ?? DEFAULT_COLORS)\n readonly activeExecutives = computed(() => this.executivesInput() ?? DEFAULT_EXECUTIVES)\n readonly activeGuidelines = computed(() => this.guidelinesInput() ?? DEFAULT_GUIDELINES)\n readonly visibleGuidelines = computed(() => this.activeGuidelines().slice(0, 4))\n\n readonly activeTab = signal('all')\n readonly copiedKey = signal(null)\n readonly downloadedKey = signal(null)\n\n private copyTimer: ReturnType | undefined\n private downloadTimer: ReturnType | undefined\n\n get rootClass(): string {\n return cn('bg-background text-foreground w-full transition-colors', this.className)\n }\n\n logoPreviewClass(logo: LogoAsset): string {\n return cn(\n 'relative flex min-h-[190px] items-center justify-center overflow-hidden p-4 text-center transition-colors sm:p-8',\n logo.theme === 'dark'\n ? 'bg-zinc-950 text-white'\n : logo.theme === 'light' && logo.id === 'monochrome-light'\n ? 'bg-zinc-100 text-zinc-950 dark:bg-zinc-200'\n : 'bg-muted/40 text-foreground bg-[radial-gradient(var(--border)_1px,transparent_1px)] [background-size:12px_12px]',\n )\n }\n\n /** Short wordmark preview label (the Vue block renders inline SVGs per logo id). */\n logoPreviewLabel(logo: LogoAsset): string {\n if (logo.id === 'app-icon-mark') return '◈'\n return `${this.companyName} .dev`\n }\n\n swatchClass(color: BrandColor): string {\n return cn('border-border/40 relative flex h-24 w-full flex-col justify-between border-b p-3', color.bgClass)\n }\n\n contrastPillClass(color: BrandColor): string {\n return cn(\n 'rounded-full px-2 py-0.5 text-xs font-medium backdrop-blur-md',\n color.textDark ? 'bg-black/10 text-black' : 'bg-white/20 text-white',\n )\n }\n\n oklchInner(oklch: string): string {\n const open = oklch.indexOf('(')\n const close = oklch.lastIndexOf(')')\n if (open >= 0 && close > open) return oklch.slice(open + 1, close)\n return oklch\n }\n\n async copyToClipboard(key: string, text: string): Promise {\n try {\n await navigator.clipboard.writeText(text)\n } catch {\n // Clipboard unavailable (jsdom) — still show feedback.\n }\n this.copiedKey.set(key)\n clearTimeout(this.copyTimer)\n this.copyTimer = setTimeout(() => {\n if (this.copiedKey() === key) this.copiedKey.set(null)\n }, 1800)\n }\n\n handleDownload(key: string): void {\n this.downloadedKey.set(key)\n clearTimeout(this.downloadTimer)\n this.downloadTimer = setTimeout(() => {\n if (this.downloadedKey() === key) this.downloadedKey.set(null)\n }, 2000)\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/press-kit-brand-assets/press-kit-brand-assets.component.ts" }, { "path": "packages/registry-angular/blocks/press-kit-brand-assets/index.ts", "content": "export {\n UiPressKitBrandAssetsComponent,\n type BrandColor,\n type BrandGuidelineRule,\n type Executive,\n type LogoAsset,\n} from './press-kit-brand-assets.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/press-kit-brand-assets/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/avatar.json", "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/card.json", "https://uipkge.dev/r/angular/separator.json" ], "description": "Comprehensive brand guidelines and press kit hub with official logo downloads in vector SVG/4K PNG/WebP, OKLCH brand palette tokens, executive leadership headshots (300 DPI), and press contact resources.", "categories": [ "marketing", "brand", "media" ] }