Clear space
Keep one mark-width of breathing room.
At minimum, leave padding equal to the width of the left "F" stem around the logo. Do not squeeze the mark into tight headers or buttons.
Brand assets
Use one clean FinEngine brand system across docs, demos, GitHub, and product surfaces.
This page keeps the real downloadable marks, color references, spacing rules, and safe usage examples in one place so the site stays professional and consistent.
Usage guidance
These rules keep the mark readable, premium, and consistent across the website and documentation.
Minimum size
Use the icon at 24 px or larger.
For headers, 40–52 px works best. For favicons and app icons, use the dedicated exported PNG files instead of scaling screenshots.
Contrast
Match variant to background.
Use dark or original versions on light surfaces, light or mono-light versions on dark surfaces, and avoid placing the logo over noisy gradients.
Do
- Use the original mark in the header and footer.
- Use the wordmark for banners, presentations, and profile covers.
- Use mono variants for single-color print or legal paperwork.
Don't
- Do not recolor the canonical mark with random greens or reds.
- Do not stretch, rotate, crop, or outline the logo.
- Do not place third-party logos beside it unless the page is truly about an integration.
Palette and typography
The asset set follows the same token family already used across the live site.
Core colors
Obsidian
#09090BFinEngine Blue
#2563EBAccent Blue
#3B82F6Soft White
#FAFAFAInstitutional Gold
#F59E0BTypography
Inter / system UI
Use Inter, then platform system sans fallbacks, for headers, navigation, and body copy.
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;Download-ready asset kit
Every link below points to a committed file in this repository preview so design, docs, and deployment surfaces can reuse the same source of truth.
Canonical mark PNG
Primary two-tone icon for site chrome and social usage.
Canonical mark SVG
Vector version for crisp scaling in docs and print surfaces.
Icon · dark
Best for light canvases where a dark frame is needed.
Icon · light
Best for dark backgrounds and hero overlays.
Icon · mono dark
Single-color white mark for dense dark surfaces.
Icon · mono light
Single-color dark mark for bright minimal layouts.
Wordmark · dark
Horizontal lockup for dark banners, decks, and README headers.
Wordmark · light
Horizontal lockup for bright documents and press assets.
Favicon 32
For browser tabs and compact web app surfaces.
App icon 192
For PWA manifests and launcher icons.
Banner · light
README and repository header banner on light contexts.
Banner · dark
Dark presentation cover and social header variant.