# Brand kit > The Firenook logo, mark, wordmark, block flame and colours, as SVG and PNG, with how to use them and the embers as a looping video. The Firenook logo, mark, block flame and colours, ready to use when you write about Firenook or build on it. Use the files as they are. [Download the brand kit](https://firenook.dev/brand/firenook-brand-kit.zip) [How to use the name](https://firenook.dev/trademark) ## The logo Two flames of glass and the name in Figtree Bold. Use the logo on dark grounds as this site does, the default on light ones. - ![Logo](https://firenook.dev/brand/logo/firenook-logo.svg) ### Logo The default, on light grounds [SVG](https://firenook.dev/brand/logo/firenook-logo.svg) [PNG](https://firenook.dev/brand/logo/png/firenook-logo.png) - ![Logo on dark](https://firenook.dev/brand/logo/firenook-logo-on-dark.svg) ### Logo on dark On dark grounds, as this site uses it [SVG](https://firenook.dev/brand/logo/firenook-logo-on-dark.svg) [PNG](https://firenook.dev/brand/logo/png/firenook-logo-on-dark.png) - ![Flat logo](https://firenook.dev/brand/logo/firenook-logo-flat.svg) ### Flat logo Small sizes, print, anything without gradients [SVG](https://firenook.dev/brand/logo/firenook-logo-flat.svg) [PNG](https://firenook.dev/brand/logo/png/firenook-logo-flat.png) - ![Flat logo on dark](https://firenook.dev/brand/logo/firenook-logo-flat-on-dark.svg) ### Flat logo on dark The same, on dark grounds [SVG](https://firenook.dev/brand/logo/firenook-logo-flat-on-dark.svg) [PNG](https://firenook.dev/brand/logo/png/firenook-logo-flat-on-dark.png) - ![One colour, charcoal](https://firenook.dev/brand/logo/firenook-logo-mono-charcoal.svg) ### One colour, charcoal Stamps, embossing, photos [SVG](https://firenook.dev/brand/logo/firenook-logo-mono-charcoal.svg) [PNG](https://firenook.dev/brand/logo/png/firenook-logo-mono-charcoal.png) - ![One colour, white](https://firenook.dev/brand/logo/firenook-logo-mono-white.svg) ### One colour, white On photos and busy grounds [SVG](https://firenook.dev/brand/logo/firenook-logo-mono-white.svg) [PNG](https://firenook.dev/brand/logo/png/firenook-logo-mono-white.png) - ![Stacked logo](https://firenook.dev/brand/logo/firenook-logo-stacked.svg) ### Stacked logo Square and centred spaces [SVG](https://firenook.dev/brand/logo/firenook-logo-stacked.svg) [PNG](https://firenook.dev/brand/logo/png/firenook-logo-stacked.png) - ![Stacked on dark](https://firenook.dev/brand/logo/firenook-logo-stacked-on-dark.svg) ### Stacked on dark Title slides and posters [SVG](https://firenook.dev/brand/logo/firenook-logo-stacked-on-dark.svg) [PNG](https://firenook.dev/brand/logo/png/firenook-logo-stacked-on-dark.png) ## The mark and the name The flames alone for icons and avatars, and the name alone where the mark is already near. - ![Mark](https://firenook.dev/brand/mark/firenook-mark.svg) ### Mark The flames on their own [SVG](https://firenook.dev/brand/mark/firenook-mark.svg) [PNG](https://firenook.dev/brand/mark/png/firenook-mark.png) - ![Flat mark](https://firenook.dev/brand/mark/firenook-mark-flat.svg) ### Flat mark Below 32 px, or without gradients [SVG](https://firenook.dev/brand/mark/firenook-mark-flat.svg) [PNG](https://firenook.dev/brand/mark/png/firenook-mark-flat.png) - ![Wordmark](https://firenook.dev/brand/wordmark/firenook-wordmark.svg) ### Wordmark The name on its own [SVG](https://firenook.dev/brand/wordmark/firenook-wordmark.svg) [PNG](https://firenook.dev/brand/wordmark/png/firenook-wordmark.png) - ![Wordmark, white](https://firenook.dev/brand/wordmark/firenook-wordmark-white.svg) ### Wordmark, white The name on dark grounds [SVG](https://firenook.dev/brand/wordmark/firenook-wordmark-white.svg) [PNG](https://firenook.dev/brand/wordmark/png/firenook-wordmark-white.png) Avatars for GitHub, npm and chat, 1024 px: [dark](https://firenook.dev/brand/social/avatar-dark-1024.png) and [light](https://firenook.dev/brand/social/avatar-light-1024.png). The link preview card: [1200 × 630](https://firenook.dev/brand/social/og-image-1200x630.png) and [1280 × 640 for GitHub](https://firenook.dev/brand/social/github-social-preview-1280x640.png). ## The block flame and the embers Firenook’s terminal draws the flame in square blocks, and the site is built from the same blocks. The embers are that fire, burning: a seamless eight-second loop for posts and talks. - [Block flame, SVG](https://firenook.dev/brand/block-flame.svg) - [Embers, Square, 1080 × 1080, MP4](https://firenook.dev/brand/embers/embers-1080x1080.mp4) - [Embers, Wide, 1920 × 1080, MP4](https://firenook.dev/brand/embers/embers-1920x1080.mp4) - [Embers, Card, 1200 × 630, GIF](https://firenook.dev/brand/embers/embers-1200x630.gif) The block flame over the embers, as the files draw them. ## Colour The flames run from vermilion to amber; the room around them is night. Cobalt is for what you press, never the flame. - ### Vermilion \#F23818 The upper flame; where you are - ### Amber \#FF9800 The lower flame - ### Night \#141416 The dark ground of the site and the cards - ### Charcoal \#202124 The wordmark and one-colour logo - ### Cobalt \#1C53CF Everything that can be pressed - ### Ink \#F4F2EE Text on night ## Use it like this - Keep clear space around the logo of about a quarter of the mark’s width; the files have it built in. - Keep the horizontal logo at least 120 px wide, the stacked logo 80 px and the glass mark 32 px. - On photos and busy grounds, use a one-colour version. - Set text beside the logo in Figtree, the wordmark’s face. ## Not like this - Don’t recolour, rotate, flip, stretch or outline the flames. - Don’t add shadows or effects to the flat and one-colour versions. - Don’t retype “firenook” in another font or change its spacing. - Don’t put Firebase or Google logos inside a Firenook lockup. Firenook is not affiliated with Google.