[V0_FILE]css:file="app/globals.css" isMerged="true" @import 'tailwindcss'; @import 'tw-animate-css'; @custom-variant dark (&:is(.dark *)); :root { /* Brand palette */ --navy: #1B2A4A; --orange: #E8793A; --white: #FFFFFF; /* Surface tokens */ --background: oklch(0.972 0.004 247); --foreground: #1B2A4A; --card: oklch(1 0 0); --card-foreground: #1B2A4A; --popover: oklch(1 0 0); --popover-foreground: #1B2A4A; /* Component tokens */ --primary: #1B2A4A; --primary-foreground: #FFFFFF; --secondary: oklch(0.94 0.01 247); --secondary-foreground: #1B2A4A; --muted: oklch(0.94 0.008 247); --muted-foreground: oklch(0.46 0.04 247); --accent: #E8793A; --accent-foreground: #FFFFFF; --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.985 0 0); --border: oklch(0.88 0.01 247); --input: oklch(0.88 0.01 247); --ring: #1B2A4A; --radius: 0.375rem; /* Sidebar */ --sidebar: #1B2A4A; --sidebar-foreground: #FFFFFF; --sidebar-primary: #E8793A; --sidebar-primary-foreground: #FFFFFF; --sidebar-accent: oklch(0.25 0.05 247); --sidebar-accent-foreground: #FFFFFF; --sidebar-border: oklch(0.3 0.05 247); --sidebar-ring: #E8793A; /* Logo showcase tokens */ --logo-canvas-light: oklch(0.97 0.004 247); --logo-canvas-dark: #1B2A4A; --logo-canvas-mid: oklch(0.22 0.04 247); } @theme inline { --font-sans: 'Inter', 'Inter Fallback', sans-serif; --font-mono: 'Geist Mono', 'Geist Mono Fallback'; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.9.1", "@vercel/analytics": "1.6.1", "@radix-ui/react-accordion": "1.2.12", "@radix-ui/react-alert-dialog": "1.1.15", "@radix-ui/react-aspect-ratio": "1.1.8", "@radix-ui/react-avatar": "1.1.11", "@radix-ui/react-checkbox": "1.3.3", "@radix-ui/react-collapsible": "1.1.12", "@radix-ui/react-context-menu": "2.2.16", "@radix-ui/react-dialog": "1.1.15", "@radix-ui/react-dropdown-menu": "2.1.16", "@radix-ui/react-hover-card": "1.1.15", "@radix-ui/react-label": "2.1.8", "@radix-ui/react-menubar": "1.1.16", "@radix-ui/react-navigation-menu": "1.2.14", "@radix-ui/react-popover": "1.1.15", "@radix-ui/react-progress": "1.1.8", "@radix-ui/react-radio-group": "1.3.8", "@radix-ui/react-scroll-area": "1.2.10", "@radix-ui/react-select": "2.2.6", "@radix-ui/react-separator": "1.1.8", "@radix-ui/react-slider": "1.3.6", "@radix-ui/react-slot": "1.2.4", "@radix-ui/react-switch": "1.2.6", "@radix-ui/react-tabs": "1.1.13", "@radix-ui/react-toast": "1.2.15", "@radix-ui/react-toggle": "1.1.10", "@radix-ui/react-toggle-group": "1.1.11", "@radix-ui/react-tooltip": "1.2.8", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.1.1", "date-fns": "4.1.0", "embla-carousel-react": "8.6.0", "input-otp": "1.4.2", "lucide-react": "^0.564.0", "next": "16.1.6", "next-themes": "^0.4.6", "react": "19.2.4", "react-day-picker": "9.13.2", "react-dom": "19.2.4", "react-hook-form": "^7.54.1", "react-resizable-panels": "^2.1.7", "recharts": "2.15.0", "sonner": "^1.7.1", "tailwind-merge": "^3.3.1", "vaul": "^1.1.2", "zod": "^3.24.1", "tailwindcss-animate": "1.0.7" }, "devDependencies": { "@tailwindcss/postcss": "^4.2.0", "@types/node": "^22", "@types/react": "19.2.14", "@types/react-dom": "19.2.3", "postcss": "^8.5", "tailwindcss": "^4.2.0", "tw-animate-css": "1.3.3", "typescript": "5.7.3" } } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type { Metadata } from 'next' import { Inter, Geist_Mono } from 'next/font/google' import { Analytics } from '@vercel/analytics/next' import './globals.css' const _inter = Inter({ subsets: ["latin"], variable: "--font-sans" }); const _geistMono = Geist_Mono({ subsets: ["latin"] }); export const metadata: Metadata = { title: 'Insights² — Logo System', description: 'Professional logo system for Insights², the BI governance and analytics platform.', generator: 'v0.app', icons: { icon: [ { url: '/icon-light-32x32.png', media: '(prefers-color-scheme: light)', }, { url: '/icon-dark-32x32.png', media: '(prefers-color-scheme: dark)', }, { url: '/icon.svg', type: 'image/svg+xml', }, ], apple: '/apple-icon.png', }, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/logo/InsightsIcon.tsx" isMerged="true" "use client" /** * Insights² — Icon Only (32×32px) * Derived from Meridian reference SVG geometry: * Meridian: viewBox 134×38, box x=1 y=5 w=28 h=28 rx=2 stroke=2, accent x=20 y=0 w=14 h=14 rx=1.5 filled * Scaled to 32×32: proportions preserved exactly */ interface InsightsIconProps { variant?: "dark" | "light" size?: number className?: string } const NAVY = "#1B2A4A" const ORANGE = "#E8793A" const WHITE = "#FFFFFF" export function InsightsIcon({ variant = "dark", size = 32, className, }: InsightsIconProps) { const stroke = variant === "dark" ? NAVY : WHITE // Meridian box is 28×28 in a 38-tall viewBox. // We use a 36×36 viewBox so the box (28×28) fits with room for the accent overshoot. // Box centred vertically in lower portion, accent extends above. // // Box: x=1 y=7 w=28 h=28 (bottom = 35, leaves 1px bleed) // Accent: 14×14 (50% of box), overlaps top-right corner // x = 1+28 - 14 + 5 = 20 (right edge at 34, within viewBox) // y = 0 (extends 7px above box top) return ( ) } [V0_FILE]typescriptreact:file="components/logo/InsightsLogoHorizontal.tsx" isMerged="true" "use client" /** * Insights² — Horizontal Logo (180×38px) * Geometry lifted directly from Meridian SVG reference: * Box: x=1 y=5 w=28 h=28 rx=2 stroke=2 * Accent: x=20 y=0 w=14 h=14 rx=1.5 filled * Divider: top aligned with accent top (y=0), bottom with box bottom (y=33) * Superscript "2" uses tspan baseline-shift for true exponent */ interface InsightsLogoHorizontalProps { variant?: "dark" | "light" width?: number height?: number className?: string } const NAVY = "#1B2A4A" const ORANGE = "#E8793A" const WHITE = "#FFFFFF" export function InsightsLogoHorizontal({ variant = "dark", width = 180, height = 38, className, }: InsightsLogoHorizontalProps) { const ink = variant === "dark" ? NAVY : WHITE return ( ) } [V0_FILE]typescriptreact:file="components/logo/InsightsLogoTagline.tsx" isMerged="true" "use client" /** * Insights² — Horizontal Logo with Tagline (260×50px) * Icon + divider + wordmark with tspan superscript "2" * + tagline "Making The Meaningful Measurable" (Inter 400, 10px) * * Divider aligns: top = accent top, bottom = box bottom * Wider viewBox (260) ensures tagline is never truncated */ interface InsightsLogoTaglineProps { variant?: "dark" | "light" width?: number height?: number className?: string } const NAVY = "#1B2A4A" const ORANGE = "#E8793A" const WHITE = "#FFFFFF" export function InsightsLogoTagline({ variant = "dark", width = 260, height = 50, className, }: InsightsLogoTaglineProps) { const ink = variant === "dark" ? NAVY : WHITE const taglineOpacity = variant === "dark" ? 0.6 : 0.7 // Icon geometry — same Meridian proportions, slightly scaled up for 50px height // Box: 30×30, positioned to leave room for accent overshoot above const boxX = 1 const boxY = 10 const boxW = 30 const boxH = 30 // Accent: 50% of box = 15×15 const accentW = 15 const accentH = 15 const accentX = boxX + boxW - accentW + 5 // = 21, right edge at 36 const accentY = boxY - 7 // = 3, extends above box // Divider: aligned to navy box top and bottom const divX = boxX + boxW + 10 // = 41 const divTop = boxY // = 10 const divBottom = boxY + boxH // = 40 // Text positioning const textX = divX + 9 // = 50 const wordY = 26 // wordmark baseline const taglineY = 40 // tagline baseline return ( ) } [V0_FILE]typescriptreact:file="components/logo/LogoShowcaseCard.tsx" isMerged="true" "use client" import { useState } from "react" import { Check, Copy, Download } from "lucide-react" interface LogoShowcaseCardProps { title: string subtitle: string background: "light" | "dark" | "mid" svg: string children: React.ReactNode dimensions: string badge?: string } const bgMap = { light: "bg-[#F2F4F8]", dark: "bg-[#1B2A4A]", mid: "bg-[#0F1A2E]", } export function LogoShowcaseCard({ title, subtitle, background, svg, children, dimensions, badge, }: LogoShowcaseCardProps) { const [copied, setCopied] = useState(false) const handleCopy = async () => { await navigator.clipboard.writeText(svg) setCopied(true) setTimeout(() => setCopied(false), 2000) } const handleDownload = () => { const blob = new Blob([svg], { type: "image/svg+xml" }) const url = URL.createObjectURL(blob) const a = document.createElement("a") a.href = url a.download = `insights2-${title.toLowerCase().replace(/\s+/g, "-")}.svg` a.click() URL.revokeObjectURL(url) } return (

{/* Canvas */}

{children}

{/* Meta bar */}

{title} {badge && ( {badge} )}

{subtitle} · {dimensions}

) } [V0_FILE]typescriptreact:file="components/logo/SvgCodeViewer.tsx" isMerged="true" "use client" import { useState } from "react" import { logoSVGs, type LogoVariantKey } from "@/lib/logo-svgs" import { Check, Copy, ChevronDown } from "lucide-react" const LABELS: Record = { iconDark: "Icon — Dark", iconLight: "Icon — Light", horizontalDark: "Horizontal — Dark", horizontalLight: "Horizontal — Light", taglineDark: "With Tagline — Dark", taglineLight: "With Tagline — Light", } export function SvgCodeViewer() { const [active, setActive] = useState("horizontalDark") const [copied, setCopied] = useState(false) const [open, setOpen] = useState(false) const svgCode = logoSVGs[active] const handleCopy = async () => { await navigator.clipboard.writeText(svgCode) setCopied(true) setTimeout(() => setCopied(false), 2000) } return (

{/* Header */}

{/* Traffic dots */}

{/* Variant picker */}

{open && (

{(Object.keys(LABELS) as LogoVariantKey[]).map(key => ( ))}

)}

{/* Copy button */}

{/* Code block */}

          {svgCode}

) } [V0_FILE]typescriptreact:file="components/logo/ColorSwatches.tsx" isMerged="true" const swatches = [ { name: "Navy", hex: "#1B2A4A", label: "Primary — Wordmark, stroke, UI", bg: "bg-[#1B2A4A]", text: "text-white", border: "", }, { name: "Orange", hex: "#E8793A", label: "Accent — Icon square, superscript", bg: "bg-[#E8793A]", text: "text-white", border: "", }, { name: "White", hex: "#FFFFFF", label: "Inverse — Light variant on dark", bg: "bg-white", text: "text-[#1B2A4A]", border: "border border-[#1B2A4A]/10", }, ] export function ColorSwatches() { return (

{swatches.map((s) => (

{s.name}

{s.hex}

{s.label}

))}

) } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import { InsightsIcon } from "@/components/logo/InsightsIcon" import { InsightsLogoHorizontal } from "@/components/logo/InsightsLogoHorizontal" import { InsightsLogoTagline } from "@/components/logo/InsightsLogoTagline" import { LogoShowcaseCard } from "@/components/logo/LogoShowcaseCard" import { SvgCodeViewer } from "@/components/logo/SvgCodeViewer" import { ColorSwatches } from "@/components/logo/ColorSwatches" import { svgIconDark, svgIconLight, svgHorizontalDark, svgHorizontalLight, svgTaglineDark, svgTaglineLight, } from "@/lib/logo-svgs" // ─── Section heading ────────────────────────────────────────────────────────── function SectionHeading({ children }: { children: React.ReactNode }) { return (

