Superpower
Centro de Xestión da Saúde Bioluminescente
Superpower representa unha seria promesa clínica nunha interface de usuario cinematográfica e atmosférica: fotografías escuras de ancho completo transfórmanse sen problemas en superficies de contido brancas nítidas, mentres que un único acento laranxa vibrante de amencer pulsa por todo o sistema. A tipografía representa a marca: unha sans-serif xeométrica característica cun espazado mínimo entre letras negativas, que se escala de 11 px para metadatos a 66 px para visualización, cun espazado entre liñas que se comprime a medida que aumenta o tamaño (1,00 para visualización, 1,40–1,50 para o corpo do texto). Unha barra de navegación flotante, escura e con forma de cápsula paira sobre as imaxes, e as chamadas á acción con forma de cápsula crean unha tensión entre a precisión clínica e a enerxía vital e cálida. As superficies son en gran parte planas: o sistema baséase en moito espazo en branco, divisores de zinc sutís e un único patrón de sombras sutil en lugar dunha elevación forte. As cores úsanse con moderación: case todo é negro, branco ou gris zinc, e o laranxa aparece só como signos de puntuación funcionais nas accións e na marca.
A imaxe principal está dominada por unha fotografía cinematográfica de ancho completo: a silueta dunha persoa contra un ceo azul turquesa profundo; a imaxe é intencionadamente escura e melancólica para crear peso emocional e contrastar coa promesa de saúde. As imaxes secundarias son tomas estreitas e ordenadas de estilo de produto (a tarxeta de socio laranxa marmorizada, capturas de pantalla da aplicación) en lugar de fotografía de estilo de vida. Non hai ilustracións, nin renderizado 3D, nin gráficos abstractos: o contraste fotográfico é a identidade visual. A tarxeta de socio está adornada cun patrón orgánico de mármore/lámpada de lava en tons de amencer, o único elemento visual decorativo. As iconas son de radio de liña de 7,5 px (cadrados redondeados suaves) con sutís trazos de carbono negro.
Paleta
Marca
- Sunrise Coral
#fc5f2b— O laranxa úsase como acento secundario para detalles decorativos e para resaltar indicios pouco frecuentes. Non se debe usar como cor principal para chamadas á acción. - Coral Glow
#ff8b64— Punto final degradado combinado coa cor Sunrise Coral para o deseño decorativo de tarxetas de socio.
Neutro
- Carbon Black
#18181b— Texto principal, recheo da barra de navegación flotante, títulos, contorno da icona. - Pure Black
#000000— Logotipo, sinal de texto, marcos con contraste profundo - Zinc Gray
#71717a— Texto principal, descricións adicionais, metadatos ocultos, texto auxiliar. - Ash Gray
#a1a1aa— Texto terciario, bordos inactivos, estados desactivados - Mist Gray
#e4e4e7— Liñas de bordo finas, contornos de tarxetas, liñas divisorias, marcos de botóns. - Fog Gray
#f4f4f5— Irregularidades superficiais sutís, fondo apagado, imaxe superposta a unha base de malla.
Tipografía
de 11 a 66 px · 8 pasos
- NB International Pro — substitución: Inter Tight · contornos 400, 700 · Todo (o deseño, os títulos, o corpo do texto, a interface de usuario e a navegación) está integrado á perfección. A solución de sinatura é un espazado negativo entre letras agresivamente estreito, escalable segundo o tamaño (de -0,025 em a 66 px para textos pequenos), combinado cun espazado entre liñas que se comprime a medida que aumenta o tamaño, o que lles dá aos títulos unha densidade monolítica, semellante á dun póster, que distingue a Superpower dos seus competidores lixeiros no espazo da tecnoloxía médica.
- NB International Mono Pro — substitución: JetBrains Mono · contornos 400 · Os metadatos tabulares, as anotacións de microtexto e as etiquetas técnicas úsanse con moderación en situacións que requiren unha abordaxe clínica/instrumental.
Intervalos e forma
| Propósito | Significado |
|---|---|
| Densidade | media |
| Paso básico | 11px |
| Radio do botón | 9999px |
| Radio da tarxeta | 15px |
| Sombras | sen bordos en vez de sombras |
| Entre seccións | 75px |
| Largura da páxina | 1200px |
A IA creará o teu sitio web ao estilo de Superpower e o encherá
- Enche con produtos e publicacións a través da ligazón: Instagram, TikTok, Facebook.
- Transfire contido do teu sitio antigo: só tes que especificar o enderezo.
- Deseño moderno no mellor motor: React ( Next.js) con renderización de servidor e optimización SEO listas para usar.
- Optimización SEO totalmente automatizada para resultados de busca e recomendacións de redes neuronais.
Estilos semellantes
- Visitors — debuxo de enxeñaría branco
- Dock — Papel crema iluminado polo sol, pulso de cobalto
- Flying Papers — Confesión nun debuxo animado do sábado pola mañá
- Quizlet — A aula está decorada con diversas cores sobre un fondo branco: un escritorio tranquilo, detrás do cal catro tarxetas en tons pastel son o único acento brillante sobre un fondo de paredes grises frías e unha única marca feita cun rotulador índigo.
- ON.energy — Sinal amarelo de advertencia de alta tensión en aceiro de medianoite
- Navigate — Un gran conxunto de adhesivos pegados a un taboleiro: unha gran fonte grotesca, todo en forma de tabletas e cinco iconas multicolores, que se repiten como un logotipo
- Linear — instrumento de precisión de medianoite
- Pop Site — Unha galería tipográfica austera: titulares negros monumentais flotando sobre paredes brancas, cun único punto azul que expresa a intención
- Hyperstudio — O deseño está gravado en obsidiana. Texto e liñas finas enmarcan un espazo branco de negro puro, con ocasionais marcas douradas de compás que indican o camiño.
- Pa'lais — Un caderno de debuxos botánicos, coma se estivese empapado en mel. Papel cor crema, ilustracións azuis con liñas de toile de Jouy e toques cálidos de cor evocan un libro de receitas feito a man, mentres que unha fonte forte e condensada e moito espazo en branco lle dan un toque moderno e editorial.
- Raus — Un diario acolledor escrito en papel crema: cada páxina é coma unha postal do bosque.
- Privy — Un editorial escrito con tinta sobre mármore. Lenzo de mármore branco, titulares con serifas negras fortemente comprimidas, unha única pancarta morada cruzando a parte superior: a moderación como autoridade.