Color
Primary. Light backgrounds, the product and the website.
SVGPNGBrand
Foxl brand assets
Logos, app icons and colors for writing about Foxl, putting it on an event screen, or listing it on a partner page. Send the SVG first; the logo PNGs have transparent backgrounds.
Five versions.
Choose by background.
When in doubt, use Color on light backgrounds and White on everything else. Inside the Foxl app the mark always keeps its original color.
More lockups.
For other slots.
The horizontal lockup above is the default for headers, slides, partner pages and event screens. Use these when the slot calls for something else.
Stacked lockup
Square or narrow slots, such as a sponsor tile or a badge.
Mark
App icon, favicon and avatars, or when Foxl is already named nearby.
Wordmark
When the mark already appears in the same view. Outlined Geist at weight 550; never retype it.
Foxl Notes
The product lockup, for pages and slides about Notes.
Foxl Code
The product lockup, for pages and slides about Code.
The app icon.
Light and dark.
The mark fills about 60 percent of the icon square, centered, matching the icon that ships today. Do not add a border, a gradient background or a second element.
Mostly ink and paper.
One blue, used sparingly.
Foxl Blue belongs to the logo. Do not use it as a background or a campaign color. Tokens as CSS and JSON.
Ink
#121212Mark body, wordmark, text on light backgroundsPaper
#FFFFFFDefault backgroundFoxl Blue
#0969E3The crescent. Logo accent only, never a backgroundGraphite
#333336Secondary dark, from the mark's planesSlate
#1C1F26Dark surfaces. The app's dark sidebar, hsl(220 16% 13%)Mist
#F5F5F5Light surfaces, cardsLine
#E5E5E5Borders and dividersInterface blues, for links and buttons rather than the logo: Brand #2E67B8Brand Light #5E8BC9Brand Dark #1D4987
A few rules.
The PDF has the rest.
Use these files to refer to Foxl. Please do not use them in a way that suggests Foxl sponsors or endorses you. For anything else, email support@foxl.ai.
Give it room.
Keep clear space of at least the height of the F on every side of the logo.
Match its neighbors.
On a shared logo wall, match the letter height of the logos around Foxl. It should never be the largest logo in the row.
Pick by background.
Outside the app, do not put the color logo on dark. Use Reversed on dark surfaces we design and White everywhere else.
Keep it whole.
Do not stretch, rotate, recolor, outline or rearrange the logo, and do not add shadows or effects.
Mind the size.
Below 24 px, use the color mark: the slit in the one-color mark closes up on screen.