Kodosumi

Overview

Kodosumi is a distributed runtime platform designed for enterprises deploying AI agent services at scale. Built on Ray, it transforms complex orchestration and observability into a clean, minimalist interface that prioritizes clarity and precision. The aesthetic is 'Technical Minimalism'—a design philosophy that strips away visual noise while maintaining visual hierarchy through strategic use of accent colors (cyan #00c2ff, lime #0afa14, orange #ff6400) against a neutral grayscale foundation. The brand personality is direct, confident, and engineering-focused: it speaks to practitioners who value substance over decoration. Voice example: 'Deploy locally, scale to 1,000+ nodes with Ray. Monitor everything in real time.'

Colors

The color system employs a monochromatic base (black #000000 for primary actions, light grays #f5f5f5 for surfaces) paired with three vibrant accent colors that signal different operational states and capabilities. Primary (#000000) anchors all CTAs and navigation; it is the most-clicked color on the page. Secondary (#00c2ff, cyan) represents scalability and distributed compute—used in the 'Scalability via Ray' pillar card and data visualization elements. Tertiary (#0afa14, lime green) signals operational health and real-time monitoring status. Error (#ff6400, orange) highlights framework compatibility and vendor-neutral positioning. Surface stack follows a light-mode convention: surface (#f5f5f5) is the default page background, surface-container-highest (#e0e0e0) is used for subtle divide

Typography

The type system uses Inter exclusively, a geometric sans-serif that conveys technical precision without coldness. Display (64px, 400 weight, -0.02em tracking) is reserved for hero headlines and commands attention through scale rather than weight. Headline-lg (40px, 400 weight) and headline-md (28px, 400 weight) maintain the same light weight, creating a unified, airy hierarchy. Body text (16px–20px, 400 weight) is set with 24–26px line-height for comfortable reading of technical documentation. Labels (11px–14px, 500 weight) are used for metadata, badges, and UI chrome. The consistent use of 400 weight across display and headline levels creates a 'quiet confidence' aesthetic—the content speaks louder than typographic styling. Apply letter-spacing: -0.02em on display and headline-lg to tight

Layout

The layout uses a 12-column grid with a max-width of 1440px, centered with symmetric padding (24px on tablet, 48px on desktop). The hero section establishes the page rhythm: H1 at 64px with 40px top padding, followed by body copy at 20px with 8px margin-top, then CTAs with 8px gap between buttons. Pillar cards are arranged in a 4-column grid on desktop (1 column mobile, 2 on tablet) with 16px gap, creating visual rhythm through repetition. Sections use 96px vertical spacing (lg: 40px × 2.4) to establish breathing room. The container-max (1440px) ensures content never stretches beyond comfortable reading width. Gutter spacing (24px) is applied consistently to all horizontal padding, creating a predictable rhythm. White space is treated as a design element: the 140px top padding on the hero

Elevation & Depth

Depth in Kodosumi is achieved through subtle layering and border definition rather than heavy shadows. The base elevation uses a soft shadow: box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), applied to dropdown panels and modals. Cards use a minimal 1px border at rgba(0, 0, 0, 0.04) to define edges without visual weight; on hover, this border increases to rgba(0, 0, 0, 0.1) to signal interactivity. The header employs backdrop-filter: blur(12px) with background: rgba(244, 244, 244, 0.85) to create a frosted-glass effect that floats above content while maintaining readability. Pillar cards (the four f

Shapes

The shape philosophy is 'Functional Geometry'—rounded corners are used sparingly and purposefully. Buttons use border-radius: 9999px (full roundness) to signal primary actions and create a soft, approachable CTA aesthetic. Cards and inputs use border-radius: 4px (sm) for a subtle, technical feel that avoids the softness of larger radii. The 4px radius appears in dropdown panels, select fields, and form elements, reinforcing the engineering-focused brand. Decorative elements like the colored dots in pillar cards use border-radius: 50% (full circle) to create visual accent points. This hierarchy

Components

Action Elements Buttons follow a two-tier system: primary buttons (bg-black, text-white, px-6 py-2.5, rounded-full, 40px height) are used for main CTAs like 'Getting Started' and 'Join Discord'. Secondary buttons (transparent bg, black text, border: 1px solid rgba(0, 0, 0, 0.1), rounded-full) are used for alternative actions like 'GitHub'. Both use transition: background-color 200ms ease and hover:bg-black/85 for primary, hover:border-black/20 for secondary. Navigation links (text-[14px] font-normal, px-[15px], h-full flex items-center) use hover:text-black/60 to create a subtle dimming effect.

Containers & Surfaces Pillar cards (the four feature cards) use bg-white, border: 1px solid rgba(0, 0, 0, 0.04), p-6, and min-height: 280px to create consistent, stackable containers. On ho

Do's and Don'ts

**Do**

• Do use the full-roundness (border-radius: 9999px) exclusively on primary action buttons to create visual focus and signal interactivity.
• Do apply the three accent colors (cyan #00c2ff, lime #0afa14, orange #ff6400) only to data visualization, status indicators, and pillar card accents—never on body text or backgrounds.
• Do maintain the 4px border-radius on all form inputs, dropdowns, and utility components to reinforce the technical, grid-aligned aesthetic.
• Do use the header's backdrop-filter: blur(12px) with rgba(244, 244, 244, 0.85) background to create visual separation without heavy shadows.

**Don't**

• Don't use heavy shadows (box-shadow: 0 16px 40px) on cards; stick to the minimal 1px border approach with rgba(0, 0, 0, 0.04) at rest.
• Don't apply rounded corners larger than 4px to containers, inputs, or utility elements—reserve full roundness for buttons only.
• Don't use accent colors (cyan, lime, orange) on primary text or backgrounds; they are reserved for status indicators and data visualization.
• Don't increase font-weight above 500 on body text or labels; the system relies on scale and spacing for hierarchy, not weight.