# feeef brand assets and guidelines

feeef is a commerce platform. This guide provides the feeef wordmark, standalone f symbol, brand colors, original design files, the supplied loading animation, and practical guidance for using them consistently. The brand page includes a customizable animation and frame playground with local downloads.

Brand page: https://feeef.dev/brand
Plain Markdown guide: https://feeef.dev/brand/guide.md
Asset manifest: https://feeef.dev/brand/assets.json
Animation playground: https://feeef.dev/brand#motion

## The name

- Always write **feeef** in lowercase: one f, three e letters, then one f.
- Keep the same lowercase spelling at the start of a sentence, in headings, and in product references.
- Write **feeef.dev** when referring to the developer website.
- Use ordinary text when writing about feeef; do not replace a word inside a sentence with the logo.
- Technical identifiers inside code must retain their actual spelling. Brand styling does not change API or SDK names.

## Choose a logo

- **Wordmark:** use the complete feeef logo when introducing the brand or when the name needs to be immediately clear.
- **Standalone f:** use the compact symbol where feeef is already identified nearby, or for an avatar, app icon, or favicon.
- **Light background:** use the color wordmark with black letters. Its first f keeps the primary and highlight greens.
- **Dark background:** use the dark wordmark with white letters. Its first f keeps the same two greens.
- **Single color:** use the supplied all-black or all-white wordmark or symbol when the medium requires a monochrome treatment.
- Preserve the artwork's proportions. The wordmark is approximately 4.194 times as wide as it is tall. The standalone f is approximately 0.619 times as wide as it is tall.
- Center the f inside a square icon or avatar container; do not stretch the artwork to make it square.

## Logo downloads

SVG is recommended for websites, interfaces, and scalable layouts. Transparent PNG is useful when a raster image is required. The original Illustrator file is included for design workflows.

### Wordmark SVG

