Web UI & Product
Categoria 01
Web UI & Product Design
Interfaces web reais que inspiram a linguagem visual do starter — dark-first, accent gold, tipografia monospace e grids modulares.
Reference Preview
Symbiotic.fi
DeFi protocol com landing page dark-first. Grid de fundo sutil com linhas accent, tipografia tech mono bold e CTAs de alto contraste.
Symbiotic.fib2ec385e43a7d471f497f078fc382171.webp
DeFi protocol com landing page dark-first. Grid de fundo sutil com linhas accent, tipografia tech mono bold e CTAs de alto contraste.
Dark GridAccent CTAMonospaceWeb3Hero Pattern
Influencia →
Hero SectionButton SystemGrid Background
Reference Preview
Age Gate Form UI
Formulario de verificacao de idade com estetica dark+accent. Select inputs com chevron pixelado, botao ENTER bold.
Age Gate Form UId8fd523c13b98c0023ca5301c3111b4b.webp
Formulario de verificacao de idade com estetica dark+accent. Select inputs com chevron pixelado, botao ENTER bold.
Form DesignAccent SystemPixel ArtSelect UICTA Bold
Influencia →
Form ElementsSelect StylingCTA Pattern
HUD & Dashboard
Categoria 02
HUD & Dashboard Interfaces
Interfaces de cockpit, paineis de dados e gaming UI que inspiram o layout de informacao densa, gauges, KPIs.
Reference Preview
FX-D Tread Cockpit
Dashboard estilo cockpit militar/industrial. Paineis de dados com labels monospace, gauges com indicadores de accent.
FX-D Tread Cockpit4ffdb5a2c3f3c3030293be3a1f66ce4a.webp
Dashboard estilo cockpit militar/industrial. Paineis de dados com labels monospace, gauges com indicadores de accent.
Dark Control RoomData PanelsGaugesTrackingKPI Cards
Influencia →
TablesKPI CardsChartsSection Dividers
Reference Preview
Rise UI Design Pack
Gaming UI design pack com player stats card. Rank system, KD ratio, score display, skill meters.
Rise UI Design Packd0082d3d1efefb26f112c5bfe7304f1d.webp
Gaming UI design pack com player stats card. Rank system, KD ratio, score display, skill meters.
Gaming UIStats CardRank SystemKPI DisplayBadge System
Influencia →
CardsBadgesRankingsProgress Bars
Graphic & Pattern
Categoria 03
Graphic Design & Patterns
Patterns geometricos, texturas e elementos graficos que formam a base visual.
Reference Preview
Micro-Pattern Grid
Grid de micro-icones geometricos (X, O, diamond, square) em accent sobre preto.
Micro-Pattern Grid7e22a29aaee06324da5997dbb4ba489c.webp
Grid de micro-icones geometricos (X, O, diamond, square) em accent sobre preto.
PatternMicro IconsModular Grid
Influencia →
Background PatternsWallpapers
Reference Preview
Crosshair Grid
Background ultra-dark com grid de crosshairs sutis (+). Minimalismo maximo.
Crosshair Grid79c48c2b5c8c14ce48d002e6c5583062.webp
Background ultra-dark com grid de crosshairs sutis (+). Minimalismo maximo.
BackgroundCrosshairMinimal
Influencia →
Page BackgroundsHero Sections
Reference Preview
HUD Icons & Frames
Colecao de icones geometricos, frames HUD, hazard stripes e elementos decorativos.
HUD Icons & Framesf7169e877d519078704d2e72af02b25a.webp
Colecao de icones geometricos, frames HUD, hazard stripes e elementos decorativos.
IconografiaHUD FramesHazard Stripes
Influencia →
IconsAlert BordersDecorative Elements
Layout & Typography
Categoria 04
Layout & Typography
Templates de layout, composicoes tipograficas e referencias de estrutura visual.
Reference Preview
Cyberpunk 2077 HUD
Estetica cyberpunk — accent quente sobre preto, circuit lines, warning badges e tipografia angular bold.
Cyberpunk 2077 HUD3c8e04e9daf942e0a0ef6daec1340520.webp
Estetica cyberpunk — accent quente sobre preto, circuit lines, warning badges e tipografia angular bold.
CyberpunkHUD DesignCircuit LinesWarning BadgesAngular Type
Influencia →
Visual LanguageAlert ComponentsDecorative Lines
Reference Preview
Cyber Template System
Sistema de templates futuristas — poster/banner layouts com tipografia bold comprimida, corner brackets.
Cyber Template System978df003eb81a987c41235f6af2b911b.webp
Sistema de templates futuristas — poster/banner layouts com tipografia bold comprimida, corner brackets.
Template SystemBold TypographyCorner BracketsBarcodeLayout Composition
Influencia →
TemplatesSection HeadersTypography ScaleCorner Details
Design Principles
◼
Dark-First
Background #121213 como base. Superficies #151517. Informacao emerge da escuridao.
◆
Stone Sand Accent
#DDD1BB como cor de destaque unica. CTAs, status ativo, dados positivos.
⌘
Monospace Voice
IBM Plex Mono for labels. Space Grotesk for headlines. Manrope for body copy.
⊞
Grid Precision
Layouts baseados em grid com gap de 1px e border como separador.
⚠
HUD Language
Section dividers como cockpit readouts. Corner brackets. Hazard stripes.
◎
Data-Dense
Otimizado para exibir informacao densa — KPIs, rankings, metricas.