Aranya

Complete Visual System

Color System

Organic Spectrum

Sage Green

#7FB069
rgb(127, 176, 105)
Primary brand color for CTAs, interactions, and key brand moments

Forest Deep

#2D4A2B
rgb(45, 74, 43)
Deep foundation color for sophisticated depth and grounding

Mint Glow

#A8D5BA
rgb(168, 213, 186)
Success states, progress indicators, and positive feedback

Sell Side Blue

#3B82F6
rgb(59, 130, 246)
Sell side orders, market makers, and supply-side pricing in order books

Monochromatic Foundation

Obsidian

#0A0A0A
rgb(10, 10, 10)
Primary background, creating depth and sophistication

Charcoal

#1A1A1A
rgb(26, 26, 26)
Card backgrounds, elevated surfaces, and content areas

Snow

#FFFFFF
rgb(255, 255, 255)
Primary text, high contrast elements, and light mode support

Usage Guidelines

Interface Elements

How colors work across UI components and interactive states.

  • Sage Green: Primary buttons, active states, brand accents
  • Forest Deep: Secondary elements, hover effects, depth
  • Mint Glow: Success messages, completed states, positive indicators
  • Charcoal: Card backgrounds, modals, elevated content

Typography Hierarchy

Color application for text hierarchy and readability.

  • Snow (#FFFFFF): Headlines, primary text content
  • Pearl (#F8F9FA): Subheadings, important secondary text
  • Medium contrast: Body text, descriptions
  • Ash (#4A4A4A): Captions, metadata, subtle information

Atmospheric Effects

Subtle color usage for depth and sophisticated layering.

  • Gradients: Always between adjacent colors in the palette
  • Opacity layers: 2-8% for background patterns
  • Border treatments: rgba values at 3-6% opacity
  • Glow effects: Sage at 10-15% for brand moments

Technical Implementation

Code and data visualization color applications.

  • Syntax highlighting: Mint for strings and values
  • Code blocks: Forest background at 10% opacity
  • Data visualization: Sequential scale from Forest to Mint
  • Error states: Use Snow on Charcoal background

Typography System

Display XL
Display Large
Heading Large
Heading Medium
Large body text for important descriptions and introductory content that needs enhanced readability and prominence.
Medium body text for standard content, maintaining excellent readability while conserving space.
const aranya = { theme: 'organic', infrastructure: 'natural', palette: ['sage', 'forest', 'mint'] };
Technical Details & Metadata
Primary Font
FontInter (Sophisticated Sans-Serif)
PurposeHeadlines, UI, Body Text
Weight Range200–800
CharacterClean, Geometric, Organic
Technical Font
FontJetBrains Mono
PurposeCode, Data, Technical Content
Weight300–600
CharacterTechnical, Precise, Readable

Typography Implementation

  • Inter provides clean geometry with subtle organic curves for sophistication
  • Ultra-light weights (200-300) for display typography create ethereal presence
  • JetBrains Mono adds technical credibility to code blocks and data
  • Text hierarchy uses color gradation rather than dramatic weight changes
  • All caps + letter-spacing for labels creates refined system language
  • Maintain consistent baseline grid for vertical rhythm

Organic Pattern System

Neural Web

Interconnected nodes that pulse with organic rhythm, representing the complex connections within technical systems and AI networks.

When to use: Hero sections, loading states, dashboard backgrounds, and areas emphasizing connectivity or AI/ML concepts.

Organic Grid

Subtle grid system with natural variations, providing structure while maintaining organic flow and breathing room for content.

When to use: Documentation pages, form layouts, data tables, and anywhere structure needs to feel less rigid and more natural.

Growth Spiral

Spiraling patterns inspired by natural growth sequences, fibonacci ratios, and organic expansion principles found in nature.

When to use: Progress indicators, loading animations, about pages, and sections highlighting growth, evolution, or organic development.

Aranya Spot Clusters

Dynamic hexagonal grid representing the GPU spot market with real-time order book visualization, showing buy/sell orders and market activity in an interconnected hexagonal network.

When to use: Market dashboards, trading interfaces, cluster resource allocation visualizations, and sections emphasizing real-time market dynamics or computational resource trading.

Pattern Implementation Strategy

  • Use patterns at 4-8% opacity to create atmospheric depth without overwhelming content
  • Layer multiple patterns at different scales for sophisticated visual complexity
  • Animate patterns with 12-20 second cycles to create living, breathing interfaces
  • Neural networks work best behind content that emphasizes technology and connectivity
  • Organic grids provide structure without competing with typography or feeling rigid
  • Growth spirals add energy to sections about progress, evolution, or organic development
  • Hexagonal networks reinforce technical precision and structural integrity
  • Always ensure patterns enhance spatial hierarchy without competing with typography
  • Use CSS backdrop-filter for proper integration with glassmorphism effects

Hexagonal Design Language

Sell Side Blue

#3B82F6
rgb(59, 130, 246)
Sell side orders, market makers, and supply-side pricing in order books. Now used consistently across cluster illustrations and market visualizations.

Buy Side Green

#10B981
rgb(16, 185, 129)
Buy side orders, market takers, and demand-side pricing in order books. Complementary to sell side blue for balanced visual hierarchy.

Hexagon Design System

#3B82F6
rgb(59, 130, 246)
Primary geometric shape for cluster representations throughout Aranya ecosystem. Six-sided form representing stability, efficiency, and structural integrity. Used consistently in tech-stack diagrams, cluster visualizations, and technical documentation.

Hexagon Accent

#10B981
rgb(16, 185, 129)
Supporting color for hexagon borders, internal patterns, and decorative elements. Provides visual hierarchy and depth when used with primary hexagon color.

Federation Architecture Example

Federated K8s

Unified Control Plane

Kubernetes Federation

A practical implementation of the hexagonal design system, showcasing how our brand language extends to complex technical architectures. The federation diagram demonstrates the visual hierarchy and connection patterns that emerge when applying our hexagonal design principles to distributed systems.

When to use: Technical documentation, architecture overviews, system design presentations, and dashboard visualizations that require clear representation of federated or distributed systems.

Complete System Integration

  • Dark mode is primary—light variants should maintain the same sophisticated depth
  • All animations use cubic-bezier(0.23, 1, 0.32, 1) for organic, natural easing
  • Transition durations: 0.7-0.8s for premium perception and quality feel
  • Border radius: 28-36px for cards, 16-24px for smaller elements
  • Backdrop blur: 30-50px for sophisticated glassmorphism effects
  • Always maintain WCAG AAA compliance with 7:1 contrast ratios minimum
  • JetBrains Mono establishes technical credibility while maintaining readability
  • Patterns should breathe with content—creating living, adaptive interfaces