- [Color wordmark for light backgrounds](https://feeef.dev/brand/svg/feeef-wordmark-color.svg)
- [Color wordmark for dark backgrounds](https://feeef.dev/brand/svg/feeef-wordmark-dark.svg)
- [All-black wordmark](https://feeef.dev/brand/svg/feeef-wordmark-black.svg)
- [All-white wordmark](https://feeef.dev/brand/svg/feeef-wordmark-white.svg)

### Wordmark PNG

- Light backgrounds: [1024px](https://feeef.dev/brand/png/feeef-wordmark-color-1024.png) · [2048px](https://feeef.dev/brand/png/feeef-wordmark-color-2048.png)
- Dark backgrounds: [1024px](https://feeef.dev/brand/png/feeef-wordmark-dark-1024.png) · [2048px](https://feeef.dev/brand/png/feeef-wordmark-dark-2048.png)
- All black: [1024px](https://feeef.dev/brand/png/feeef-wordmark-black-1024.png) · [2048px](https://feeef.dev/brand/png/feeef-wordmark-black-2048.png)
- All white: [1024px](https://feeef.dev/brand/png/feeef-wordmark-white-1024.png) · [2048px](https://feeef.dev/brand/png/feeef-wordmark-white-2048.png)

### Standalone f SVG

- [Two-green f symbol](https://feeef.dev/brand/svg/feeef-symbol-color.svg)
- [All-black f symbol](https://feeef.dev/brand/svg/feeef-symbol-black.svg)
- [All-white f symbol](https://feeef.dev/brand/svg/feeef-symbol-white.svg)

### Standalone f PNG

- Two greens: [512px](https://feeef.dev/brand/png/feeef-symbol-color-512.png) · [1024px](https://feeef.dev/brand/png/feeef-symbol-color-1024.png)
- All black: [512px](https://feeef.dev/brand/png/feeef-symbol-black-512.png) · [1024px](https://feeef.dev/brand/png/feeef-symbol-black-1024.png)
- All white: [512px](https://feeef.dev/brand/png/feeef-symbol-white-512.png) · [1024px](https://feeef.dev/brand/png/feeef-symbol-white-1024.png)

### Original source files and complete kit

- [Original feeef_brand.ai Illustrator file](https://feeef.dev/brand/source/feeef-brand.ai)
- [Original feeef_logo_lines.svg wordmark](https://feeef.dev/brand/source/feeef-logo-lines.svg)
- [Original feeef_f_logo.svg symbol](https://feeef.dev/brand/source/feeef-f-logo.svg)
- [Original supplied loading animation SVG](https://feeef.dev/brand/source/feeef-logo-load-original.svg)
- [Ready-to-use loading animation SVG](https://feeef.dev/brand/svg/feeef-wordmark-load.svg)
- [Complete brand asset kit ZIP](https://feeef.dev/brand/feeef-brand-kit.zip)
- [Machine-readable asset manifest JSON](https://feeef.dev/brand/assets.json)

The original source files are provided unchanged. Static variants retain the source paths and proportions; dark and monochrome versions change the documented stroke colors. The supplied animation source uses #49d249 and #60ea60. The ready-to-use animation keeps its path geometry and sequence while applying the current #72ce5d and #86e672 brand greens. Its default canvas is 512 × 512 pixels with 8% padding on each edge and a transparent background.

## Brand colors

| Color | Hex | RGB | Role |
| --- | --- | --- | --- |
| Primary green | #72ce5d | 114, 206, 93 | Main brand color and the first f stem |
| Highlight green | #86e672 | 134, 230, 114 | Supporting highlight in the first f arm |
| Black | #000000 | 0, 0, 0 | Wordmark letters on light backgrounds; monochrome artwork |
| White | #ffffff | 255, 255, 255 | Wordmark letters on dark backgrounds; monochrome artwork |

### Color and readability

- Black against primary green has approximately **10.70:1** contrast; white against primary green has approximately **1.96:1**.
- For ordinary text or a button label on green, choose black or another sufficiently dark color.
- Do not use white body text on primary green, or primary green body text on white.
- Greens serve as brand and accent colors. Use strong neutral contrast for essential interface text and controls.
- Do not rely on color alone to communicate a state or action.
- Keep logos on clean surfaces where the full mark remains recognizable. Use a neutral holding area when an image is busy.

## Clear space and minimum size

- Leave at least **one logo-stroke width** around the artwork, measured from its visible outer edges.
- One stroke width is **43 source SVG units**, approximately **18% of the logo height**. Scale this clearance with the artwork.
- These guidelines recommend a **minimum wordmark width of 120 CSS pixels** and a **minimum standalone symbol height of 24 CSS pixels**.
- Keep adjacent text, graphics, page edges, and other logos outside the clear space.
- Check small raster exports individually, especially favicons. Use the symbol for compact contexts rather than squeezing the wordmark.
- Keep original aspect ratios at every size.

## Use the artwork consistently

- Use the supplied files rather than rebuilding the logo with a font.
- Keep the path geometry, relative letter positions, rounded strokes, and proportions unchanged.
- Select a documented color variant for the background or medium.
- Do not stretch, rotate, skew, crop, or rearrange the logo.
- Do not add shadows, gradients, outlines, decorative containers that obscure the mark, or extra colors to the artwork. A plain padded background frame may hold the logo without altering it.
- Do not merge feeef artwork into another logo or imply sponsorship, affiliation, or endorsement that does not exist.
- In a layout with other brands, give each mark its own clear space and preserve each mark's proportions.

## Typography and voice

- The wordmark is artwork, not a typeface. Never recreate it by typing the brand name in a similar font.
- Use a legible interface typeface for supporting copy. feeef.dev uses Inter for its interface; the downloaded wordmark does not depend on an installed font.
- Keep text direct, useful, and specific. Explain what someone can do and what happens next.
- Examples: "Build your store with feeef." and "Connect your app to the feeef API."
- Keep the brand name lowercase while preserving normal grammar and the correct names of third-party products.

## Motion

- Use the supplied loading animation to introduce the mark, with finite playback and a complete final logo.
- At normal speed its motion takes approximately **3.033 seconds**. The first f draws and rises, the container moves left, the three e letters reveal in sequence, and the last f completes the wordmark.
- Run the loading sequence once and let the viewer choose to play or replay it.
- Respect **prefers-reduced-motion** by showing the complete static logo.
- Avoid continuous loops, bouncing, spinning, flashing, or animation that delays access to content.
- Keep interface transitions restrained. Color changes, short fades, and small position changes should support the action without competing with the content.
- Provide a static logo wherever an animated asset is used.

## Animation and frame playground

Open the [feeef animation playground](https://feeef.dev/brand#motion) to preview and export a customized version of the supplied loading animation. Controls are labeled and keyboard accessible. The initial preview shows the completed mark; playback is explicit.

- **Canvas size:** choose an export resolution. The SVG remains scalable; raster exports use the selected pixel dimensions.
- **Padding:** reserve space on each edge of the canvas. Padding is expressed as a percentage of the canvas size, and the original logo proportions remain intact.
- **Playback speed:** scale the source timing without changing the order of the movement and path reveals.
- **Colors:** use current brand greens or the original animation's greens, plus black or white lettering appropriate for the background.
- **Background and frame:** use a transparent outer canvas or a background color. Choose square, rounded, or superellipse corners for a padded frame.
- **Corner radius:** control how much of each corner is rounded.
- **Curve:** control the superellipse corner profile. The frame is a mathematical approximation inspired by iOS icons, not an official or proprietary Apple icon mask.

Keep a generous margin around the visible artwork. Frame settings affect the holding surface and layout, not the paths themselves. Use a plain frame that keeps the full mark recognizable.

### Download formats

| Format | Use | Transparency and limits |
| --- | --- | --- |
| SVG | Scalable native browser animation | Transparent outer canvas; animation plays once and retains the final logo |
| PNG | Final still image | Full alpha transparency; the frame and padding settings are preserved |
| GIF | Animated image in compatible image contexts | Up to 256 colors; one-bit transparency cannot preserve partially transparent edge pixels |
| Animated PNG (APNG) | Animated image with smoother transparent edges | Full alpha transparency; verify support in the target app or publishing tool |
| MP4 | H.264 video for video workflows | A solid matte replaces transparency; custom exports require a supported local encoder, while the ready-made file downloads directly |

The playground generates customized files in the browser without uploading the artwork. GIF and APNG exports play once and finish on the completed mark. The MP4 export contains the same finite sequence and final hold. When the browser cannot encode a custom MP4, choose GIF or APNG, or download the ready-made default MP4. Use a static PNG or SVG for environments that cannot display animation. An exported animated file does not replace accessibility handling in the surrounding app: provide a static alternative and select it for viewers who prefer reduced motion. The unchanged supplied animation remains available as a separate source download.

### Ready-made animation downloads

These default files are available as ordinary downloads without running the playground or using a browser encoder. They use the current brand greens, black lettering, a **512 × 512** canvas, **8% padding on each edge**, and normal playback speed. Raster animations are rendered at **20 frames per second** and hold the completed logo for **0.75 seconds**. GIF, APNG, and the final still use transparent backgrounds; MP4 uses a white matte.

- [Scalable animated SVG](https://feeef.dev/brand/svg/feeef-wordmark-load.svg)
- [512px GIF](https://feeef.dev/brand/animation/feeef-logo-load-512.gif)
- [512px animated PNG / APNG](https://feeef.dev/brand/animation/feeef-logo-load-512.png)
- [512px MP4 with white matte](https://feeef.dev/brand/animation/feeef-logo-load-512.mp4)
- [512px static final-frame PNG](https://feeef.dev/brand/animation/feeef-logo-load-still-512.png)

The complete brand ZIP includes these files. Keep the static final-frame image available as an alternative to motion.

## Common questions

### How should the feeef name be written?

Always write feeef in lowercase: one f, three e letters, then one f. Keep this spelling at the start of a sentence and in headings. Write feeef.dev for the developer website. Preserve the exact spelling of technical identifiers inside code.

### What is the primary feeef brand color?

The primary feeef green is #72ce5d, RGB 114, 206, 93. The lighter green #86e672, RGB 134, 230, 114, is the supporting highlight in the supplied f artwork. Use black or dark text on green; white text on the primary green has insufficient contrast for ordinary text.

### Which feeef logo should I use on a dark background?

Use the dark-background wordmark: its e letters and final f are white, while the first f keeps the two original greens. Use the light-background wordmark with black letters on a light surface. Both versions preserve the same path geometry and proportions.

### When can I use the standalone f symbol?

Use the standalone f when feeef is already identified nearby or when a compact mark is needed, such as an avatar, app icon, or favicon. Use the full wordmark to introduce the brand. Center the narrow f inside square containers without stretching it.

### Where can I download feeef logos and the Illustrator source?

The brand page provides SVG and transparent PNG downloads for the wordmark and standalone f, light and dark wordmarks, and black and white monochrome versions. It also provides the original feeef_brand.ai Illustrator file, the supplied static and animated source SVGs, and a ZIP containing the complete asset kit. The animation playground creates customized SVG, PNG, GIF, animated PNG, and supported MP4 exports.

### How much space and what minimum size should the logo have?

Leave at least one logo-stroke width around the artwork: 43 source SVG units, approximately 18% of the logo height. These guidelines recommend a minimum wordmark width of 120 CSS pixels and a minimum symbol height of 24 CSS pixels. Check small raster exports individually, especially favicons.

### Can I use a black or white feeef logo?

Use the supplied all-black or all-white monochrome files when a single-color treatment is needed. Choose the version with the clearest contrast against the background. Preserve the paths, proportions, and spacing; do not add outlines, shadows, gradients, or additional colors.

### How should the feeef logo move?

Use the supplied loading sequence when introducing the mark. At normal speed it takes approximately 3.033 seconds, then settles on the complete logo. Run it once, with playback and replay controlled by the viewer. Show the complete static logo when reduced motion is preferred. Avoid continuous loops, flashing, or animation that delays access to content.

### Can I customize the logo canvas, padding, and rounded frame?

The animation playground lets you set canvas size, padding on each edge, speed, colors, background, and frame shape without stretching the artwork. Choose square, rounded, or superellipse corners. Corner radius controls the corner footprint and curve controls the superellipse profile. The superellipse is an approximation inspired by iOS icons, not an official Apple icon mask.

### Which animated download format should I choose?

Use SVG for scalable browser animation, PNG for a final static frame, and animated PNG (APNG) for animation with full transparency. GIF works in many image contexts but has a 256-color palette and one-bit transparency. MP4 uses a solid matte because this export does not support transparency. Ready-made files are downloadable directly; custom MP4 generation requires a supported H.264 browser encoder. Customized exports are generated locally in the browser.