Logo
FRAYT wordmark usage guidelines, clear space, and minimum size requirements.
Wordmark
The FRAYT wordmark is the primary brand identifier. It must always be rendered as the official SVG — never as styled text.
Always use the SVG wordmark. Do not substitute text styled to look like the logo, even temporarily. The wordmark uses custom letterforms that cannot be replicated with a font.
Color Variants
The wordmark ships in three approved color treatments. Use the variant that provides the strongest contrast against its surface.
| Variant | Background | Use |
|---|---|---|
| Dark on light | White/light surface | Default for light mode |
| Light on dark | Dark/black surface | Default for dark mode |
| Brand orange | Neutral surface | Marketing and brand materials |
Brand Color
The official brand color is #FF9500 (Shipper Orange). When using the colored logo variant, always use this exact hex value.
Never use #f99d1c or any other orange approximation. The canonical brand orange is #FF9500.
Clear Space
Maintain clear space around the wordmark equal to the height of the "F" letterform on all sides. No other elements should intrude into this zone.
Minimum Size
The wordmark should not be rendered smaller than 80px wide on screen to maintain legibility.
Don'ts
- Don't stretch or distort the wordmark
- Don't change the wordmark colors beyond the approved variants
- Don't add effects (shadows, gradients, outlines) to the wordmark
- Don't place the wordmark on busy or low-contrast backgrounds
- Don't rotate the wordmark
Favicon
The FRAYT favicon uses the "F" letterform — white on the brand orange (#FF9500) background with rounded corners. It scales from browser tabs down to mobile home-screen icons.
The favicon SVG lives at app/icon.svg and is auto-discovered by Next.js. It uses just the "F" from the full wordmark for maximum legibility at small sizes.
Download Assets
Download individual assets using the buttons on each logo variant and favicon above, or grab the complete kit:
Includes FRAYT wordmark (SVG + PNG in orange, white, black) and favicon set (SVG, 16px, 32px, 48px, 180px apple-touch-icon, 192px & 512px android-chrome, plus site.webmanifest).
SVG Implementation Note
The FRAYT wordmark SVG contains a <clipPath> element. When embedding multiple instances on the same page, each instance must have a unique clipPath ID — otherwise the browser reuses the first one and subsequent logos render incorrectly.