Andamio

Overview

Andamio is a credential protocol platform that champions technical clarity and minimalist design. The brand serves developers, issuers, and credential consumers who demand precision and trustworthiness in digital identity infrastructure. The aesthetic is "Architectural Minimalism"—a high-contrast, grid-aligned design language that mirrors the structured, deterministic nature of blockchain and cryptographic systems. The UI evokes confidence through restraint: pure white backgrounds, jet-black typography at 88px headlines (letter-spacing: -0.045em), and a single vibrant orange accent (#ff6b35) that signals actionable moments. The emotional response is clarity without coldness—professional, approachable, and deliberately free of decorative flourish.

Andamio's voice is precise, technical, and conversational. Vocabulary leans toward concrete nouns ("credential badge," "issuer," "rings encode") rather than abstract marketing language. Tone is confident but not breathless; the brand explains complex concepts as if speaking to a peer who understands the stakes. Example sentence in brand voice: "A credential badge means something in your world first, then it goes further than you do."

Colors

The color system is built on a monochromatic foundation with two strategic accent colors. **Primary (#ff6b35, orange)** is the sole call-to-action color, deployed on buttons ("Show me →", "Start issuing credentials"), links, and interactive focus states. It appears sparingly—roughly 5–8% of the interface—to maximize impact and signal genuine interactivity. In dark mode, primary shifts to #ff7a52 to maintain contrast against the dark surface (#0f1419). **Secondary (#2f6bff, blue)** and **Tertiary (#004e89, navy)** are reserved for data visualization, status indicators, and secondary navigation; they do not compete with primary for attention. **Surface stack**: Light mode uses pure white (#ffffff) as the base surface, with a subtle container hierarchy (surface-container-low: #f0f0f0, surface

Typography

The type system is anchored in Inter, a geometric sans-serif that conveys technical precision without sterility. Display (88px, 600 weight, -0.045em letter-spacing) is reserved for hero headlines and section titles; its tight tracking and tall x-height create visual impact at scale. Headline-lg (48px) and headline-md (32px) follow the same tracking ratio, maintaining the brand's compressed, architectural feel. Body text (16px, 400 weight, 1.625 line-height) is set loose enough for comfortable reading; the 1.625 ratio prevents the text from feeling cramped despite the tight headline tracking. Labels (13px, 600 weight) are used for button text and UI microcopy; apply a subtle text-shadow (0 1px 2px rgba(0, 0, 0, 0.06)) on labels over busy backgrounds to ensure legibility. All headings use -0

Layout

The layout grid is a 12-column fluid system with a max-width of 1320px (container-max-width). Sections are separated by lg spacing (40px) on mobile, scaling to 64px on desktop. The hero section spans full viewport height minus nav (calc(100svh - var(--nav-clear))), creating a dramatic entry point. Content is centered within the container with symmetric gutter spacing (24px on mobile, 24px on tablet, 24px on desktop—consistent, not responsive). Grid columns collapse to single-column on mobile (col-span-12), two-column on tablet (col-span-6), and full-width or split layouts on desktop (col-span-6 or col-span-7). Whitespace is generous: paragraphs are separated by 1.25em margin-top and margin-bottom; section borders use outline-variant (1px solid) with 14px padding above and below to create b

Elevation & Depth

Depth is conveyed through subtle shadows and borders rather than color shifts. **Level 1 (Base)**: Flat white surface (#ffffff) with no shadow. **Level 2 (Cards & Containers)**: 1px solid border in outline-variant (#9ca3af or rgba(10, 10, 10, 0.15)) + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.1). This dual-shadow technique creates a subtle lift without visual heaviness. **Level 3 (Modals & Overlays)**: Same border + box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), applied when content floats above the base layer. In dark mode, shadows are slightly stronger (rgba(0, 0, 0,

Shapes

The shape philosophy is **Technical Precision**: minimal, functional border-radius that avoids both hard corners and excessive softness. Buttons and inputs use 4px (DEFAULT), creating a subtle softness that feels intentional rather than decorative. Cards and larger containers use 8px (lg) to signal containment without visual distraction. The full (9999px) radius is reserved for badges and pill-shaped elements only. Never use rounded-full on buttons or cards—it contradicts the architectural aesthetic. Border-radius is applied consistently: a 4px button paired with a 4px input field creates visu

Components

**Action Elements**: Buttons are the primary interactive component. Primary buttons (#ff6b35 background, white text, 12px 24px padding, 44px height, 4px radius) use label-md typography (13px, 600 weight, -0.01em tracking). On hover, reduce opacity to 0.9 or shift to #e55a24 (darker orange). Secondary buttons (transparent background, black border, black text) are used for lower-priority actions; on hover, fill with surface-container-high (#e5e5e5). Ghost buttons (transparent, no border, orange text) are for tertiary actions; hover state adds a subtle background fill (surface-container-low, #f0f0f0). All buttons use transition: opacity 150ms ease or background-color 150ms ease for smooth state changes. **Containers & Surfaces**: Cards are the default container component—white background, 1px

Do's and Don'ts

**Do**

• Do use primary (#ff6b35) exclusively for call-to-action buttons and interactive focus states; reserve secondary and tertiary for data visualization and status only.
• Do maintain the headline letter-spacing ratio (-0.045em for display, -0.025em for headline-lg) across all sizes to preserve the architectural aesthetic.
• Do apply the Level 2 shadow (0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.1)) to all cards and containers; never use a single shadow value.
• Do use the 12-column grid with consistent 24px gutters; never use arbitrary column spans or asymmetric spacing.
• Do set body text line-height to 1.625 (28px at 16px font size) for comfortable reading; never compress below 1.5.

**Don't**

• Don't use rounded-full (9999px) on buttons or cards; reserve it for badges and pill-shaped elements only.
• Don't layer text directly on primary or secondary colors; always use the on-* pairs (on-primary, on-secondary) for sufficient contrast.
• Don't apply blur or backdrop-filter effects; the brand rejects glassmorphism in favor of crisp, defined layers.
• Don't use arbitrary spacing values; stick to the defined scale (4px, 12px, 24px, 40px, 64px) for all padding, margins, and gaps.
• Don't mix typefaces within a single component; Inter is the sole UI font; JetBrains Mono is for code only.