GYBLOS — BRAND ASSETS 1.0.0
2026-10-20

Open gyblos-brand-assets.html to browse the kit.

MARK: [g]. WORDMARK: [g]yblos. The g and yblos remain solid. Only [ and ] carry the holographic finish.

CHOOSE A FILE
- *-dark: transparent artwork for dark backgrounds (light letters).
- *-light: transparent artwork for light backgrounds (dark letters).
- *-holographic: iridescent brackets, static export.
- *-solid: sky-blue brackets, solid letters; use at small sizes.
- *-mono-black / *-mono-white: one-color uses, stamps and print.
- *-animated.svg: browser animation; reduced-motion fallback included.
- SVG: vector paths, no installed fonts required. Import into Figma or a vector editor.
- PNG: transparent raster, fixed reflection; choose the largest needed size.
- Avatar SVG/PNG: filled square background, generous circular-crop safety.
- Social cover: 1500 x 500, logo + canonical tagline. Social platforms may crop differently; check their preview.
- Favicon: SVG, ICO (16/32/48) and PNG (16/32/48/180/192/512). Solid sky brackets for small-size clarity.

USAGE
Keep the proportions. Leave at least half the width of the g around the visible mark.
Recommended minimum displayed size: mark 32 px; wordmark 160 px. Use solid icons below 32 px.
Use dark assets on dark backgrounds and light assets on light backgrounds. Avoid busy backgrounds.
Do not animate or recolor g, add a glow to the whole mark, stretch, rotate, replace the font or rebuild the logo with system text.
The holographic spectrum is a logo-bracket finish, not a replacement for the sky-blue interface palette.
The large GYBLOS ASCII hero remains sky blue.

COMPONENT
Copy GyblosMark.tsx and gyblos-brand-animation.css into a React project.
Example: <GyblosMark theme="dark" size={64} animate />
Use the component's label for an accessible name, or hide the containing illustration when a parent link already has its name.
The component is self-contained vector artwork, uses unique gradient IDs and needs no font files.

PALETTE / TYPE
Use gyblos-brand-tokens.json or .css. Logo: JetBrains Mono Medium; headings: Geist 500; body: Geist 400.
No font files are bundled. See gyblos-brand-attribution.txt. This kit grants no trademark license.
Source of truth for design guidance remains the existing DESIGN note in the company brain.

STATIC AND ANIMATED EXPORTS
Static images freeze a representative reflection. SVG and CSS motion are browser-only and may be flattened by design tools or social platforms.
Animated SVG colors follow the same palette but are an export treatment; they do not reproduce a cursor-dependent reflection.