{children}

) } // ─── Spec pill ──────────────────────────────────────────────────────────────── function SpecPill({ label, value }: { label: string; value: string }) { return (

{label} {value}

) } // ─── Page ───────────────────────────────────────────────────────────────────── export default function Page() { return (

{/* ── Top header bar ── */}

Brand Assets v1.0

{/* ── Hero ── */}

Insights² Logo System

BI Governance & Analytics Platform · Brand Asset Package

A consulting-grade mark derived directly from the Meridian icon system. The navy outlined box (rx=2, 2px stroke) anchors institutional authority while the filled orange accent square (rx=1.5, 50% of box) overlaps the top-right corner. The divider line spans from accent top to box bottom.

{/* Spec row */}

{/* ── 1. Icon Only ── */}

01 · Icon Only

36×36 viewBox icon mark (renders at 32×32 default). Box 28×28 with filled orange accent 14×14 (rx=1.5) overlapping top-right — geometry identical to Meridian reference.

{/* ── 2. Horizontal ── */}

02 · Horizontal Logo

180×38 primary lockup. Icon + divider + wordmark with orange superscript "2" via tspan baseline-shift for a true mathematical exponent. Divider aligns top of accent to bottom of box.

{/* ── 3. With Tagline ── */}

03 · Horizontal with Tagline

