Forma.
Affiche Bauhaus : grandes formes géométriques en rouge, bleu et jaune sur papier, bordures noires épaisses et chiffres géants. Joyeux et organisé.
- Type
- Landing page
- Thème
- Clair
- Titres
- Unbounded
- Texte
- Inter
PourFamilles avec enfants, public culturel et créatif
Sections de la page01/10nav com logo de formas
Pôster Bauhaus que virou site. Formas geométricas grandes, cores primárias puras e bordas pretas grossas. Alegre sem ser infantilizado, organizado sem ser frio.
Extrait du DESIGN.md, en portugais pour l'instant.
PourFamilles avec enfants, public culturel et créatif
Palette
Les quatre couleurs qui définissent le design et toutes les variables de tokens.css. Cliquez pour copier.
Typographie
Unbounded pour les titres, Inter pour le texte.
TitresUnbounded
Aag!
Forma en une ligne
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TexteInter
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.
- marque aux couleurs primaires ou logo géométrique
- public enfant ou créatif
- inscription ou visite sur rendez-vous
- institution qui veut paraître moderne sans être froide
- luxe discret
- santé/clinique
- droit et finance
- restaurant du soir
- marque à palette pastel ou terreuse
Ton
Ce qui fait Forma
Les signatures du DESIGN.md : ce qui ne doit pas manquer à l'application.Extrait du DESIGN.md, en portugais pour l'instant.
- 01
Pôster no hero montado com formas (círculo, quarto de círculo, meia-lua, triângulo, anel), algumas girando ou flutuando devagar.
- 02
Grade modular visível no fundo (
.forma-grade: 12 colunas no desktop, 4 no celular). - 03
Faixa de mosaico correndo: quadrados coloridos com uma forma dentro, alternados com palavras.
- 04
Mosaico de cartões em cores cheias, cada um com uma forma cortada no canto.
- 05
Blocos de cor com número gigante (idades, etapas).
- 06
Formas que giram e crescem no hover do cartão (
.forma-mexedentro de.group). - 07
Rótulo vertical ao lado do título do hero.
- 08
Bordas de 3px e sombra sólida deslocada que "afunda" no hover dos botões.
Règles du jeu
Directement du DESIGN.md.Extrait du DESIGN.md, en portugais pour l'instant.
Identidade
- Fundo papel
#f4efe4, superfícies#fffaf0. Texto e bordas pretos#111111. - Primárias puras: vermelho
#e63312, azul#1d4ed8, amarelo#f6c21a(em--forma-*). Nada de tom intermediário, degradê ou transparência nas formas. - Primária azul para blocos grandes (chamada final); destaque vermelho para o botão principal; amarelo para formulário, selos e hover.
- Fontes: Unbounded black em caixa-alta para títulos e números; Inter para texto.
- Cantos retos em tudo (
--d-radius: 0). O redondo aparece só nas formas.
Regras
- Máximo de três cores primárias + preto por tela. Nenhuma cor nova.
- Forma sempre em cor cheia, nunca contorno fino (exceto o anel, com traço grosso).
- Texto sobre vermelho e azul é branco; sobre amarelo é preto.
- Formas grandes podem sair da borda do bloco (cortadas), mas nunca por cima de texto.
- Animações lentas (40s de giro, 6s de flutuação) e todas param com
prefers-reduced-motion.
Adaptar à marca do cliente
- Marca com cores próprias: troque as três
--forma-*mantendo o contraste de primárias (uma quente, uma fria, uma clara).--d-primarye--d-accentacompanham. - Museu/centro cultural: troque "turmas" por exposições ou programação, mantendo os números gigantes (datas).
- Agência de design: o mosaico vira serviços e as turmas viram etapas do processo.
Deux fichiers.
Un prompt.
Forma 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.
- 01Téléchargez les deux fichiersDESIGN.md (les règles visuelles) et sistema.css (tokens, composants et signatures du design).
- 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.
- 03Collez le prompt dans votre agentIl lit les règles et construit n'importe quel écran (connexion, tarifs, dashboard) avec le style du design.
- 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 Forma.
