Fragment

Overview

Fragment is a blockchain-powered auction marketplace that transforms the trading of digital assets—Telegram usernames, numbers, gifts, and premium features—into a secure, transparent ecosystem. The platform serves crypto-native users and Telegram communities seeking to own and monetize their digital identity. The aesthetic is "Technical Minimalism with Depth": a dark, high-contrast interface (rgb(17, 20, 23) background with rgb(255, 255, 255) text) punctuated by a vivid cyan-blue accent (rgb(36, 139, 218)) that signals interactivity and trust. The UI evokes precision and clarity—every element is purposeful, every interaction is immediate. Users feel they are engaging with a professional, institutional-grade platform.

Fragment's voice is direct, data-driven, and confident without being aggressive. Copy emphasizes ownership ("Secure your name"), transparency ("1+ billion users"), and agency ("assign it as a link"). The brand avoids hype; instead, it grounds users in concrete value propositions. Example sentence in Fragment's voice: "Your username is live on-chain—bid now, own forever."

Colors

Fragment's color system is anchored in a sophisticated dark palette that maximizes contrast and reduces eye strain during extended trading sessions. The primary accent, rgb(36, 139, 218) / #248bda, is deployed on all call-to-action buttons ("Connect TON", "Connect Telegram"), active navigation states, and interactive focus rings. This blue is neither pure cyan nor navy—it sits at the intersection of trust (banking blue) and energy (tech blue), making it ideal for a blockchain marketplace. The surface stack ranges from rgb(17, 20, 23) (#111417, the base background) through rgb(42, 49, 57) (#2a3139, the highest container), creating a 6-level hierarchy that supports layered UI without introducing visual chaos. Text on surface is rgb(135, 148, 161) (#8794a1), a muted blue-gray that is readable

Typography

Fragment's type system is built on Roboto, a geometric sans-serif that conveys both precision and approachability. The hierarchy spans six levels: Display (56px, 700 weight) for hero headlines; Headline-lg (32px, 700) for section titles; Headline-md (28px, 700) for subsections; Title-lg (20px, 600) for card headers; Body-lg (16px, 400) for primary content; Body-md (14px, 400) for secondary content; Label-md (15px, 700) for button text and interactive labels; and Label-sm (12px, 500) for badges and metadata. Letter-spacing is tight (−0.02em on display, 0.01em on labels) to reinforce the technical aesthetic. Line-height is generous (1.5x to 1.75x) to maintain readability on dark backgrounds. All interactive text (buttons, links) uses Label-md with 700 weight and 0.01em tracking, creating vis

Layout

Fragment uses a 12-column fluid grid with a max-width of 1280px, centering content on desktop and stacking on mobile (breakpoint: 440px). The page rhythm is driven by a 24px gutter (md spacing) between major sections, with 40px (lg spacing) used for hero-to-content separation. The hero section (h1 + intro copy + search form) occupies the full viewport height on desktop, anchoring the user's attention before scrolling reveals the auction table. The search input uses 48px height (matching button height for visual harmony) with 12px padding and a 8px border-radius, creating a soft-technical appearance. The auction table below uses 16px row padding with 1px borders at #3f4854, allowing rows to breathe without excessive whitespace. Container max-width is enforced at 1280px to prevent line-lengt

Elevation & Depth

Fragment eschews traditional drop shadows in favor of a flat, layered approach that relies on color and border definition. The elevation system uses three levels: Level 1 (Base) is the background at rgb(17, 20, 23) with no shadow. Level 2 (Standard Card) applies a 1px border at rgba(63, 72, 84, 1) and a subtle shadow (0 4px 16px rgba(0, 0, 0, 0.08)) to separate cards from the background. Level 3 (Modal/Overlay) uses a stronger shadow (0 16px 64px rgba(0, 0, 0, 0.16)) with a 1px border and a semi-transparent backdrop (rgba(33, 42, 51, 0.9)) to create modal depth. The header uses a 10px blur bac

Shapes

Fragment's shape philosophy is "Architectural Precision"—rounded corners are used sparingly and purposefully, never decoratively. Buttons use 8px border-radius (1rem in rem units), a subtle rounding that softens the technical aesthetic without introducing organic curves. Input fields and dropdowns use 6px border-radius (0.75rem), creating a slightly sharper appearance that signals data entry. Cards and modals use 8px border-radius for consistency with buttons. The search input in the hero uses 8px border-radius with a 12px padding, creating a comfortable touch target (48px height) that feels b

Components

Action Elements Buttons are the primary interaction mechanism. The primary button uses rgb(36, 139, 218) background, white text (rgb(255, 255, 255)), 15px font-size, 700 weight, 14px vertical padding, 20px horizontal padding, and 8px border-radius. On hover, the background shifts to rgb(32, 124, 194) (#207cc2, a 5% darker shade) with a 0.2s transition. On disabled state, the background becomes rgb(166, 216, 255) (#a6d8ff, a 40% lighter shade) with 0.6 opacity and cursor: not-allowed. The secondary button mirrors the primary but uses surface-container background (rgb(21, 27, 34)) with a 1px border at outline-variant (rgb(63, 72, 84)). Focus state on both buttons applies a 2px outline at rgba(36, 139, 218, 0.3) with a 2px offset, visible at 2px auto per Material 3 spec.

Containers &

Do's and Don'ts

**Do**

• Do use the primary blue (#248bda) exclusively for CTAs and active states—never use it for passive text or backgrounds.
• Do maintain the 24px gutter between major sections and 12px between minor elements to preserve breathing room.
• Do apply the 0.2s ease-in-out transition to all state changes (hover, focus, active) to signal interactivity smoothly.
• Do use Roboto 700 weight for all interactive labels (buttons, links) and 400 weight for body copy to create clear hierarchy.
• Do enforce the 1px border at #3f4854 on all cards and containers to define edges without harsh shadows.
• Do use the surface-container stack (6 levels) to create depth—never skip levels or introduce arbitrary grays.

**Don't**

• Don't use shadows heavier than 0 16px 64px rgba(0, 0, 0, 0.16)—Fragment favors borders and color over depth.
• Don't apply border-radius greater than 8px on buttons or inputs—the aesthetic is technical, not playful.
• Don't use the primary blue on non-interactive elements or backgrounds—it must remain reserved for CTAs and focus states.
• Don't introduce new colors outside the defined palette—every color must come from the surface stack, role colors, or error states.
• Don't use transitions longer than 0.2s on interactive elements—Fragment prioritizes responsiveness and snappiness.
• Don't mix font families—Roboto is the sole typeface; -apple-system and system-ui are fallbacks only.