ODATANO

Overview

ODATANO is an enterprise-grade blockchain integration platform that bridges SAP CAP applications with the Cardano blockchain via OData V4 services. The design system embodies a "Technical Clarity" aesthetic—combining deep navy and vibrant blue accents with clean, geometric layouts to convey precision, trustworthiness, and technical sophistication. The brand personality is professional yet approachable: it speaks to enterprise architects and developers with clarity and confidence, avoiding hype while emphasizing reliability and standards compliance. The UI prioritizes information hierarchy through color contrast (primary blue #0C5ECF on light surfaces, dark navy #001B5E for typography) and generous whitespace, creating a sense of calm authority. Voice example: "Three CDS services expose Cardano data, transaction building, and signing—all queryable via standard OData operations."

Colors

The color system is anchored in a dual-tone blue palette that signals both enterprise stability and blockchain innovation. Primary (#0C5ECF) is the signature accent used on all CTAs, interactive states, and key data highlights—it appears on the 'Get Started' button, link text, and focus states. Secondary (#3B8EF0) provides a lighter, more approachable variant for hover states and supporting UI elements. Tertiary (#001B5E) is the deep navy used for primary typography (h1, h2) and the dark section backgrounds, establishing visual weight and authority. The surface stack ranges from #ffffff (pure white for cards and content areas) through #f8f9fc (page background with subtle blue tint) to #0b1220 (code block background). Accent colors in code syntax include #fcd34d (strings), #86efac (constant

Typography

The type system uses Inter for all UI text and headlines, paired with JetBrains Mono for code and technical content. Display (60px, 800 weight, -0.035em tracking) is reserved for hero headlines like 'OData for Cardano', establishing immediate visual impact with tight letter-spacing that conveys precision. Headline-lg (40px, 700 weight) and headline-md (28px, 700 weight) structure section content with consistent -0.015em to -0.02em tracking, maintaining the technical aesthetic. Body text (16px, 400 weight, 24px line-height) ensures readability at standard viewing distances, while body-lg (18px) is used for prominent copy like hero subtitles. Label-md (15px, 600 weight) and label-sm (13px, 600 weight) handle button text, badges, and UI labels with 0.01em to 0.02em positive tracking for clari

Layout

The layout follows a 12-column grid system with a 1200px max-width container, centered with 24px horizontal gutters (responsive to 12px on mobile). The page rhythm uses 5rem (80px) vertical spacing between major sections (hero, architecture, features, CDS services), with 3.5rem (56px spacing between section headers and content. The hero section spans full-width with a two-column grid (1fr 1fr) at desktop, stacking to single-column on mobile, creating a balanced composition of text and code visualization. Feature cards use a 3-column grid with 24px gaps, collapsing to 1 column on tablets. The architecture diagram employs a 5-column grid (1fr 80px 1.3fr 80px 1fr) to show the data flow between application, ODATANO, and blockchain layers. Whitespace is semantic: lg spacing (40px) separates maj

Elevation & Depth

Depth is conveyed through a three-tier shadow system that creates subtle visual separation without visual heaviness. Level 1 (sm): 0 1px 3px rgba(0, 27, 94, 0.06), 0 1px 2px rgba(0, 27, 94, 0.04)—used for subtle borders and minimal elevation on cards in their resting state. Level 2 (md): 0 6px 24px -4px rgba(0, 27, 94, 0.12), 0 2px 6px rgba(0, 27, 94, 0.06)—applied on card hover states and interactive elements to signal interactivity. Level 3 (lg): 0 24px 60px -20px rgba(0, 27, 94, 0.25), 0 8px 24px -8px rgba(12, 94, 207, 0.18)—reserved for the hero code block and modals, creating dramatic sep

Shapes

The shape system follows a "Technical Precision" philosophy—using consistent, moderate border-radius values that feel modern without sacrificing clarity. Buttons use 8px (DEFAULT) radius, creating a slightly rounded rectangle that balances approachability with technical credibility. Cards and containers use 18px (lg) radius for a softer, more inviting appearance while maintaining visual distinction from buttons. The code block in the hero uses 24px (xl) radius to emphasize it as a featured component. Input fields use 8px (DEFAULT) radius to align with button styling, creating visual consistenc

Components

Action Elements Buttons are the primary interaction mechanism, rendered in three variants: primary (solid blue background, white text, 44px height, 10px 20px padding), primary-lg (48px height, 13px 28px padding for hero CTAs), and outline (transparent background, blue border and text, 2px border-width). All buttons use 8px border-radius and apply a 0.15s ease transition on transform, box-shadow, background-color, and color. Primary buttons render with box-shadow: 0 4px 14px -4px rgba(12, 94, 207, 0.5) in resting state; on hover, they shift to secondary blue (#3B8EF0) with shadow 0 8px 22px -6px rgba(12, 94, 207, 0.55) and transform: translateY(-1px). Outline buttons invert on hover (blue background, white text) with the same shadow treatment. Focus-visible states apply a 2px solid outl

Do's and Don'ts

**Do**

• Do use primary blue (#0C5ECF) exclusively for interactive elements (buttons, links, focus states) to maintain a consistent call-to-action language across the interface.
• Do apply the lg shadow (0 24px 60px -20px rgba(0, 27, 94, 0.25)) only to hero-level components and modals; use md shadow for card hovers and sm shadow for subtle borders.
• Do maintain -0.02em to -0.035em letter-spacing on all headlines (h1–h3) to reinforce the technical, precise brand voice.
• Do use the full 1200px container max-width on desktop to ensure optimal readability and visual balance; never exceed this width.
• Do render code blocks with JetBrains Mono at 14px on #0b1220 background with syntax highlighting colors (#fcd34d, #86efac, #93c5fd) for visual distinction.

**Don't**

• Don't use secondary blue (#3B8EF0) for primary CTAs; reserve it for hover states and supporting UI elements only.
• Don't apply shadows larger than md (0 6px 24px -4px) to cards in resting state; this creates visual noise and reduces hierarchy.
• Don't use rounded values smaller than 8px (DEFAULT) for buttons or inputs; this breaks the technical precision aesthetic.
• Don't render body text smaller than 16px or with line-height less than 24px; this compromises readability on standard displays.
• Don't mix Inter and JetBrains Mono in the same text block; use Inter for UI/prose and JetBrains Mono exclusively for code.