260×50 full lockup. Adds "Making The Meaningful Measurable" tagline at Inter 400, 10px. Wider viewBox ensures full tagline visibility. 60% opacity dark, 70% light.

{/* ── 4. Scale demonstration ── */}

04 · Scale Demonstration

The icon scales cleanly from 16px to 96px without loss of legibility or proportion.

{[16, 24, 32, 48, 64, 80, 96].map(s => (

{s}px

))}

{/* Dark background scale */}

{[16, 24, 32, 48, 64, 80, 96].map(s => (

{s}px

))}

{/* ── 5. Context mockups ── */}

05 · Context Mockups

Placement examples across typical deployment surfaces.

{/* Nav bar mockup */}

{["Dashboard","Reports","Governance"].map(item => ( {item} ))}

— App canvas —

{/* Dark sidebar mockup */}

{["Overview","Data Sources","Metrics","Alerts","Settings"].map((item, i) => (

{item}

))}

— Content area —

{/* Email header */}

{/* Report cover */}

Q4 2025 Report

{/* ── 6. Color palette ── */}

06 · Color Palette

{/* ── 7. SVG Export ── */}

07 · SVG Export

Clean, production-ready SVG code for each variant. Select a variant, copy the code, or use the download button on each card above.

{/* ── 8. Usage guidelines ── */}

