Пациенты

version: alpha name: NMKR description: >- NMKR is a multi-chain NFT and token minting platform that abstracts blockchain complexity, enabling creators to mint once and reach audiences across Cardano, Bitcoin, Solana, Midnight, and Aptos simultaneously. logo: src: https://cdn.prod.website-files.com/627424a55a80c8659c58943a/62ab442cff6ad54237cc81e4_nmkr-webclip.png colors: surface: '#ffffff' surface-dim: '#f5f5f5' surface-bright: '#fafafa' surface-container-lowest: '#efeee9' surface-container-low: '#f4f5f5' surface-container: '#eaeaea' surface-container-high: '#dae7dd' surface-container-highest: '#d0d5d0' on-surface: '#333333' on-surface-variant: '#697a6f' inverse-surface: '#1a1a1a' inverse-on-surface: '#f5f5f5' outline: '#829187' outline-variant: '#a9baad' surface-tint: '#11f250' primary: '#11f250' on-primary: '#021205' primary-container: '#37483b' on-primary-container: '#11f250' inverse-primary: '#0d8c1f' secondary: '#1378d1' on-secondary: '#ffffff' secondary-container: '#e3f2fd' on-secondary-container: '#1378d1' tertiary: '#525252' on-tertiary: '#ffffff' tertiary-container: '#dddddd' on-tertiary-container: '#333333' error: '#d32f2f' on-error: '#ffffff' error-container: '#ffebee' on-error-container: '#d32f2f' primary-fixed: '#11f250' primary-fixed-dim: '#0d8c1f' on-primary-fixed: '#021205' on-primary-fixed-variant: '#37483b' secondary-fixed: '#1378d1' secondary-fixed-dim: '#0d5fa8' on-secondary-fixed: '#ffffff' on-secondary-fixed-variant: '#e3f2fd' tertiary-fixed: '#525252' tertiary-fixed-dim: '#3a3a3a' on-tertiary-fixed: '#ffffff' on-tertiary-fixed-variant: '#dddddd' background: '#ffffff' on-background: '#333333' surface-variant: '#a9baad' typography: display: fontFamily: Aspekta fontSize: 64px fontWeight: '400' lineHeight: 72px letterSpacing: '-0.02em' headline-lg: fontFamily: Aspekta fontSize: 48px fontWeight: '400' lineHeight: 56px letterSpacing: '-0.015em' headline-md: fontFamily: Aspekta fontSize: 36px fontWeight: '400' lineHeight: 44px letterSpacing: '-0.01em' title-lg: fontFamily: Inter fontSize: 20px fontWeight: '600' lineHeight: 28px letterSpacing: 0em body-lg: fontFamily: Inter fontSize: 18px fontWeight: '400' lineHeight: 28px letterSpacing: 0em body-md: fontFamily: Inter fontSize: 16px fontWeight: '400' lineHeight: 24px letterSpacing: 0em label-md: fontFamily: Inter fontSize: 14px fontWeight: '600' lineHeight: 20px letterSpacing: 0.01em label-sm: fontFamily: Inter fontSize: 12px fontWeight: '500' lineHeight: 16px letterSpacing: 0.05em rounded: sm: 0.5rem DEFAULT: 0.5rem md: 0.75rem lg: 1rem xl: 1.25rem full: 6.25rem spacing: unit: 8px xs: 4px sm: 12px md: 24px lg: 40px xl: 64px gutter: 24px container-max: 1200px elevation: sm: 0 1px 2px rgba(0, 0, 0, 0.06) md: 0 3px 8px rgba(0, 0, 0, 0.15) lg: 0 8px 24px rgba(0, 0, 0, 0.12) layout: containerMaxWidth: 1200px gridColumns: 12 components: button-primary: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.label-md}' rounded: '{rounded.full}' padding: 12px 32px height: 48px border: none boxShadow: none button-primary-hover: backgroundColor: '{colors.primary-fixed-dim}' textColor: '{colors.on-primary}' transition: background-color 200ms ease-out button-secondary: backgroundColor: '{colors.surface-container-high}' textColor: '{colors.on-surface}' typography: '{typography.label-md}' rounded: '{rounded.full}' padding: 12px 32px height: 48px border: 1px solid {colors.outline-variant} button-secondary-hover: backgroundColor: '{colors.surface-container-highest}' textColor: '{colors.on-surface}' transition: background-color 200ms ease-out button-ghost: backgroundColor: transparent textColor: '{colors.primary}' typography: '{typography.label-md}' rounded: '{rounded.full}' padding: 12px 24px height: 48px border: none button-ghost-hover: backgroundColor: rgba(17, 242, 80, 0.08) transition: background-color 200ms ease-out card: backgroundColor: '{colors.surface-container-lowest}' textColor: '{colors.on-surface}' rounded: '{rounded.lg}' padding: '{spacing.md}' border: 1px solid {colors.outline-variant} boxShadow: '{elevation.sm}' card-hover: backgroundColor: '{colors.surface-container-low}' boxShadow: '{elevation.md}' transition: all 200ms ease-out input-field: backgroundColor: '{colors.surface-container-low}' textColor: '{colors.on-surface}' typography: '{typography.body-md}' rounded: '{rounded.DEFAULT}' padding: 12px 16px border: 1px solid {colors.outline-variant} height: 44px input-field-focus: borderColor: '{colors.primary}' boxShadow: 0 0 0 3px rgba(17, 242, 80, 0.1) transition: all 150ms ease-out badge: backgroundColor: '{colors.primary-container}' textColor: '{colors.on-primary-container}' typography: '{typography.label-sm}' rounded: '{rounded.full}' padding: 6px 12px border: none nav-link: backgroundColor: transparent textColor: '{colors.on-surface-variant}' typography: '{typography.body-md}' rounded: 0px padding: 8px 0px border: none nav-link-active: textColor: '{colors.primary}' borderBottom: 2px solid {colors.primary} transition: color 200ms ease-out

