Logo directions — Pasteblog

Direction 1 — La touche V

Pas un glyphe abstrait — une véritable touche de clavier. Le keycap raconte le geste: tu appuies, et ton texte devient un blog. Logo physique, tactile, avec ombre intérieure.

Mark — keycap V (animé au survol)

V

Le keycap "appuie" toutes les 3 secondes. À l'arrêt: posture stable, ombre intérieure marquée.

Inversion

V

Lockup combo — ⌘ + V

⌘ + V

Pour les surfaces marketing (hero, splash, vidéo). Sur le produit: V seul.

Lockup horizontal

V

pasteblog

Le V keycap remplace l'icône. Hauteur du keycap = hauteur de cap du wordmark.

Header — light

V

pasteblog

ExplorePricingAbout

Start writing

Header — dark

V

pasteblog

ExplorePricingAbout

Start writing

Splash / hero produit

⌘ + V

Paste. Become a blog.

Favicon — toutes tailles

V

14px / 16px / 32px / 48px / 96px. Lisible jusqu'à 11px.

Sur fond papier

V

pasteblog

Le keycap fonctionne sur le fond crème de la page-blog publique.

Onglet navigateur

V

pasteblog.com

— content —

Brand-voice / animation

Le logo a trois états:

— au repos — keycap relevé, ombre intérieure marquée. C'est l'invitation.

— pressé — translation 3px vers le bas, ombre disparaît. Joué au hover, au mount, au paste.

— après — flash discret #0EEBCA derrière le keycap. Confirme l'action.

Toutes les animations produit (saved, published, copied) réutilisent le même press du keycap. Le logo devient un système.

Specs & lecture critique

+ Tactile, mémoriel

+ Système d'animation native

+ Lisible à 11px

+ Lockup ⌘+V pour le marketing

– Mac-clan possible (mais ⌘ optionnel)

– "V" seul moins évocateur sans contexte

Mark: V keycap, ratio ~1.4:1
Stroke: 2.5px (big) / 1.5px (sm)
Radius: 0.2em (relatif font-size)
Shadow: inset 0 -3px 0 rgba(0,0,0,.08)
Type: JetBrains Mono 700
Animation: press 3s ease-in-out infinite
Min size: 11px (favicon 16×16)

Palette

#0D0D0Dink

#FFFFFFcap

#0EEBCAflash

#FAF7F2paper

Direction 2 — Le curseur

Le caret clignotant — le geste primordial de l'écriture. Un trait vertical qui pulse: invite à écrire, à coller. Le logo et le produit ne font qu'un.

Wordmark principal

pasteblog

Le caret est aligné sur la baseline. Il suit le rythme typo du wordmark.

Mark — light

Mark — ink

Mark — gradient

Reprend le gradient cyan→bleu existant.

Mark — paper

Pour les pages-blog publiques (fond crème).

Lockup — caret en fin de mot

pasteblog

L'éditeur attend votre prochaine pensée.

Lockup — caret en début

pasteblog

Variante: le caret introduit le mot, comme une saisie qui démarre.

Caret seul — quand le wordmark est explicite ailleurs

Sur les surfaces où "pasteblog" est déjà écrit (page d'auteur, header). Le caret seul devient un signe de marque.

Header — light

pasteblog

ExplorePricingAbout

Start writing

Header — dark

pasteblog

ExplorePricingAbout

Start writing

Dans l'éditeur — le logo et le produit ne font qu'un

pasteblog.com/write

A morning in Paris

Draft · saved 2s ago

Le caret du logo = le caret de l'éditeur. Continuité parfaite.

Splash / hero

pasteblog

Paste. Become a blog.

Splash — minimal

PASTEBLOG

Splash — paper

pasteblog

Paste. Become a blog.

Variante éditoriale: wordmark en serif (Fraunces). Le caret reste géométrique. Tension entre tradition et tech.

App icons — iOS/macOS

pasteblog

Today

A morning in Paris

Notes from the train

Loader / saving state

pasteblog

Saving…

État "saving" / "loading": le caret passe en blink doux (ease-in-out) au lieu de steps. Subtil.

Sticker / extension de marque

PASTEBLOG

pasteblog

Paste. Become a blog.

$

Système d'animation

Le caret a trois rythmes, qui composent un langage:

— blink (1.06s steps) — état de repos. C'est le logo "vivant" en attente.

— soft (1.2s ease) — saving, loading, syncing. Plus doux, plus passif.

— flash (200ms) — un blink unique #0EEBCA quand quelque chose vient d'être collé/sauvegardé.

Le logo devient un indicateur d'état. Pas de spinner — le caret raconte ce que fait le produit.

Specs

Caret stroke: 10px (hero) / 6px (big) / 4px (med) / 2.5px (sm) / 1.5px (xs)
Caret height: 1× cap-height du wordmark adjacent
Espacement: 3px gauche du caret (lockup), 8px (caret seul)
Wordmark: Inter 700, tracking -0.03em / Fraunces 600 (variante éditoriale)
Couleurs: #0D0D0D (ink), #2057B4 (accent bleu), #0EEBCA (cyan flash), #FFFFFF
Tile radius: 0.2× side (140px → 28px)
Min favicon: 16×16 (caret 8×1.5px)
Animation: blink 1.06s steps(2) — soft 1.2s ease — flash 200ms once

Palette

#0D0D0D

ink

#2057B4

accent

#0EEBCA

flash

#FAF7F2

paper

Lecture critique

+ Cohérence produit absolue

+ Animé, vivant, interactif

+ Hyper minimal — vieillit bien

+ Système d'états (blink/soft/flash)

+ Variante serif possible (éditorial)

– Caret seul peu distinctif sans tile

– À 16px, le caret est presque invisible

Direction 3 — Le slash /

Le "/" comme invite d'écriture (slash commands, terminal). Geste universel: "je commence à écrire". Plus tech, plus radical.

Mark

/

Inversion

/

Header

/

pasteblog

ExplorePricingAbout

Start writing

Lecture critique

+ Tech, iconique, lisible à 16px

– Confusion avec Notion / Linear

– Pas de lien direct au "paste"

Récapitulatif

Comparaison directe à taille équivalente. Mark / lockup / favicon 16px.

V

D1 — keycap V

V

pasteblog

V

favicon 16px

D2 — caret

pasteblog

favicon 16px

/

D3 — slash

/

pasteblog

/

favicon 16px

Recommandation

Tu adores la D2 (caret) — et c'est une excellente intuition.

Elle a tout: cohérence produit (le caret du logo = le caret de l'éditeur), un système d'animation (blink / soft / flash) qui devient un indicateur d'état, et une variante éditoriale (Fraunces serif) pour les pages-blog publiques. C'est le seul des trois qui peut vieillir et évoluer sans devenir daté.

La D1 (keycap) reste un excellent complément marketing: hero d'accueil, vidéos de démo, stickers. ⌘+V dit "voilà comment ça marche". Le caret dit "voilà ce que c'est". Les deux peuvent coexister.

logo-directions