Huly

Overview

Huly is a technical-first, open-source platform designed for distributed engineering teams who demand both power and clarity. The design system embodies "Electric Minimalism"—a dark-mode aesthetic anchored by a near-black canvas (#090a0c) that recedes into the background, allowing electric blue accents (#3b82f6) and warm orange highlights (#ff8964) to command attention on critical interactions. The brand personality is direct, precise, and unadorned: every pixel serves function. The UI speaks in the language of developers and product managers—no flourish, no apology, just clarity. Voice example: "Sync your GitHub repos. Track issues. Collaborate in real-time. No context switching."

Colors

The color system operates on a principle of maximum contrast and intentional restraint. Primary (#3b82f6, electric blue) is reserved exclusively for interactive elements—buttons, links, focus states, and the hero gradient accent. It appears sparingly but with high impact, often paired with a subtle glow (box-shadow: 0 0 20px rgba(59, 130, 246, 0.3)) to signal interactivity in the dark environment. Secondary (#ff8964, warm orange) is used for alerts, badges, and secondary CTAs, creating visual hierarchy without competing for attention. The surface stack is deeply dark: surface (#090a0c) is the page background, surface-container (#171a1f) lifts cards and panels, and surface-container-highest (#2f3238) is reserved for modals and elevated surfaces. On-surface (#f7f7f7) provides text contrast a

Typography

The type system uses Inter as the primary typeface, chosen for its geometric clarity and excellent screen rendering at all weights. Display (84px, 600 weight, -0.04em letter-spacing) is reserved for hero headlines and commands attention through scale and negative space. Headline-lg (40px, 600 weight) and headline-md (28px, 600 weight) structure page sections and card titles. Body-lg (18px, 400 weight, 28px line-height) and body-md (16px, 400 weight, 24px line-height) handle descriptive copy and UI labels. Label-md (14px, 600 weight) and label-sm (12px, 700 weight, 0.05em letter-spacing) are used for buttons, badges, and form labels. All headlines use negative letter-spacing (-0.02em to -0.04em) to tighten the visual weight and reinforce the technical aesthetic. Body text maintains 1.5x lin

Layout

The layout uses a 12-column grid with a max-width of 1280px, centered on the viewport. The hero section spans full-width with a dynamic gradient background (blue to purple to orange) that creates visual energy without competing with content. Gutter spacing is 24px on desktop, collapsing to 12px on mobile. Section separation uses lg spacing (40px) for breathing room between major content blocks. Cards and containers use md spacing (24px) for internal padding, with sm spacing (12px) between nested elements. The design favors generous whitespace—no cramping of elements. Container-max-width of 1280px ensures readability on ultra-wide displays while maintaining focus. Fluid typography scales proportionally on smaller viewports, with display text reducing from 84px to 48px on mobile. The grid is

Elevation & Depth

Depth is conveyed through layering and subtle shadows rather than dramatic drop-shadows. Level 1 (Base): the page background (#090a0c) with optional subtle grain texture. Level 2 (Standard Card): surface-container (#171a1f) with a 1px border at outline-variant (#3d3f42) and box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08). Level 3 (Elevated/Modal): surface-container-highest (#2f3238) with a 1px border at outline (#68686a) and box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12). Interactive elements (buttons, links) use a glow effect: box-shadow: 0 0 20px rgba(59, 130, 246, 0.3) on hover, intensifying to 0 0

Shapes

The shape philosophy is "Technical Precision with Approachability." Buttons use full radius (9999px) to signal primary actions and create a friendly, modern feel despite the dark aesthetic. Cards and containers use lg radius (1rem / 16px) for a softer, less rigid appearance. Input fields and secondary UI elements use DEFAULT radius (0.5rem / 8px) for a more technical, grid-aligned feel. Modals and elevated surfaces use xl radius (1.5rem / 24px) to create visual separation from the base layer. The rationale: full-radius buttons stand out as the most important interactive elements, while smaller

Components

Action Elements Buttons are the primary interaction pattern. Button-primary uses primary (#3b82f6) with full radius (9999px), padding 12px 64px, and a glow shadow (0 0 20px rgba(59, 130, 246, 0.3)). On hover, the background shifts to #60a5fa and the glow intensifies (0 0 32px rgba(59, 130, 246, 0.5)) with a 200ms transition. On active, the background darkens to #1e40af and the glow reduces (0 0 12px rgba(59, 130, 246, 0.2)). Button-secondary uses a transparent background with a 1px border at outline (#68686a), text color primary (#3b82f6), and lg radius (1rem). On hover, the background becomes surface-container-high (#24272d) and the border shifts to primary. All buttons use label-md typography (14px, 600 weight) and a minimum height of 48px for touch targets.

Containers & Surface

Do's and Don'ts

**Do**

• Do use primary (#3b82f6) exclusively for interactive elements—buttons, links, focus states, and the hero gradient. Never use it for backgrounds or body text.
• Do maintain the dark surface stack (#090a0c → #171a1f → #2f3238) to create depth through layering, not color shifts.
• Do apply glow shadows (0 0 20px rgba(59, 130, 246, 0.3)) to interactive elements on hover to signal interactivity in the dark environment.
• Do use full radius (9999px) on primary buttons and lg radius (1rem) on cards to balance technical precision with approachability.
• Do pair small labels (label-sm) with text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) when layered over gradients to maintain readability.

**Don't**

• Don't use mid-tone grays for depth; instead, layer the surface stack (surface-container-low, surface-container, surface-container-high) to create visual hierarchy.
• Don't apply primary color to non-interactive elements like badges, dividers, or background fills—reserve it for CTAs and focus states only.
• Don't use sharp corners (0px radius) on any interactive element; the minimum is DEFAULT radius (0.5rem / 8px).
• Don't exceed 200ms transition duration on hover states; keep interactions snappy and responsive.
• Don't use secondary (#ff8964) for primary CTAs; it's reserved for alerts, badges, and secondary actions to maintain visual hierarchy.