HeroProofDecision
All-light site
Ideal for reading, comparison and long flows. Alternate white and neutral to mark chapters.
Visual foundation
High-performance infrastructure, without noise.
More clarity to build, operate and grow with confidence.
Operational view All systems operational
Availability99.99%Last 30 days
- Instances
- 28
- Regions
- 4
- Latency
- 18 ms
Aggregate processingRequests per minute
Last 24 hoursActive regionsConsolidated capacity
RegionStatusLatencyCapacity
Miami, US1 Operational12 ms82%
São Paulo, BR1 Operational21 ms67%
Chapecó, BR2 Operational29 ms54%
Composition guide
Start light and let the interface breathe. Go dark only when the story changes.
Title and explanation keep scale and leading close. Color guides the reading without stacking typographic voices.
Decision matrix
Choose the surface by the fold's function.
If the reason to go dark is not concrete, stay light.
SituationFoldExecution rule
Content, product or navigation Light or neutral
Use as the default. Keep a light canvas, dark text and one primary action.
Dense visualization or local proof Contained dark
Darken only the panel. Keep the inner interface light and the icons light on the dark background.
A real shift in narrative context Full dark
Use it once. Return to light in the next fold with the same alignment and at least 96 px of breathing room.
Three ready-made recipes
Build the sequence before drawing details.
ContextOperationAction
Mixed sequence
Use dark for one decisive proof. Repeat the rail and a visual motif to keep continuity.
OfferPanelNext step
Light with contained focus
Choose it when the media needs contrast but the page does not need to change atmosphere.
Give every layer a clear job.
- Use one dominant media per fold.
- Keep title and explanation at the same scale.
- Limit violet to two saturated roles per viewport.
- Use high density only inside the main visualization.
Do not create atmosphere without function.
- Do not place two full dark folds in a row.
- Do not use yellow outside a dark purple background.
- Do not swap a proof for a grid of equivalent cards.
- Do not let dark icons disappear on dark surfaces.
Color and contrast
A palette that guides without competing for attention.
Neutral surfaces carry most of the experience. Violet signals brand and action. Every text, icon, border and focus pair was defined for both themes.
Optidata primary#8d0de3CTA, brand focus and selected state
- Canvas
#f8f7fa--color-canvas - Surface
#ffffff--color-surface - Subtle surface
#f2eef5--color-surface-subtle - Primary text
#201525--color-text-primary - Secondary text
#584d5e--color-text-secondary - Strong border
#8b7d92--color-border-strong - Primary
#8d0de3--color-primary - Soft primary
#f4e9fb--color-primary-soft
- Brand 100
#ecd9ff--color-brand-100 - Brand 200
#d9b3ff--color-brand-200 - Brand 300
#cba5fd--color-brand-300 - Brand 400
#af63fd--color-brand-400 - Brand 600
#8d0de3--color-brand-600 - Brand 900
#3f026a--color-brand-900 - Brand 950
#1e002f--color-brand-950 - Brand ink
#0b0019--color-brand-ink
Semantic states
Color always comes with a name and a message. Warning yellow is a semantic state and never doubles as the brand accent.
- SuccessOperation completed
- WarningAttention required
- ErrorAction interrupted
- InfoContext information
Sovereign cloud
Infrastructure thatstays online.
Brand accent
Yellow only over dark purple.
Optidata yellow (Pantone 7404 C) appears as eyebrow, as the highlighted line of a title and as a seal icon over the Ultraviolet ramp, exactly as in the home hero. Never on a light background, never as a block fill, never as an action color.
--color-accentEyebrow, title highlight and seal icon--color-on-accentText over solid yellow, when unavoidable
Allowed surfaces: --color-brand-900, --color-brand-950 and --color-brand-ink.
Five seal icons (soc, iso-27001, regions, private-cloud, account) have a yellow variant in /design/icons/accent, generated by npm run icons:accent, for this surface only.
Optional theme
Dark with limits and purpose.
A readable mode for dense panels, visualizations and moments of focus. The page stays light around it.
- Canvas
#151018 - Surface
#1f1823 - Subtle surface
#29202e - Raised surface
#32273a - Primary text
#f7f2f9 - Secondary text
#d3c8d7
GPU cluster
inference-br-01
GPU8 x H100Utilization72%RegionSão Paulo
Typography
Manrope, a single voice.
A short scale organizes marketing, product and documentation. Leading opens up as the text gets smaller.
Cloud at human scale
Display
clamp(36px, 3.4vw, 48px)Clarity to operate what matters.
Editorial
clamp(28px, 2.6vw, 36px)Infrastructure ready to grow
Heading 1
28pxPredictable performance
Heading 2
22pxProduction environment
Heading 3
18pxA comfortable reading layer for introductions and important explanations.
Body large
18pxDefault text for product, technical content and documentation.
Body
16pxMetadata, support and interface details.
Body small
14pxManaged infrastructure
Label
12pxShape and elevation
Soft geometry, clear hierarchy.
Radii grow with the container size. Shadows describe overlap without turning every card into a floating object.
Radii
8 to 24 pxcontrol8pxcard12pxcard-lg16pxpanel24pxpill9999px
Elevation
3 levels- CardSubtle separation
--shadow-1 - PopoverOverlaid context
--shadow-2 - DialogDecision in the foreground
--shadow-3
Controls in context
Large targets, visible focus and actions with different weights.
Rhythm and motion
Room to breathe. Time to understand.
Rhythm uses multiples of four. Transitions are short, stable and respect the reduced-motion preference.
Spacing
4 to 96 px14px28px312px416px524px632px748px864px996px10128px
Motion
Hover or press TabDefault easing: cubic-bezier(0.2, 0.8, 0.2, 1)
Components
Primitives with complete contracts.
Semantics, hierarchy and states are already part of the component. Composition only picks the right role for each context.
Button
3 variants, 3 sizesEditorialStatement
hierarchy by colorOne statement sets the focus. One expression leads.
The explanation keeps the same scale and lowers contrast to complete the thought without creating another voice.
Processed traffic8.4 million
StablePeak18.2k rpmLatency21 msErrors0.02%
Icon system
One family, two surfaces.
The 49 SpotIcons share the same geometry, 1.5 stroke and 46-unit optical box. Use the light version on dark backgrounds and the violet version on light backgrounds.
Official library
49 normalized silhouettes
Dark background Light background
- Compute
computeDarkLight - Storage
storageDarkLight - GPU
gpuDarkLight - Inference
inferenceDarkLight - Private cloud
private-cloudDarkLight - Self-serve
self-serveDarkLight - Price
priceDarkLight - Speed
speedDarkLight - Support
supportDarkLight - Security
securityDarkLight - Regions
regionsDarkLight - SLA
slaDarkLight - Account
accountDarkLight - Configure
configureDarkLight - Deploy
deployDarkLight - Workspace
workspaceDarkLight - Object storage
object-storageDarkLight - Backup
backupDarkLight - Snapshots
snapshotsDarkLight - VPC
vpcDarkLight - Load balancer
load-balancerDarkLight - IP
ipDarkLight - Security groups
security-groupsDarkLight - DNS
dnsDarkLight - Kubernetes
kubernetesDarkLight - Database
databaseDarkLight - Bare metal
bare-metalDarkLight - Owned stack
owned-stackDarkLight - No lock-in
no-lock-inDarkLight - Migration
migrationDarkLight - DDoS protection
anti-ddosDarkLight - WAF
wafDarkLight - Penetration test
pentestDarkLight - Vulnerability scan
vulnerability-scanDarkLight - SOC
socDarkLight - Zero Trust
zero-trustDarkLight - ISO 27001
iso-27001DarkLight - ERP
erpDarkLight - Bandwidth
bandwidthDarkLight - Console view
console-viewDarkLight - Scale
scaleDarkLight - Access key
access-keyDarkLight - Restore
restoreDarkLight - Failover
failoverDarkLight - Schedule
scheduleDarkLight - Article
articleDarkLight - Video
videoDarkLight - MIG
migDarkLight - Root access
root-accessDarkLight
Brand and files
Apply the brand without improvising.
Scale proportionally, keep a clear space equal to one circle of the symbol, and never add an outline, glow or gradient to the logo.
Public name: Optidata Design System. The word Optidata always keeps the same spelling.
Download the machine-readable guide
White logoFor dark backgroundsDownload SVG
Black logoFor light backgroundsDownload SVG- Color logoViolet symbol with dark wordmarkDownload SVG
SymbolUses currentColor in compact spacesDownload SVG
Cluster update
In progressgpu-inference-br-01
- Redirect trafficCompleted at 02:08
- Apply updateCompleted at 02:19
- Validate integrityCompleted at 02:31
- Resume capacityEstimated 6 minutes