08 · Usage Guidelines

{[ { icon: "✓", color: "#2D7D46", bg: "#2D7D4610", title: "Do use on brand colours", body: "Navy #1B2A4A and white #FFFFFF are the only approved backgrounds for the wordmark lockup.", }, { icon: "✓", color: "#2D7D46", bg: "#2D7D4610", title: "Do maintain clear space", body: "Keep a minimum clear zone of the icon height on all four sides of the logo lockup.", }, { icon: "✓", color: "#2D7D46", bg: "#2D7D4610", title: "Do use SVG format", body: "Always use the provided SVG assets for screen use. Request high-res PNG from brand team for print.", }, { icon: "✗", color: "#C0392B", bg: "#C0392B10", title: "Don't recolour the mark", body: "Never alter the navy, orange, or white colours. Do not apply tints, gradients, or drop shadows.", }, { icon: "✗", color: "#C0392B", bg: "#C0392B10", title: "Don't distort proportions", body: "Scale the SVG uniformly. Never stretch or compress the mark horizontally or vertically.", }, { icon: "✗", color: "#C0392B", bg: "#C0392B10", title: "Don't alter the tagline", body: "The tagline 'Making the Meaningful Measurable' must appear verbatim and unmodified.", }, ].map(rule => (

{rule.icon}

{rule.title}

{rule.body}

))}

{/* ── Footer ── */}

) } [V0_FILE]typescriptreact:file="lib/logo-svgs.tsx" /** * Insights² Logo System — Raw SVG Export Strings * Geometry derived from Meridian SVG reference: * Box: rx=2 stroke=2 fill=none * Accent: ~50% of box, rx=1.5, filled #E8793A, overlaps top-right * Divider: top = accent top, bottom = box bottom * Superscript "2" via tspan baseline-shift="super" */ const NAVY = "#1B2A4A" const ORANGE = "#E8793A" const WHITE = "#FFFFFF" // ───────────────────────────────────────────────────────────────────────────── // 1. ICON ONLY — 36×36 viewBox (renders at 32×32 default) // ───────────────────────────────────────────────────────────────────────────── function buildIcon(ink: string): string { return `` } export const svgIconDark = buildIcon(NAVY) export const svgIconLight = buildIcon(WHITE) // ───────────────────────────────────────────────────────────────────────────── // 2. HORIZONTAL — 180×38 // ───────────────────────────────────────────────────────────────────────────── function buildHorizontal(ink: string): string { return `` } export const svgHorizontalDark = buildHorizontal(NAVY) export const svgHorizontalLight = buildHorizontal(WHITE) // ───────────────────────────────────────────────────────────────────────────── // 3. HORIZONTAL + TAGLINE — 260×50 // ───────────────────────────────────────────────────────────────────────────── function buildTagline(ink: string, taglineOpacity: number): string { return `` } export const svgTaglineDark = buildTagline(NAVY, 0.6) export const svgTaglineLight = buildTagline(WHITE, 0.7) // ───────────────────────────────────────────────────────────────────────────── // Named export map for programmatic access // ───────────────────────────────────────────────────────────────────────────── export const logoSVGs = { iconDark: svgIconDark, iconLight: svgIconLight, horizontalDark: svgHorizontalDark, horizontalLight: svgHorizontalLight, taglineDark: svgTaglineDark, taglineLight: svgTaglineLight, } as const export type LogoVariantKey = keyof typeof logoSVGs