# Logo

The button on paper: Feitio’s symbol, which lives alone in a 16px favicon and, where there is room, takes the word beside it.

## The symbol

A clothing button, sewn on with an orange cross stitch, on paper. The button comes from the name: feitio is the way a garment is made by hand. The cross stitch is the rule of our icons, two strokes crossing. The hard shadow is lifted paper. And orange shows up only once, where it matters.

1.  **Rim:** two arcs crossing, never a perfect circle.
2.  **Inner rim:** the button’s relief; it goes away at small sizes.
3.  **Holes:** four short hooks, in the same stroke; they also go away when small.
4.  **Cross stitch:** the orange thread, two strokes. The mark’s only orange.
5.  **Hard shadow:** lifted paper, below and to the right.

## Sizes

From 48px up, the full mark. Below that, the stroke gets heavier and the inner rim and holes go away, so the button stays readable in the browser tab.

483216

By day

483216

At night

## With the word

Where there is room, the symbol takes "Feitio" beside it, in the heaviest Alegreya Sans. The symbol is a bit taller than the capitals, and sits `space-3` from the word.

Feitio

By day

Feitio

At night

## Clear space

Around the mark, clear space of half the symbol’s height, with no text or border. The dashed line below shows that space; it is not part of the mark.

## Rules

Do

The mark as it is, in the theme colors.

Don’t

Rotated and recolored: it stops being Feitio.

-   Never the orange X alone, outside the button: alone, it becomes a "close".
-   Never stretched, rotated, recolored, outlined or with effects.
-   In outside facades, the Feitio mark does not appear: the brand belongs to the client.

## Files

The SVGs switch from day to night on their own, following the system mode. The PNGs are the day version.

-   [![](/marca/feitio.svg)**feitio.svg**SVG · The full mark, for 48px and up](/marca/feitio.svg)
-   [![](/marca/feitio-favicon.svg)**feitio-favicon.svg**SVG · The favicon, with the night version inside](/marca/feitio-favicon.svg)
-   [![](/marca/feitio-512.png)**feitio-512.png**512px · For app stores and social](/marca/feitio-512.png)
-   [![](/marca/feitio-180.png)**feitio-180.png**180px · The iPhone and iPad icon](/marca/feitio-180.png)
-   [![](/marca/feitio-48.png)**feitio-48.png**48px · 48px favicon](/marca/feitio-48.png)
-   [![](/marca/feitio-32.png)**feitio-32.png**32px · 32px favicon](/marca/feitio-32.png)
-   [![](/marca/feitio-16.png)**feitio-16.png**16px · 16px favicon](/marca/feitio-16.png)

```html
<link rel="icon" href="feitio-favicon.svg" type="image/svg+xml">
<link rel="icon" href="feitio-32.png" sizes="32x32" type="image/png">
<link rel="apple-touch-icon" href="feitio-180.png">
```
