fluos

Brand Kit and Logos

Keep logo, colors, and type consistent across fluos builds.

Brand in fluos

fluos does not use a separate Brand Kit settings page. You lock brand by uploading assets and stating rules in chat (or in a custom prompt reused across projects).

A practical brand kit for a project is:

  1. Logo — prefer SVG
  2. Colors — hex or named tokens
  3. Typography — display + body preferences
  4. Do / don't — short constraints

Upload Your Logo (SVG Preferred)

Chat and library accept SVG (image/svg+xml) alongside PNG, JPG, GIF, and WEBP (images up to 10 MB).

When you attach an SVG logo, fluos treats it as vector markup the agent can inline into the composition. That unlocks path-level motion (stroke draw, fill reveal, morph, staggered shapes). A PNG/JPG logo still works, but animation is limited to transforms, masks, and effects on the flat image.

Use the attached SVG logo for the end card.
Animate a stroke-draw reveal, then hold on the mark + URL.
Do not redraw or approximate the logo.

Why SVG

Raster logos are fine for a clean pop-in or wipe. SVG is better when you want the mark itself to draw, morph, or reveal by shape — the product path our motion agent is built for.

Lock Colors and Type

Put brand rules in the first message, the plan, or a saved custom prompt:

Brand:
- Logo: attached brand.svg (inline; never recreate)
- Colors: #0A0A0A, #F06E2C, #FAFAF9
- Type: bold geometric sans for headlines; clean sans for body
- Motion: confident, not playful; no bounce easings
- Always end with logo + URL lockup

Reuse that block from Custom Prompts so every project starts on-brand.

Reference Images vs Embed

For photos, mocks, and mood boards the default is reference — recreate the look in HTML/CSS/SVG/GSAP rather than pasting the file on screen. Ask explicitly when you want the uploaded image embedded (product hero, screenshot walkthrough, etc.).

SVG logos default to inline so they can animate. Do not ask the agent to re-draw your mark from scratch.

Raster Logos

If you only have PNG/JPG/WebP:

  • Upload the highest-resolution transparent mark you have
  • Ask for wipe, shine, pop-in, or end-card lockup treatments
  • Prefer switching to SVG later for draw/morph work

Checklist

  • SVG logo attached (or sharp transparent PNG)
  • Hex colors named once
  • Type direction stated
  • End card / CTA rules stated
  • Optional: saved as a workspace custom prompt

Next Steps