Ravox UIby Ravox Labs
Ravox UIby Ravox Labs
Installer le KitGuide
LandingClairaudacieuxéditoriald'auteur
RRetícula

Retícula.

Magazine imprimé en bento : papier, typographie grotesque ultra-grasse, photos en demi-teinte avec plaques CMYK hors repérage, traits de coupe et gamme de couleurs d'imprimerie. Audacieux, d'auteur et plein de détails.

Type
Landing page
Thème
Clair
Titres
Schibsted Grotesk 900
Texte
Instrument Sans

PourMarques et personnes qui engagent des créatifs et valorisent le design, 22-45 ans

Obtenir l'accès · à partir de 49 R$ou tous les designs pour 297 R$ par an
Ouvrir en plein écran Utiliser avec l'IA
/preview/reticula

Sections de la page01/08Topo e navegação

Tout le texte est dans content.ts et les couleurs dans tokens.css.
Concept

Revista impressa montada em bento. Papel cru, grotesca 900 apertada, fotos em meio-tom com as chapas de ciano e magenta escapando do preto, marcas de corte e barra de cor de gráfica. Tem que parecer prova de impressão bem feita, não template de agência.

Extrait du DESIGN.md, en portugais pour l'instant.

PourMarques et personnes qui engagent des créatifs et valorisent le design, 22-45 ans

Palette

Les quatre couleurs qui définissent le design et toutes les variables de tokens.css. Cliquez pour copier.

Typographie

Schibsted Grotesk 900 pour les titres, Instrument Sans pour le texte.

TitresSchibsted Grotesk 900

Aag!

Retícula en une ligne

ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789

TexteInstrument Sans

La police de lecture porte les longs paragraphes sans fatiguer.

Texte courant, boutons, formulaires et légendes. Les titres prennent la police d'affichage ; celle-ci fait le quotidien de la page.

0123456789 · 1 234,56 € · 25/09 à 19h30

Pour qui

Ce que l'IA compare avec le client pour choisir le design.

Idéal pour
  • studio ou professionnel créatif avec portfolio
  • marque aux couleurs fortes ou CMYK
  • activité qui veut ressembler à un magazine, pas à un site corporate
À éviter pour
  • santé et cliniques
  • droit et comptabilité
  • public plus âgé et conservateur
  • activité sans aucune image propre à montrer
Secteurs
studio de designagence créativebrandingportfoliophotographe d'auteurmaison d'éditionimprimeriemagazinetatoueur d'auteurmarque de mode indépendante

Ton

audacieuxéditoriald'auteuramusant avec discernement

Ce qui fait Retícula

Les signatures du DESIGN.md : ce qui ne doit pas manquer à l'application.Extrait du DESIGN.md, en portugais pour l'instant.

  1. 01

    Hero em bento de 12 colunas: título gigante, foto em meio-tom alta, cartão de paleta CMYK, manifesto em magenta e lista em preto.

  2. 02

    Meio-tom de verdade: <Reticula> gera os pontos no servidor, com duas chapas (ciano e magenta) deslocadas atrás do preto. No hover as chapas entram em registro.

  3. 03

    Título "fora de registro" (.reticula-registro): sombra ciano e magenta que abre no hover.

  4. 04

    Marcas de corte (<Corte>) em volta das fotos de projeto, alvo de registro e barra de cor.

  5. 05

    Rótulos editoriais: "pl. 01", "Prova 1 de 4", "02 — Serviços", sempre em mono minúsculo.

  6. 06

    Selo circular girando com texto no caminho.

  7. 07

    Sombra dura preta (6px) no hover dos cartões, nunca sombra desfocada.

Règles du jeu

Directement du DESIGN.md.Extrait du DESIGN.md, en portugais pour l'instant.

Voir le DESIGN.md

Identidade

  • Fundo papel #e9e5dc com retícula fina (.reticula-papel); cartões #f6f3ec.
  • Texto e bordas preto tinta #121212. Bordas de 1.5px em tudo: cartão, chip, botão.
  • Tintas de processo: magenta #f0287a (primária), amarelo #ffdf2e (destaque), ciano #00a6e0 (só em detalhe, cartão de serviço e chapa). Preto é a quarta tinta.
  • Fontes: Schibsted Grotesk 900 com tracking bem negativo (.reticula-peso) nos títulos, Instrument Sans no texto, Martian Mono em rótulos minúsculos caixa-alta.

Regras

  • Bento com gap-3: cartões juntos, como página diagramada. Cantos rounded-d-lg (22px).
  • Cada linha do bento mistura fundos (papel, magenta, preto, amarelo, ciano). Nunca dois cartões vizinhos da mesma cor.
  • Máximo de 2 botões por tela; botões em pílula com borda preta.
  • Animação: data-sobe, data-revela, faixa correndo, selo girando e chapas. Tudo para em prefers-reduced-motion.

Adaptar à marca do cliente

  • Cor da marca vira --d-primary (no lugar do magenta); mantenha amarelo e ciano como tintas de apoio ou troque pelas cores secundárias da marca.
  • Marca sóbria, de uma cor só e sem imagem própria: esse design fica vazio. Use Vitrine ou Forma.
Mode d'emploi

Deux fichiers.
Un prompt.

Retícula devient le design system de votre agent de code : il construit n'importe quel écran avec ce style, pas seulement la landing d'exemple.

Prompt pour l'agent Utiliser avec l'IA

Lis le DESIGN.md à la racine du projet et suis ses règles sur chaque écran. Importe sistema.css une seule fois au point d'entrée du projet et utilise ses classes et tokens au lieu de créer de nouveaux styles. Avant chaque changement d'interface, relis le DESIGN.md.

  1. 01Téléchargez les deux fichiersDESIGN.md (les règles visuelles) et sistema.css (tokens, composants et signatures du design).
  2. 02Ajoutez-les au projetDESIGN.md à la racine. sistema.css importé une fois au point d'entrée : fonctionne avec React, Vue, Svelte, HTML ou WordPress.
  3. 03Collez le prompt dans votre agentIl lit les règles et construit n'importe quel écran (connexion, tarifs, dashboard) avec le style du design.
  4. 04Fixez la règleMettez le prompt dans les règles du projet de l'agent pour que chaque nouvel écran suive les mêmes couleurs, polices et espacements.

Similaires

Des landings qui partagent un ton ou un secteur avec Retícula.

Voir le catalogue
LandingClairVoir le design

Caso

LandingClairVoir le design

Clipping

LandingClairVoir le design

Vitrine

LandingClairVoir le design

Forma