@@ -0,0 +1,385 @@
<!DOCTYPE html>
< html lang = "it" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > adiuvAI — Brand Identity< / title >
< link rel = "preconnect" href = "https://fonts.googleapis.com" >
< link rel = "preconnect" href = "https://fonts.gstatic.com" crossorigin >
< link href = "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel = "stylesheet" >
< style >
* , * :: before , * :: after { box-sizing : border-box ; margin : 0 ; padding : 0 ; }
: root {
--bg-light : #f4edf3 ; --bg-dark : #0c0c0c ;
--text : #040404 ; --text-light : #fbfbfb ;
--primary : #fbc881 ; --secondary : #8a8ea9 ;
--muted : #c8c3cd ; --border : #c8c3cd ;
--radius : 10 px ;
}
body { font-family : 'Inter' , system-ui , sans-serif ; background : var ( - - bg - light ) ; color : var ( - - text ) ; -webkit- font-smoothing : antialiased ; }
. container { max-width : 1100 px ; margin : 0 auto ; padding : 0 32 px ; }
. section-label { font-size : 11 px ; font-weight : 600 ; letter-spacing : .12 em ; text-transform : uppercase ; color : var ( - - primary ) ; margin-bottom : 12 px ; }
/* ── COMPASS ANIMATION ── */
. compass-needle { animation : compass-settle 5 s ease-in-out infinite ; transform-origin : 32 px 32 px ; }
@ keyframes compass-settle {
0 % { transform : rotate ( 0 deg ) ; }
20 % { transform : rotate ( 4 deg ) ; }
50 % { transform : rotate ( -3 deg ) ; }
80 % { transform : rotate ( 2 deg ) ; }
100 % { transform : rotate ( 0 deg ) ; }
}
/* ── HERO ── */
. hero { background : var ( - - bg - dark ) ; padding : 96 px 32 px 80 px ; text-align : center ; }
. hero-mark { width : 96 px ; height : 96 px ; margin : 0 auto 32 px ; }
. hero-label { font-size : 11 px ; font-weight : 600 ; letter-spacing : .14 em ; text-transform : uppercase ; color : var ( - - primary ) ; margin-bottom : 16 px ; }
. hero-name { font-size : clamp ( 40 px , 6 vw , 64 px ) ; font-weight : 700 ; color : var ( - - text - light ) ; letter-spacing : -2 px ; line-height : 1 ; margin-bottom : 16 px ; }
. hero-name span { color : var ( - - primary ) ; }
. hero-tagline { font-size : 16 px ; color : rgba ( 251 , 251 , 251 , .45 ) ; max-width : 420 px ; margin : 0 auto ; line-height : 1.6 ; }
/* ── SECTIONS ── */
. section { padding : 72 px 32 px ; border-bottom : 1 px solid var ( - - border ) ; }
. section : last-of-type { border-bottom : none ; }
. section-dark { background : var ( - - bg - dark ) ; border-bottom : 1 px solid #1a1a1a ; }
. section h2 { font-size : 22 px ; font-weight : 600 ; color : var ( - - text ) ; margin-bottom : 8 px ; letter-spacing : -.5 px ; }
. section-dark h2 { color : var ( - - text - light ) ; }
. section > p { font-size : 14 px ; color : var ( - - secondary ) ; line-height : 1.7 ; max-width : 560 px ; margin-bottom : 40 px ; }
. section-dark > p { color : rgba ( 251 , 251 , 251 , .4 ) ; }
/* ── CONCEPT GRID ── */
. concept-grid { display : grid ; grid-template-columns : 1 fr 1 fr ; gap : 48 px ; align-items : start ; }
@ media ( max-width : 700px ) { . concept-grid { grid-template-columns : 1 fr ; } }
. concept-mark-wrapper { background : var ( - - bg - dark ) ; border-radius : var ( - - radius ) ; padding : 56 px 48 px ; display : flex ; justify-content : center ; align-items : center ; }
. concept-text . point { display : flex ; gap : 12 px ; margin-bottom : 22 px ; align-items : flex-start ; }
. point-icon { width : 26 px ; height : 26 px ; background : rgba ( 251 , 200 , 129 , .1 ) ; border : 1 px solid rgba ( 251 , 200 , 129 , .22 ) ; border-radius : 6 px ; display : flex ; align-items : center ; justify-content : center ; flex-shrink : 0 ; margin-top : 1 px ; font-size : 12 px ; }
. point-title { font-size : 13 px ; font-weight : 600 ; color : var ( - - text ) ; margin-bottom : 4 px ; }
. point-desc { font-size : 13 px ; color : var ( - - secondary ) ; line-height : 1.65 ; margin : 0 ; }
/* ── VARIANTS ── */
. variants-grid { display : grid ; grid-template-columns : 1 fr 1 fr ; gap : 16 px ; }
. variant-full { grid-column : 1 / -1 ; }
@ media ( max-width : 700px ) { . variants-grid { grid-template-columns : 1 fr ; } }
. logo-card { border-radius : var ( - - radius ) ; overflow : hidden ; border : 1 px solid var ( - - border ) ; transition : transform .18 s ease , box-shadow .18 s ease ; }
. logo-card : hover { transform : translateY ( -3 px ) ; box-shadow : 0 8 px 32 px rgba ( 0 , 0 , 0 , .10 ) ; }
. logo-card-dark { border-color : #1e1e1e ; }
. logo-card-dark : hover { box-shadow : 0 8 px 32 px rgba ( 0 , 0 , 0 , .5 ) ; }
. card-inner { padding : 40 px 32 px ; display : flex ; align-items : center ; justify-content : center ; min-height : 120 px ; }
. card-inner-light { background : var ( - - bg - light ) ; }
. card-inner-dark { background : var ( - - bg - dark ) ; }
. card-inner-white { background : #fff ; }
. card-inner img { max-width : 100 % ; max-height : 72 px ; object-fit : contain ; }
. card-meta { padding : 10 px 16 px ; display : flex ; justify-content : space-between ; align-items : center ; border-top : 1 px solid var ( - - border ) ; background : #fff ; }
. card-meta-dark { border-top-color : #1e1e1e ; background : #0e0e0e ; }
. card-label { font-size : 11 px ; font-weight : 600 ; letter-spacing : .08 em ; text-transform : uppercase ; color : var ( - - secondary ) ; }
. card-meta-dark . card-label { color : rgba ( 251 , 251 , 251 , .3 ) ; }
. card-filename { font-size : 11 px ; font-family : monospace ; color : var ( - - muted ) ; }
. card-meta-dark . card-filename { color : rgba ( 251 , 251 , 251 , .2 ) ; }
/* ── PALETTE ── */
. palette-grid { display : grid ; grid-template-columns : repeat ( auto - fill , minmax ( 140 px , 1 fr ) ) ; gap : 12 px ; }
. color-chip { border-radius : var ( - - radius ) ; overflow : hidden ; border : 1 px solid rgba ( 0 , 0 , 0 , .06 ) ; }
. color-swatch { height : 80 px ; display : flex ; align-items : flex-end ; padding : 8 px 10 px ; }
. color-hex { font-size : 11 px ; font-family : monospace ; font-weight : 500 ; opacity : .65 ; }
. color-info { padding : 10 px ; background : #fff ; }
. color-name { font-size : 12 px ; font-weight : 600 ; color : var ( - - text ) ; margin-bottom : 2 px ; }
. color-role { font-size : 11 px ; color : var ( - - secondary ) ; }
/* ── TYPE ── */
. type-specimen { background : #fff ; border : 1 px solid var ( - - border ) ; border-radius : var ( - - radius ) ; padding : 40 px ; }
. type-row { padding : 20 px 0 ; border-bottom : 1 px solid #f0eaef ; }
. type-row : last-child { border-bottom : none ; padding-bottom : 0 ; }
. type-meta { font-size : 11 px ; font-weight : 500 ; letter-spacing : .08 em ; text-transform : uppercase ; color : var ( - - muted ) ; margin-bottom : 8 px ; }
. type-xl { font-size : 48 px ; font-weight : 700 ; letter-spacing : -2 px ; line-height : 1 ; }
. type-xl span { color : var ( - - primary ) ; }
. type-lg { font-size : 28 px ; font-weight : 600 ; letter-spacing : -.8 px ; }
. type-md { font-size : 16 px ; font-weight : 400 ; line-height : 1.6 ; }
. type-sm { font-size : 12 px ; font-weight : 500 ; letter-spacing : .06 em ; text-transform : uppercase ; color : var ( - - secondary ) ; }
/* ── DEV REF ── */
. dev-grid { display : grid ; grid-template-columns : 1 fr 1 fr ; gap : 24 px ; }
@ media ( max-width : 700px ) { . dev-grid { grid-template-columns : 1 fr ; } }
. code-block { background : #0e0e0e ; border : 1 px solid #1e1e1e ; border-radius : var ( - - radius ) ; padding : 24 px ; overflow-x : auto ; }
. code-block pre { font-family : monospace ; font-size : 12 px ; line-height : 1.7 ; color : #e1e2e8 ; }
. ck { color : #a1c9fd ; } . cs { color : #fbc881 ; } . cc { color : rgba ( 225 , 226 , 232 , .28 ) ; font-style : italic ; }
. file-tree { background : #0e0e0e ; border : 1 px solid #1e1e1e ; border-radius : var ( - - radius ) ; padding : 24 px ; }
. file-tree-title { font-size : 11 px ; font-weight : 600 ; letter-spacing : .10 em ; text-transform : uppercase ; color : rgba ( 251 , 251 , 251 , .28 ) ; margin-bottom : 16 px ; }
. fi { display : flex ; gap : 10 px ; margin-bottom : 10 px ; align-items : flex-start ; }
. fi : last-child { margin-bottom : 0 ; }
. fi-icon { font-size : 12 px ; flex-shrink : 0 ; margin-top : 1 px ; }
. fi-name { font-family : monospace ; font-size : 12 px ; color : #fbc881 ; flex-shrink : 0 ; }
. fi-desc { font-size : 12 px ; color : rgba ( 225 , 226 , 232 , .3 ) ; line-height : 1.5 ; }
/* ── FOOTER ── */
. footer { background : var ( - - bg - dark ) ; padding : 48 px 32 px ; text-align : center ; }
. footer-name { font-size : 20 px ; font-weight : 700 ; color : var ( - - text - light ) ; letter-spacing : -.5 px ; margin-bottom : 4 px ; }
. footer-name span { color : var ( - - primary ) ; }
. footer-sub { font-size : 12 px ; color : rgba ( 251 , 251 , 251 , .28 ) ; letter-spacing : .06 em ; }
< / style >
< / head >
< body >
<!-- HERO -->
< section class = "hero" >
< div class = "container" >
< div class = "hero-mark" >
< svg viewBox = "0 0 64 64" fill = "none" width = "96" height = "96" >
< g class = "compass-needle" >
< path d = "M32,4 L48,32 L16,32 Z" fill = "#fbc881" / >
< path d = "M16,32 L48,32 L32,60 Z" fill = "#FFFFFF" opacity = "0.75" / >
< circle cx = "32" cy = "32" r = "2.5" fill = "#FFFFFF" opacity = "0.2" / >
< / g >
< / svg >
< / div >
< p class = "hero-label" > Brand Identity< / p >
< h1 class = "hero-name" > adiuv< span > AI< / span > < / h1 >
< p class = "hero-tagline" > Il tuo compasso nel lavoro quotidiano — l'AI che ti indica sempre la direzione giusta.< / p >
< / div >
< / section >
<!-- DESIGN CONCEPT -->
< section class = "section" >
< div class = "container" >
< p class = "section-label" > Design Concept< / p >
< h2 > Il Compasso< / h2 >
< p > Non il gesto dell'aiuto, ma il suo significato più profondo: qualcuno che ti indica la strada. Un ago di bussola che oscilla e si ferma sempre a nord.< / p >
< div class = "concept-grid" >
< div class = "concept-mark-wrapper" >
< svg viewBox = "0 0 64 64" fill = "none" width = "140" height = "140" >
< g class = "compass-needle" >
< path d = "M32,4 L48,32 L16,32 Z" fill = "#fbc881" / >
< path d = "M16,32 L48,32 L32,60 Z" fill = "#FFFFFF" opacity = "0.65" / >
< line x1 = "16" y1 = "32" x2 = "48" y2 = "32" stroke = "#fff" stroke-width = "0.5" opacity = "0.15" / >
< circle cx = "32" cy = "32" r = "2.5" fill = "#fff" opacity = "0.2" / >
< / g >
<!-- Annotations -->
< text x = "34" y = "14" font-size = "4" fill = "rgba(251,200,129,.6)" font-family = "Inter,sans-serif" letter-spacing = ".05em" > NORD · AI< / text >
< line x1 = "32" y1 = "17" x2 = "32" y2 = "20" stroke = "rgba(251,200,129,.4)" stroke-width = ".6" / >
< text x = "34" y = "52" font-size = "4" fill = "rgba(255,255,255,.35)" font-family = "Inter,sans-serif" letter-spacing = ".05em" > SUD · YOU< / text >
< line x1 = "32" y1 = "47" x2 = "32" y2 = "50" stroke = "rgba(255,255,255,.2)" stroke-width = ".6" / >
< / svg >
< / div >
< div class = "concept-text" >
< div class = "point" >
< div class = "point-icon" > ▲< / div >
< div >
< div class = "point-title" > Nord dorato = l'AI< / div >
< p class = "point-desc" > La punta superiore (#fbc881) punta sempre verso l'alto — verso l'obiettivo. È l'AI: calda, orientata, che guida senza invadere.< / p >
< / div >
< / div >
< div class = "point" >
< div class = "point-icon" > ▼< / div >
< div >
< div class = "point-title" > Sud scuro = l'utente< / div >
< p class = "point-desc" > La punta inferiore (#040404) è ancorata alla realtà. L'utente con le sue attività, i suoi progetti, il suo lavoro concreto.< / p >
< / div >
< / div >
< div class = "point" >
< div class = "point-icon" > ↺< / div >
< div >
< div class = "point-title" > L'oscillazione (animazione)< / div >
< p class = "point-desc" > Il mark oscilla leggermente come un vero ago prima di fermarsi — trovare il nord. Un dettaglio quasi impercettibile, fedele alla brand personality "calma, mai appariscente".< / p >
< / div >
< / div >
< div class = "point" >
< div class = "point-icon" > ◇< / div >
< div >
< div class = "point-title" > Il diamante (forma)< / div >
< p class = "point-desc" > Due triangoli che formano un rombo. Forma archetipica, funziona a 16px come a 512px. La divisione orizzontale racconta la relazione senza bisogno di parole.< / p >
< / div >
< / div >
< / div >
< / div >
< / div >
< / section >
<!-- LOGO VARIANTS -->
< section class = "section" style = "background:#faf5f9;" >
< div class = "container" >
< p class = "section-label" > Logo Variants< / p >
< h2 > 7 File Canonici< / h2 >
< p > Ogni variante usa gli stessi due triangoli — cambiano solo colore e scala.< / p >
< div class = "variants-grid" >
< div class = "logo-card variant-full" >
< div class = "card-inner card-inner-light" style = "min-height:100px;" >
< img src = "logo-full.svg" alt = "adiuvAI full logo" >
< / div >
< div class = "card-meta" >
< span class = "card-label" > Full Logo< / span >
< span class = "card-filename" > logo-full.svg< / span >
< / div >
< / div >
< div class = "logo-card logo-card-dark variant-full" >
< div class = "card-inner card-inner-dark" style = "min-height:100px;" >
< img src = "logo-white.svg" alt = "adiuvAI white" >
< / div >
< div class = "card-meta card-meta-dark" >
< span class = "card-label" > White Variant< / span >
< span class = "card-filename" > logo-white.svg< / span >
< / div >
< / div >
< div class = "logo-card logo-card-dark" >
< div class = "card-inner card-inner-dark" style = "min-height:140px;" >
< img src = "logo-mark.svg" alt = "mark" style = "width:80px;height:80px;" >
< / div >
< div class = "card-meta card-meta-dark" >
< span class = "card-label" > Mark< / span >
< span class = "card-filename" > logo-mark.svg< / span >
< / div >
< / div >
< div class = "logo-card" >
< div class = "card-inner card-inner-white" style = "min-height:140px;" >
< img src = "logo-icon.svg" alt = "icon" style = "max-width:110px;max-height:110px;" >
< / div >
< div class = "card-meta" >
< span class = "card-label" > App Icon< / span >
< span class = "card-filename" > logo-icon.svg< / span >
< / div >
< / div >
< div class = "logo-card" >
< div class = "card-inner card-inner-light" >
< img src = "logo-wordmark.svg" alt = "wordmark" style = "max-height:40px;" >
< / div >
< div class = "card-meta" >
< span class = "card-label" > Wordmark< / span >
< span class = "card-filename" > logo-wordmark.svg< / span >
< / div >
< / div >
< div class = "logo-card logo-card-dark" >
< div class = "card-inner card-inner-dark" style = "flex-direction:column;gap:8px;" >
< img src = "favicon.svg" alt = "favicon" style = "width:64px;height:64px;image-rendering:pixelated;" >
< span style = "font-size:10px;color:rgba(251,251,251,.25);font-family:monospace;" > 16× 16 px< / span >
< / div >
< div class = "card-meta card-meta-dark" >
< span class = "card-label" > Favicon< / span >
< span class = "card-filename" > favicon.svg< / span >
< / div >
< / div >
< div class = "logo-card variant-full" >
< div class = "card-inner card-inner-white" style = "min-height:100px;" >
< img src = "logo-black.svg" alt = "black" >
< / div >
< div class = "card-meta" >
< span class = "card-label" > Black Variant< / span >
< span class = "card-filename" > logo-black.svg< / span >
< / div >
< / div >
< / div >
< / div >
< / section >
<!-- COLOR PALETTE -->
< section class = "section" >
< div class = "container" >
< p class = "section-label" > Color Palette< / p >
< h2 > Colori Brand< / h2 >
< p > Estratti direttamente da globals.css. Canvas rosato caldo in light; monocromo rigoroso in dark.< / p >
< div class = "palette-grid" >
< div class = "color-chip" >
< div class = "color-swatch" style = "background:#fbc881;" > < span class = "color-hex" style = "color:rgba(4,4,4,.5);" > #fbc881< / span > < / div >
< div class = "color-info" > < div class = "color-name" > Golden< / div > < div class = "color-role" > Nord · AI · Accent< / div > < / div >
< / div >
< div class = "color-chip" >
< div class = "color-swatch" style = "background:#f4edf3;" > < span class = "color-hex" style = "color:rgba(4,4,4,.35);" > #f4edf3< / span > < / div >
< div class = "color-info" > < div class = "color-name" > Canvas Light< / div > < div class = "color-role" > Sfondo light mode< / div > < / div >
< / div >
< div class = "color-chip" >
< div class = "color-swatch" style = "background:#0c0c0c;" > < span class = "color-hex" style = "color:rgba(251,251,251,.35);" > #0c0c0c< / span > < / div >
< div class = "color-info" > < div class = "color-name" > Canvas Dark< / div > < div class = "color-role" > Sfondo dark mode< / div > < / div >
< / div >
< div class = "color-chip" >
< div class = "color-swatch" style = "background:#040404;" > < span class = "color-hex" style = "color:rgba(251,251,251,.35);" > #040404< / span > < / div >
< div class = "color-info" > < div class = "color-name" > Ink< / div > < div class = "color-role" > Sud · utente · testo< / div > < / div >
< / div >
< div class = "color-chip" >
< div class = "color-swatch" style = "background:#fbfbfb;border:1px solid #e8e0e7;" > < span class = "color-hex" style = "color:rgba(4,4,4,.28);" > #fbfbfb< / span > < / div >
< div class = "color-info" > < div class = "color-name" > Paper< / div > < div class = "color-role" > Testo dark mode< / div > < / div >
< / div >
< div class = "color-chip" >
< div class = "color-swatch" style = "background:#8a8ea9;" > < span class = "color-hex" style = "color:rgba(251,251,251,.65);" > #8a8ea9< / span > < / div >
< div class = "color-info" > < div class = "color-name" > Slate< / div > < div class = "color-role" > Secondario · muted< / div > < / div >
< / div >
< div class = "color-chip" >
< div class = "color-swatch" style = "background:#c8c3cd;" > < span class = "color-hex" style = "color:rgba(4,4,4,.38);" > #c8c3cd< / span > < / div >
< div class = "color-info" > < div class = "color-name" > Lavender< / div > < div class = "color-role" > Bordi · muted< / div > < / div >
< / div >
< div class = "color-chip" >
< div class = "color-swatch" style = "background:#323232;" > < span class = "color-hex" style = "color:rgba(251,251,251,.35);" > #323232< / span > < / div >
< div class = "color-info" > < div class = "color-name" > Graphite< / div > < div class = "color-role" > Dark surfaces< / div > < / div >
< / div >
< / div >
< / div >
< / section >
<!-- TYPOGRAPHY -->
< section class = "section" style = "background:#faf5f9;" >
< div class = "container" >
< p class = "section-label" > Typography< / p >
< h2 > Geist · System Sans-Serif< / h2 >
< p > Geometrico, pulito, sicuro. @fontsource/geist nell'app; system-ui come fallback.< / p >
< div class = "type-specimen" >
< div class = "type-row" > < div class = "type-meta" > Display · 48px · 700< / div > < div class = "type-xl" > adiuv< span > AI< / span > < / div > < / div >
< div class = "type-row" > < div class = "type-meta" > Heading · 28px · 600< / div > < div class = "type-lg" > Workspace intelligente, locale, caldo.< / div > < / div >
< div class = "type-row" > < div class = "type-meta" > Body · 16px · 400< / div > < div class = "type-md" > adiuvAI organizza i tuoi progetti, task e note in un workspace calmo — con un AI che ti guida silenziosamente verso gli obiettivi.< / div > < / div >
< div class = "type-row" > < div class = "type-meta" > Label · 11px · 600 · Tracked< / div > < div class = "type-sm" > Brand Identity · Design System · 2026< / div > < / div >
< / div >
< / div >
< / section >
<!-- DEVELOPER REFERENCE -->
< section class = "section-dark section" >
< div class = "container" >
< p class = "section-label" > Developer Reference< / p >
< h2 > Tailwind Config · File Tree< / h2 >
< p > Token da aggiungere al blocco @theme di globals.css (Tailwind 4).< / p >
< div class = "dev-grid" >
< div class = "code-block" >
< pre > < span class = "cc" > // globals.css — @theme inline< / span >
< span class = "ck" > --brand-golden< / span > : < span class = "cs" > #fbc881< / span > ; < span class = "cc" > /* nord · AI */< / span >
< span class = "ck" > --brand-canvas< / span > : < span class = "cs" > #f4edf3< / span > ; < span class = "cc" > /* light bg */< / span >
< span class = "ck" > --brand-void< / span > : < span class = "cs" > #0c0c0c< / span > ; < span class = "cc" > /* dark bg */< / span >
< span class = "ck" > --brand-ink< / span > : < span class = "cs" > #040404< / span > ; < span class = "cc" > /* sud · user */< / span >
< span class = "ck" > --brand-slate< / span > : < span class = "cs" > #8a8ea9< / span > ; < span class = "cc" > /* secondary */< / span >
< span class = "ck" > --brand-lavender< / span > : < span class = "cs" > #c8c3cd< / span > ; < span class = "cc" > /* border */< / span >
< span class = "ck" > --brand-graphite< / span > : < span class = "cs" > #323232< / span > ; < span class = "cc" > /* dark surface */< / span >
< span class = "ck" > --brand-paper< / span > : < span class = "cs" > #fbfbfb< / span > ; < span class = "cc" > /* light text */< / span > < / pre >
< / div >
< div class = "file-tree" >
< div class = "file-tree-title" > assets/logo/< / div >
< div class = "fi" > < span class = "fi-icon" > ◇< / span > < span class = "fi-name" > logo-mark.svg< / span > < span class = "fi-desc" > Compasso canonico · 64× 64 · animato< / span > < / div >
< div class = "fi" > < span class = "fi-icon" > ◻< / span > < span class = "fi-name" > logo-full.svg< / span > < span class = "fi-desc" > Mark + wordmark · 320× 72 · animato< / span > < / div >
< div class = "fi" > < span class = "fi-icon" > T< / span > < span class = "fi-name" > logo-wordmark.svg< / span > < span class = "fi-desc" > Solo testo · 200× 40< / span > < / div >
< div class = "fi" > < span class = "fi-icon" > ▣< / span > < span class = "fi-name" > logo-icon.svg< / span > < span class = "fi-desc" > App icon · 512× 512< / span > < / div >
< div class = "fi" > < span class = "fi-icon" > ·< / span > < span class = "fi-name" > favicon.svg< / span > < span class = "fi-desc" > Semplificato · 16× 16< / span > < / div >
< div class = "fi" > < span class = "fi-icon" > ◻< / span > < span class = "fi-name" > logo-white.svg< / span > < span class = "fi-desc" > Variante bianca · su sfondo scuro< / span > < / div >
< div class = "fi" > < span class = "fi-icon" > ◻< / span > < span class = "fi-name" > logo-black.svg< / span > < span class = "fi-desc" > Variante nera · su sfondo chiaro< / span > < / div >
< div class = "fi" style = "margin-top:12px;padding-top:12px;border-top:1px solid #1e1e1e;" >
< span class = "fi-icon" > 🌐< / span > < span class = "fi-name" > brand-showcase.html< / span > < span class = "fi-desc" > Questa pagina< / span >
< / div >
< / div >
< / div >
< / div >
< / section >
< footer class = "footer" >
< div class = "container" >
< div class = "footer-name" > adiuv< span > AI< / span > < / div >
< div class = "footer-sub" > Brand Identity · roberto · 2026< / div >
< / div >
< / footer >
< / body >
< / html >