Nucast

Overview

Nucast is a Web3 infrastructure platform architecting the future of digital intellectual property in an AI-native world. The brand embodies a "Techno-Minimalist" aesthetic: clean, purposeful, and unapologetically bold. The visual language combines a vibrant violet primary (#8213e5) with a pure white canvas, creating stark contrast that conveys clarity, precision, and forward momentum. The design system prioritizes legibility and directness—no decorative flourishes, no soft gradients, only intentional color and typography. The emotional response is one of confidence: this is a platform built by engineers for creators, where complexity is abstracted into elegant simplicity. Voice: direct, technical but accessible, never corporate. Example sentence: "Your IP, authenticated on-chain, ready for the AI economy."

Colors

The color system is built on a high-contrast, accent-driven philosophy. Primary (#8213e5) is the signature violet used exclusively for CTAs, active states, and brand moments—it appears on the hero "Get in touch" button and all interactive elements that demand user attention. Secondary (#6d0fbf) and Tertiary (#3b056b) provide depth within the purple family for hover states and elevated surfaces. The surface stack is anchored in pure white (#ffffff) for maximum legibility, with a light gray (#f0f0f0) for subtle container differentiation. On-surface text is pure black (#000000) for 100% contrast; on-surface-variant (#616264) is used for secondary labels and navigation. Error states use a standard red (#d32f2f). All interactive elements use a 1px solid border at rgba(77,0,255,0.05) when in sec

Typography

The type system pairs Manrope (humanist sans-serif, weights 200–800) for body and display text with overusedGrotesk (geometric sans, weights 300–700) for UI labels and navigation. This pairing creates a clear hierarchy: Manrope conveys warmth and approachability in long-form content (headlines, body copy), while overusedGrotesk delivers precision and technical authority in interactive elements (buttons, labels, nav). Display text (56px, 700 weight, -0.02em letter-spacing) is reserved for hero headlines; headline-lg (42px, 600 weight) for section titles; body-lg (18px, 400 weight) for descriptive copy. All label elements use overusedGrotesk at 14px (600 weight, 0.01em letter-spacing) for buttons and 12px (600 weight, 0.05em letter-spacing) for badges. Apply text-shadow: 0 2px 4px rgba(0,0,0

Layout

The layout uses a 12-column grid with a max-width of 1560px, maintaining a fluid responsive behavior on mobile (100vw with 16px padding) and fixed width on desktop. The hero section spans full-width with a 24px gutter on mobile and 6% horizontal padding on desktop, creating breathing room around the headline and CTA cluster. Section separation uses lg spacing (40px) between major content blocks; internal card spacing uses md (24px). The container philosophy is "edge-to-edge on mobile, centered on desktop"—the fixed header (height: auto, padding: 16px) spans the full viewport width and uses a light gray background (#f0f0f0) to anchor navigation. White-space is aggressive: no element is cramped. The grid maintains 12 columns at all breakpoints, with cards and content blocks respecting column

Elevation & Depth

Depth is achieved through layering and subtle shadows rather than blur or glassmorphism. The elevation system uses three levels: Level 1 (Base) is the white surface with no shadow; Level 2 (Card/Container) adds a 1px border at #d0d0d0 and a 0 3px 8px rgba(0,0,0,0.15) shadow on hover; Level 3 (Modal/Overlay) uses the same shadow but with a semi-transparent dark backdrop (rgba(0,0,0,0.5)) and a 1px border at rgba(255,255,255,0.2) to create separation. Interactive elements (buttons, inputs) use an inset shadow of inset 0px -2px 1px 0px rgba(255,255,255,0.4) to create a subtle beveled effect. On h

Shapes

The shape philosophy is "Architectural Precision"—all border-radius values are 0px by default, creating sharp, rectilinear forms that convey technical authority and clarity. This is intentional: the brand rejects soft, rounded aesthetics in favor of clean edges. Exceptions are rare: badges use full (9999px) for pill-shaped containers, and only when semantic meaning demands it (e.g., a status indicator). Buttons, cards, inputs, and nav elements all use 0px radius. This sharpness pairs with the vibrant violet accent to create visual tension—the softness of the color is balanced by the hardness o

Components

Action Elements Buttons use a 44px height with 12px vertical and 24px horizontal padding. Primary buttons (#8213e5 background, white text) use overusedGrotesk at 14px, 600 weight. All buttons have an inset shadow (inset 0px -2px 1px 0px rgba(255,255,255,0.4)) for subtle depth. On hover, primary buttons transition to #6d0fbf (150ms ease-out) and gain a 0 4px 15px rgba(130,19,229,0.1) outer shadow. Secondary buttons have a white background, #8213e5 text, and a 1px border at rgba(77,0,255,0.05); on hover, the border becomes solid #8213e5 and the background shifts to #e9ecef. Both button types have no border-radius (0px).

Containers & Surfaces Cards use a white background (#ffffff) with a 1px border at #d0d0d0 and 24px padding. On hover, the background shifts to #f7f7f7 and a 0 3px 8p

Do's and Don'ts

**Do**

• Do use the violet primary (#8213e5) exclusively for CTAs, active states, and brand-critical moments—never dilute it with secondary uses.
• Do maintain sharp 0px border-radius on all UI elements (buttons, cards, inputs) to preserve the architectural precision aesthetic.
• Do pair Manrope (body/display) with overusedGrotesk (labels/nav) consistently—never mix typefaces within a single component.
• Do apply inset shadows (inset 0px -2px 1px 0px rgba(255,255,255,0.4)) to all buttons for subtle beveled depth.
• Do use pure black (#000000) for primary text on white backgrounds to maximize contrast and legibility.

**Don't**

• Don't use rounded corners (border-radius > 0px) on buttons, cards, or inputs—the brand identity depends on sharp, rectilinear forms.
• Don't apply drop shadows to elements on the base white surface; use borders and inset shadows instead.
• Don't use the secondary or tertiary colors (#6d0fbf, #3b056b) for primary CTAs—reserve the bright violet (#8213e5) for all user-facing actions.
• Don't mix Manrope and overusedGrotesk within the same text element; choose one typeface per component.
• Don't use blur filters, backdrop-filter, or glassmorphism effects—the brand aesthetic is flat, precise, and shadow-based.