Notion
Un quadern de paper calent al sol del migdia
La interfície de Notion sembla un quadern de paper estimat a plena llum del dia: un llenç càlid i cremós (#f6f5f4) que es nota tàctil en lloc d'estèril, una tipografia sans-serif generosa que dóna pes editorial al text del producte, i el color utilitzat com a puntuació escassa: les "pastilles" de préssec ressalten els verbs, un únic blau ancora l'acció principal i una matriu rotativa de tons d'accent (corall, ambre, cel, mitjanit) coloren els fons de les targetes com si fossin adhesius. Les targetes estan disposades sobre un llenç amb vores i cantonades primes (sense ombres, sense crom) com les seccions ratllades d'un quadern Moleskine. L'animació és lúdica i elàstica, amb transicions suaus a 200 ms i animacions de personatges elàstiques que donen vida a la interfície sense ser decoratives.
Centrat, l'amplada màxima està limitada a aproximadament 1440 px. L'element principal és una pila centrada: una fila de símbols → un títol gran de dues línies amb una píndola de color incrustada → un subtítol → una fila amb dos botons de crida a l'acció → una maqueta gran de la interfície d'usuari del producte. Sota l'element principal, les seccions alternen entre quadrícules de targetes blanques i panells d'accent a tot color. La paret del logotip és una quadrícula centrada d'una sola fila de logotips de socis en escala de grisos. Els blocs de funcions utilitzen un disseny de dues columnes (text a l'esquerra, panell de color a la dreta), alternant d'esquerra a dreta entre les seccions. La secció "Pregunteu als vostres assistents a demanda" utilitza una quadrícula de targetes de 2x2, on la targeta superior ocupa tota l'amplada i la fila inferior es divideix en dues columnes iguals. Els marges entre seccions són generosos (~80 px), creant un ritme vertical tranquil. La navegació és una barra superior fixa de 64 px d'alçada amb elements de navegació centrats i botons d'acció alineats a la dreta.
Les il·lustracions són primordials, sense fotos. El llenguatge visual es basa en símbols plans i il·lustrats (vores arrodonides en cercles de colors de 2 px), elements decoratius abstractes (garabateigs dibuixats a mà, purpurina, fletxes, formes de flors) i maquetes de la interfície d'usuari del producte. Els símbols apareixen a la finestra principal com una fila horitzontal de set avatars i estan dispersos per la pàgina com a puntuació lúdica. Les captures de pantalla del producte són els únics elements visuals "reals": mostren la interfície real de Notion (taulers Kanban, vistes de documents, panells d'agents d'IA) amb un conjunt complet d'elements i dades reals. La maqueta del producte a la finestra principal és gran, centrada i projecta una sola ombra que la separa del llenç. No hi ha fotos d'estil de vida, ni imatges de stock, ni renders 3D abstractes.
Paleta
Marca
- Notion Blue
#0075de— L'element principal que omple el botó de crida a l'acció (CTA), un accent a la navegació activa, els botons d'acció plens són l'única combinació de colors en un sistema gairebé monocrom que està prou saturat per ser percebut com un interruptor.
Neutral
- Paper Warmth
#f6f5f4— El llenç de la pàgina, el fons de la finestra principal i el fons de la secció són de colors càlids i lleugerament beix que donen al sistema una sensació tàctil i analògica. - Pure White
#ffffff— Superfícies de la targeta, panells en relleu, fons del logotip, text contrastat en targetes fosques. - Ink Black
#000000— Text principal, enllaços de navegació, encapçalaments: s'utilitzen amb diferents transparències (100%, 95%, 90%, 60%, 40%, 20%) per construir jerarquia sense afegir nous colors. - Charcoal
#111111— Una opció de text fosc per a aquelles àrees de la interfície d'usuari on el negre pur es veuria massa dur. - Stone
#757575— Text de navegació secundària, text auxiliar silenciat, etiquetes de botons desactivades: 60% de tinta alfa - Graphite
#615d59— El text principal té un to càlid - gris marró, que harmonitza amb el fons càlid.
Tipografia
de 12 a 96 px · 10 passos
- NotionInter — reemplaçament: Inter · esquemes 400, 500, 600, 700 · La font principal sans-serif és una humanista geomètrica amb matisos subtils, utilitzada a mides 400 per al text del cos, 500 per a la navegació/interfície d'usuari i 600-700 per als encapçalaments. L'escala de la font utilitza un espaiat entre lletres negatiu agressiu a mides més grans (-4,6 px a 96 px, -2 px a 72 px), cosa que fa que l'encapçalament sembli més compacte i segur, en lloc d'airejat.
- Lyon Text — reemplaçament: Source Serif Pro · esquemes 400 · La font serif editorial, reservada per a seccions individuals del text principal i introduccions de seccions, s'utilitza amb moderació (quatre vegades) per donar pes literari a la tipografia, similar a una cita en una maquetació de revista. Funciona com un accent sistèmic en lloc d'una jerarquia paral·lela.
Intervals i forma
| Propòsit | Significat |
|---|---|
| Densitat | mitjana |
| Pas bàsic | 8px |
| Radi del botó | 8px |
| Radi de la targeta | 12px |
| Ombres | sense vores en comptes d'ombres |
| Entre seccions | 80px |
| Amplada de la pàgina | 1440px |
La IA crearà el vostre lloc web a l'estil Notion i l'omplirà.
- Omple amb productes i publicacions a través de l'enllaç: Instagram, TikTok, Facebook.
- Transfereix contingut del teu lloc web antic; només cal que especifiquis l'adreça.
- Disseny modern en el millor motor: React ( Next.js) amb renderització de servidor i optimització SEO des del primer moment.
- Optimització SEO totalment automatitzada per a resultats de cerca i recomanacions de xarxes neuronals.
Estils similars
- ElevenLabs — Un assaig fotogràfic en tons crema càlids amb titulars subtils. Un quadern d'estil Bauhaus: paper color closca d'ou, tinta negra i un únic detall morat i taronja per a la presentació del producte.
- Awesomic — Malla de zinc editorial amb signes de puntuació taronges que recorden confeti
- Monad — revista tècnica editorial en pergamí calent
- Dub — Tauler de control de paper d'arròs mat de Link
- Seline Analytics — Una taula analítica silenciosa sobre paper calent
- Anthropic — Una revista científica de camp sobre vitel·la càlida: superfícies d'ivori tranquil·les, encapçalaments editorials amb serigrafia i un únic accent d'argila que només apareix quan cal actuar.
- Calendly — Tinta blava fosca sobre marbre fred
- Augen Pro — La presentació blanca d'Apple presenta un blau elèctric clínic, ingràvid i com a únic accent en un espai monocrom.
- Antimetal — Una crònica editorial en paper crema: un matí tranquil en una revista científica, on la contenció transmet confiança i les serifes fan la feina més pesada.
- Perk — Llima elèctrica sobre paper de forn calent
- Ditto — Un taller assolellat creant mostres de flors silvestres. Superfícies crema càlides, un color base groc vibrant, tintes blau marí intens, formes de color orgàniques que floreixen darrere la peça.
- Officevibe — Una revista editorial en paper de color crema càlid. Imagineu-vos un assaig reflexiu sobre la gestió de recursos humans, presentat com un producte: una font cursiva serif que xiuxiueja a través d'una interfície blava moderna.