Overview

NMKR is a multi-chain NFT and token minting infrastructure platform that embodies "Technical Clarity"—a design philosophy that transforms blockchain complexity into intuitive, accessible interfaces. The brand serves creators, developers, and enterprises who need to mint digital assets across multiple blockchains (Cardano, Bitcoin, Solana, Midnight, Aptos) without managing separate infrastructure for each chain. The UI evokes confidence and precision through a clean, light-dominant aesthetic punctuated by a vibrant neon-green accent (#11f250) that signals energy, innovation, and forward momentum. The emotional response is one of empowerment: users feel capable of executing sophisticated multi-chain operations without technical friction.

The brand voice is direct, technical yet approachable, and action-oriented. NMKR speaks in concrete terms—"mint," "deploy," "reach"—avoiding hype while celebrating capability. The vocabulary emphasizes user agency ("your users choose," "you focus") and infrastructure reliability ("we handle the minting infrastructure"). Tone is confident without arrogance, professional without coldness. Example sentence in brand voice: "Deploy your NFTs to five blockchains in one action—your users pick where they receive them."

Colors

The NMKR color system is rooted in a light, minimal foundation with a single, commanding accent. Primary (#11f250) is a vivid neon green used exclusively for call-to-action buttons, active states, and brand-critical interactive elements—it commands attention and signals the platform's forward-thinking ethos. On-primary (#021205) is a near-black used for text and icons on primary backgrounds, ensuring 7:1+ contrast for accessibility. The surface stack (white #ffffff down to #d0d5d0 for highest containers) provides subtle depth through grayscale layering, with outline (#829187) and outline-variant (#a9baad) defining borders and dividers. Secondary (#1378d1, a professional dodger blue) supports data visualization and secondary actions, while tertiary (#525252, a neutral gray) anchors UI chrom

Typography

The type system pairs Aspekta (a geometric, modern sans-serif from TypeKit) for display and headline levels with Inter (Google Fonts) for body, labels, and UI text. This pairing creates visual hierarchy through both family and weight: Aspekta's lighter weight (400) at large sizes (64px for display, 48px for headline-lg) conveys editorial confidence and spaciousness, while Inter's heavier weights (600 for labels, 500 for smaller text) provide legibility and emphasis in dense UI contexts. Display (64px, 400 weight, -0.02em letter-spacing) is reserved for hero headlines and major section titles; headline-lg (48px, 400 weight) for subsection headers; headline-md (36px, 400 weight) for card titles and modal headers. Body-lg (18px, 400 weight, 28px line-height) is used for long-form content and

Layout

The layout system uses a 12-column grid with a maximum container width of 1200px, providing a flexible yet structured canvas for responsive design. The spacing scale (unit: 8px, with semantic steps xs/sm/md/lg/xl) is applied consistently: lg spacing (40px) separates major sections, md spacing (24px) defines gutter widths and card padding, and sm spacing (12px) is used for internal component spacing and form field margins. The page rhythm emphasizes breathing room—hero sections use 64px (xl) top and bottom padding, while card grids maintain 24px gaps between items. Container max-width is set to 1200px to prevent content from stretching excessively on ultra-wide displays. White-space is treated as a design element, not a void: the light background (#ffffff) is never fully saturated with cont

Elevation & Depth

Depth in NMKR is conveyed through subtle shadows and layered surfaces rather than dramatic depth effects. The elevation system defines three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for subtle dividers and hover states on flat elements; md (0 3px 8px rgba(0, 0, 0, 0.15)) for cards, dropdowns, and modals; lg (0 8px 24px rgba(0, 0, 0, 0.12)) for floating action buttons and top-level modals. Cards in their default state use sm elevation and surface-container-lowest background (#efeee9), creating a barely-perceptible lift. On hover, cards transition to md elevation and surface-container-low (#f4

Shapes

The shape philosophy is "Soft-Technical"—rounded corners are used liberally to soften the precision of a technical platform, but never so much that the interface feels playful or casual. Buttons use the full radius (6.25rem / 100px), creating pill-shaped forms that feel modern and approachable while maintaining clear affordance. Cards and containers use lg radius (1rem / 16px), providing a gentle curve that distinguishes them from the sharp edges of the page frame. Input fields and smaller interactive elements use DEFAULT radius (0.5rem / 8px), a subtle rounding that improves touch targets wit

Components

Action Elements

Buttons are the primary interaction mechanism and use the full 6.25rem border-radius to create distinctive pill shapes. Button-primary (#11f250 background, #021205 text, 48px height, 12px 32px padding) is used for all primary CTAs ("Get Started," "Launch Studio"). Button-primary-hover transitions to primary-fixed-dim (#0d8c1f) over 200ms, providing clear feedback without introducing a new color. Button-secondary uses surface-container-high background with a 1px outline-variant border, maintaining visual hierarchy while offering an alternative action path. Button-ghost has a transparent background with primary text color, used for tertiary actions like "Watch Video" or "Learn More." All buttons use label-md typography (14px, 600 weight) and include a 200ms ease-out trans

Do's and Don'ts

Do use primary (#11f250) exclusively for CTAs, active states, and brand-critical interactive elements—never use it for backgrounds or large surface areas. Do apply md spacing (24px) as the default gutter between sections and card padding to maintain visual rhythm and breathing room. Do use Aspekta for all display and headline levels (64px–36px) to establish editorial confidence; reserve Inter for body and UI text. Do transition all interactive elements over 200ms with ease-out timing to create responsive, predictable feedback. Do use the full 6.25rem border-radius on primary buttons to maximize visual distinction and signal primary action intent. Do layer surfaces using the surface-container stack (lowest → highest) to create subtle depth without introducing new colors.

Поиск осуществляется по кличке питомца. В строке указана вся базовая информация о профиле пациента. Редактирование доступно по клику на троеточие в правом углу строки.
~~Переход в медкарту по клику на кличку пациента внутри карточки.~~Don't

Don't use primary (#11f250) for body text, backgrounds, or non-interactive elements—it must remain reserved for actions and focus states. Don't introduce shadows deeper than lg elevation (0 8px 24px rgba(0, 0, 0, 0.12)) or the interface will feel heavy and disconnected. Don't mix Aspekta and Inter at the same size level; use Aspekta for headlines (48px+) and Inter for everything else to maintain clear hierarchy. Don't use border-radius smaller than sm (0.5rem) on interactive elements or they will feel cramped and inaccessible on touch devices. Don't apply more than one transition property per element; use transition: all 200ms ease-out to keep animations predictable and performant. Don't use secondary (#1378d1) or tertiary (#525252) colors as primary accents—they are supporting roles only; primary (#11f250) is the brand signature.