Logos
Everything you need to represent Nixtla. Download logos, explore our typography, colors, and design system.
Full Logo: Light
Full Logo: Dark
Icon: Light
Icon: Dark
[01]
Clear Space
Always maintain a minimum clear space around the logo equal to the height of the 'N' in Nixtla.
[02]
Minimum Size
The full logo should not be rendered smaller than 120px wide. The icon should not be smaller than 32px.
[03]
Don'ts
Do not stretch, rotate, recolor, add effects, or place the logo on busy backgrounds that reduce legibility.
Primary
Aa Bb Cc Dd Ee Ff Gg
Functional
Aa Bb Cc Dd Ee Ff Gg
Supply Mono
Buttons, badges, eyebrow text
200 Ultralight400 Regular500 Medium
Heading Scale
h162px / 100%
Enterprise AI
h250px / 100%
Forecasting Engine
h340px / 120%
Time Series Models
h434px / 120%
Anomaly Detection
h528px / 133%
Real-Time Insights
Text Styles
Eyebrow
SECTION TITLE
Eyebrow Small
LABEL TEXT
Body
Regular paragraph text used throughout the site. 16px, 130% line-height.
Caption
Supporting caption text with reduced opacity.
Nixtla Neutral
Nixtla Haze
Nixtla Water
Nixtla Aubergine
Nixtla Teal
Nixtla Red
Nixtla Orange
950
900
800
700
600
500
400
300
200
100
50
BreakpointSection PaddingInner PaddingVertical Padding
Mobile (<768px)0.75rem (12px)0.75rem (12px)py-10 (2.5rem)
Tablet (768px+)1.25rem (20px)1.25rem (20px)py-10 (2.5rem)
Desktop (1024px+)1.875rem (30px)1.875rem (30px)py-10 (2.5rem)
Wide (1280px+)1.875rem (30px)1.875rem (30px)py-10 (2.5rem)
Design Rules
[01]
No Rounded Corners
The design system uses sharp corners on all cards, containers, and sections. The only exceptions are small UI primitives (pills, avatars, form inputs).
[02]
Border-Only Design
Dividers and cell boundaries use 1px solid borders with the semantic border-border color token. No shadows or gradients on structural elements.
[03]
Full-Bleed Sections
Content grids extend to viewport edges using the full-bleed utility. Inner content re-aligns using px-inner-padding.
[04]
Semantic Colors Only
Use CSS variable-based color tokens (bg-canvas, text-ink, border-border) instead of raw Tailwind color classes.
General
bg-01
bg-02
bg-03
bg-04
bg-05
bg-08
bg-09
bg-10
bg-11
bg-12
bg-13
bg-14
bg-15
bg-16
bg-17
Chat & Terminal
bg-chat
bg-chat-dark
bg-terminal
bg-terminal-dark
Carousel
bg-carousel-1
bg-carousel-2
bg-carousel-3
Use Cases
bg-use-case-1
bg-use-case-2
bg-use-case-3