Downloads
Assets oficiais da marca TLX prontos para uso. Logos, paleta, fontes e design tokens.
Sistema de logo completo em PNG e SVG. Versoes para fundo claro, escuro e transparente.
TLx Branco
PNG · Fundo escuro
Download ↓
TLx Preto
PNG · Fundo claro
Download ↓
Contorno Branco
PNG · Outline claro
Download ↓
Contorno Preto
PNG · Outline escuro
Download ↓
3D Cosmic
PNG · 3D render cosmic
Download ↓
3D Gold
PNG · 3D render gold
Download ↓
Cosmic on Dark
PNG · Cosmic fundo escuro
Download ↓
Gold on Dark
PNG · Gold fundo escuro
Download ↓
Round White Cosmic
PNG · Avatar circular
Download ↓
SVGs em /logo/svg/ · PNGs em /logo/png/ · 3D renders em /logo/3d/
Cores semanticas do design system. 3 temas: Dark, Light e Gold.
--color-accent
Accent Primary
Cosmic: #E8722A · Light: #0A0A0A · Gold: #DDD1BB
--color-base
Background Base
Cosmic: #0A0A0A · Light: #FAFAFA · Gold: #09090A
--color-surface
Surface
Cosmic: #121212 · Light: #FFFFFF · Gold: #151517
--color-primary
Text Primary
Cosmic: #F5F5F5 · Light: #0A0A0A · Gold: #E8E8E8
--color-secondary
Text Secondary
Cosmic: #9CA3AF · Light: #6B7280 · Gold: #A1A1AA
--color-deep-blue
Deep Blue
Cosmic: #2B4C7E · Light: #2B4C7E · Gold: #2B4C7E
--color-success
Success
#00D4AA
--color-error
Error
#EF4444
--color-warning
Warning
#F5A623
CSS Variables (todas)
:root {
/* Accent */
--color-accent: #E8722A;
--color-accent-hover: #F09A5C;
--color-accent-subtle: rgba(232, 114, 42, 0.1);
/* Backgrounds */
--color-base: #0A0A0A;
--color-surface: #121212;
--color-elevated: #1A1A1A;
--color-muted-bg: #262B38;
/* Text */
--color-primary: #F5F5F5;
--color-secondary: #9CA3AF;
--color-muted: #6B7280;
/* Status */
--color-success: #00D4AA;
--color-error: #EF4444;
--color-warning: #F5A623;
--color-info: #3B82F6;
}3 familias tipograficas via Google Fonts. Sem arquivos locais, importar via next/font ou link CDN.
--font-display
Space Grotesk
Headlines, titulos, display text
Inteligencia de mercado para marcas ambiciosas.
--font-body
Inter
Body text, paragrafos, UI
Construimos marcas que vendem enquanto voce dorme.
--font-mono
IBM Plex Mono
Codigo, labels, dados tecnicos
font-family: var(--font-mono);
Next.js Font Import
// app/layout.tsx — Next.js Font Setup
import { Space_Grotesk, Inter, IBM_Plex_Mono } from "next/font/google";
const spaceGrotesk = Space_Grotesk({
subsets: ["latin"],
variable: "--font-display",
display: "swap",
});
const inter = Inter({
subsets: ["latin"],
variable: "--font-body",
display: "swap",
});
const ibmPlexMono = IBM_Plex_Mono({
subsets: ["latin"],
weight: ["400", "500", "600"],
variable: "--font-mono",
display: "swap",
});
// <body className={`${spaceGrotesk.variable} ${inter.variable} ${ibmPlexMono.variable}`}>Tokens exportaveis: spacing, radius, shadows, easing, durations. Copie o CSS completo ou importe em Tailwind.
Spacing Scale
--space-0: 0px;
--space-1: 4px; --space-2: 8px;
--space-3: 12px; --space-4: 16px;
--space-5: 20px; --space-6: 32px;
--space-7: 48px; --space-8: 64px;
--space-9: 80px; --space-10: 96px;
--space-11: 120px; --space-12: 160px;
--spacing-section: 3rem;
--spacing-page: 4rem;Animation Tokens
/* Durations */
--duration-fast: 150ms;
--duration-normal: 300ms;
--duration-slow: 500ms;
--duration-reveal: 1000ms;
/* Easing — Awwwards patterns */
--ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
--ease-spring: cubic-bezier(0.16, 1, 0.3, 1); /* CERNE Studio */
--ease-overshoot: cubic-bezier(0.23, 1, 0.32, 1); /* Digital Present */
--ease-in-decisive: cubic-bezier(0, 0, 0, 1); /* Koto entrance */
--ease-out-quick: cubic-bezier(0.7, 0, 1, 1); /* Koto exit */Shadow & Effects
/* Shadows */
--shadow-card: 0 2px 8px rgba(0, 0, 0, 0.35);
--shadow-glow: 0 0 30px rgba(247, 126, 45, 0.15);
/* Blur */
--blur-glass: 16px;
--blur-decorative: 50px;
/* Radius */
--radius-card: 0px; /* sharp architectural */
--radius-button: 0px;
--radius-badge: 0px;
--radius-pill: 9999px; /* theme toggle only */