Binatomy — Brand Kit
Colorful
Colori, tipografia, gradienti animati e template CSS.
Tutto quello che serve per comunicare come Binatomy.
Palette Colori
6 colori primari. Copia hex o RGB con un click.
Indigo Night
#1b1464
rgb(27, 20, 100)
Binatomy Orange
#f7931e
rgb(247, 147, 30)
Cloud Gray
#e9ecef
rgb(233, 236, 239)
Rose Dust
#ab3e47
rgb(171, 62, 71)
Flame Orange
#f15a24
rgb(241, 90, 36)
Royal Purple
#733397
rgb(115, 51, 151)
Uso primario
- Indigo Night — Testi principali, sfondi scuri
- Binatomy Orange — CTA, accenti, evidenziazioni
- Royal Purple — Secondario, gradienti
Uso secondario
- Rose Dust — Warning, dettagli caldi
- Flame Orange — Energia, urgenza
- Cloud Gray — Sfondi, bordi, divisori
Tipografia
Due font, una coppia perfetta.
Font Primario
Instrument Sans
Liberiamo l'intelligenza umana.
Il software come strumento, le persone come fine.
Abbiamo ridotto i tempi di onboarding del 40% con un flusso automatizzato. Lo abbiamo testato su 12 aziende. 9 hanno ridotto i costi operativi entro 3 mesi.
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
Font Display
Instrument Serif
Liberiamo l'intelligenza umana.
Il software come strumento, le persone come fine.
Binatomy sviluppa software. Ma la missione è umana.
Font Pairing in azione
Ogni contenuto che esce con il nome Binatomy costruisce o erode la percezione del brand.
Non esiste il contenuto neutro. Meglio non pubblicare che pubblicare qualcosa di mediocre.
Gradienti Statici
6 gradienti del tema colorful. Transizioni morbide, luminose e sature.
Colorful Primary
linear-gradient(135deg, #1b1464 0%, #733397 35%, #...
Sunset Flame
linear-gradient(135deg, #602b77 0%, #ab3e47 50%, #...
Purple Heat
linear-gradient(135deg, #1b1464 0%, #733397 50%, #...
Indigo Sunset
linear-gradient(135deg, #1b1464 0%, #ab3e47 50%, #...
Rose Gold
linear-gradient(135deg, #ab3e47 0%, #f15a24 50%, #...
Deep Ocean
linear-gradient(135deg, #1b1464 0%, #602b77 50%, #...
Gradienti Home Page
I gradienti usati nelle sezioni della homepage. Ogni sezione ha il suo colore distintivo.
Tools
Arancione — /strumenti-gratuiti
Workspace
Viola Chiaro — /digitalizzazione
Automazione
Viola-Rosa — /automazione
Learn
Blu — /learn
Gradient Text
Liberiamo l'intelligenza umana.
Il software come strumento.
Le persone come fine.
Testo su overlay scuro
Testo su overlay chiaro
Gradient Shift
Gradienti animati che si muovono. L'elemento più distintivo del brand.
Colorful Shift
Animazione principale del brand
.gradient-shift-colorful {
background: linear-gradient(135deg, #1b1464, #733397, #ab3e47, #f15a24, #f7931e, #1b1464);
background-size: 400% 400%;
animation: gradientShift 8s ease infinite;
}
@keyframes gradientShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}Sunset Pulse
Transizione calda e avvolgente
.gradient-shift-sunset {
background: linear-gradient(135deg, #602b77, #ab3e47, #dd533c, #f7931e, #602b77);
background-size: 300% 300%;
animation: gradientShift 6s ease infinite;
}Indigo Flow
Movimento fluido e profondo
.gradient-shift-indigo {
background: linear-gradient(135deg, #1b1464, #602b77, #733397, #ab3e47, #1b1464);
background-size: 300% 300%;
animation: gradientShift 10s ease infinite;
}Fire Wave
Energia e dinamismo
.gradient-shift-fire {
background: linear-gradient(135deg, #f15a24, #f7931e, #ab3e47, #733397, #f15a24);
background-size: 300% 300%;
animation: gradientShift 5s ease infinite;
}Applicazioni Gradient Shift
Button
Badge
Startup InnovativaCard Border
Bordo animato
Gradient shift come border
Gradient Shift — Home Page
Tutti i gradienti della homepage animati con gradient shift. Usati come testo e sfondi nelle varie sezioni.
Tools
Arancione — /strumenti-gratuiti — gradient shift 8s
Workspace
Viola Chiaro — /digitalizzazione — gradient shift 8s
Automazione
Viola-Rosa — /automazione — gradient shift 8s
Learn
Blu — /learn — gradient shift 8s
Gradient Shift su testo
Tools — Strumenti gratuiti
Workspace — Digitalizzazione
Automazione — Efficienza
Learn — Formazione continua
Banner Example
Liberiamo l'intelligenza umana.
A partire da come ne parliamo.
Icone — Lucide
Usiamo esclusivamente lucide.dev. Open-source, coerente, minimalista.
Icone su gradiente — Brand
Gradienti del tema colorful applicati alle icone.
Icone su gradiente — Home Page
Gradienti usati nei pallini galleggianti della hero.
CSS Templates
Copia singoli snippet o scarica il file completo.
CSS Variables
:root {
--bn-indigo: #1b1464;
--bn-orange: #f7931e;
--bn-gray: #e9ecef;
--bn-rose: #ab3e47;
--bn-flame: #f15a24;
--bn-purple: #733397;
--bn-font-sans: 'Instrument Sans', system-ui, sans-serif;
--bn-font-serif: 'Instrument Serif', Georgia, serif;
}Gradient Shift Keyframes
@keyframes bnGradientShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.bn-shift-colorful {
background: linear-gradient(135deg, #1b1464, #733397, #ab3e47, #f15a24, #f7931e, #1b1464);
background-size: 400% 400%;
animation: bnGradientShift 8s ease infinite;
}Gradient Text
.bn-gradient-text {
background: linear-gradient(135deg, #1b1464, #733397, #f7931e);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}Tailwind CSS Classes
<!-- Gradient backgrounds -->
<div class="bg-gradient-to-br from-[#1b1464] via-[#733397] to-[#f7931e]">
<!-- Gradient text -->
<span class="bg-gradient-to-r from-[#1b1464] via-[#733397] to-[#f7931e] bg-clip-text text-transparent">
<!-- Brand colors -->
<div class="bg-[#1b1464] text-white">
<div class="bg-[#f7931e] text-white">
<div class="bg-[#733397] text-white">