Huly
Northern Lights at Midnight Observatory - the protagonist is a vertical beam of purple fading into coral, and each quiet section below it borrows the same two-tone story told in a more subdued tone
Huly evokes the ambiance of a cosmic workspace: a near-black canvas with a single violet-amber glow cutting through the main element, and below it, a more subdued grid for increased productivity. The system operates within a narrow color range—one bright blue and one coral do all the branding work against layered graphite surfaces, so the dark mode never feels neutral. Typography is Inter-style for everything functional, with a custom font (Esbuild) reserved for key points, with a pitch of 80–84px and aggressive negative letter spacing. Components are capsule-shaped: 9999px radii on controls, 12px on cards, minimal shadow, and glowing gradient lines as the main decoration. The page alternates between full-page dark areas and calm light sections, so any new screen should decide on the mode before choosing colors.
The full-width homepage features a vertical beam of the northern lights and a left-aligned headline, along with a product screenshot positioned at the bottom right. Below the homepage is a content area of maximum width, 1200px, alternating dark and light stripes. Each section is a single vertical block: a header plus a 3- or 4-column grid of cards separated by 96px gaps. The "MetaBrain" section breaks the grid with a centered headline and a mosaic of cards of varying sizes (a large main card plus smaller supporting cards). The page is content-heavy, following SaaS standards, but uses alternating dark and light stripes to give each section room to breathe. The navigation is a single transparent top bar that fades to opaque as you scroll.
The main element is a pure aurora gradient, free of photographs. All illustrations are actual screenshots of the product's UI (Kanban in dark mode, inbox, calendar), framed in card frames that serve both as evidence and decoration. No lifestyle photos, no stock images, no 3D renders. The only visual element not related to the UI is a warm, radial sunburst glow at the base of the aurora, rendered as a CSS gradient. Icons are monochrome line icons in #95979 or white, never multicolor. The system treats its own dark UI as the main element—the product is the photographs.
Palette
Brand
- Electric Iris
#5683da— The main background, active navigation indicator, and striking Northern Lights accent—a vibrant violet-blue color on a jet-black background—creates an impression of engagement rather than corporate activity. - Ember Pulse
#ff8964— A secondary accent, a warm northern lights zone, a notification point, and an illustration highlight—an amber hue that breaks the sobriety of blue and adds warmth to the beam.
Neutral
- Obsidian Canvas
#303236— The page background, the dominant surface, is an almost black color with a slight hint of warmth, the standard environment for all content. - Void
#090a0c— The deepest surface layer for gradients on the main screen, modal backgrounds, and frames that should blend into the canvas. - Charcoal Card
#111111— Raised surfaces made of cardboard and panels, positioned one step above the canvas. - Slate Edge
#4a4b50— Subtle borders and dividers on dark surfaces - Iron Veil
#6b6c6d— Dimmed background for tags, list item fills, and disabled fills. - Smoke
#95979e— Icon outlines, additional text, and inactive controls are the primary working element in medium gray.
Typography
from 11 to 80px · 8 steps
- Inter — replacement: DM Sans · outlines 300, 400, 500, 600, 700 · All functional text in the user interface—body text, navigation, buttons, list items, labels, and small headings—is used with a font weight of 500–600 for emphasis, 400 for body text, and 300 sparingly for unobtrusive metadata.
- Esbuild — replacement: Sora · outlines 400, 500, 600 · Display-only: splash titles, section headings, and MetaBrain article titles. The condensed geometry and tight letter spacing create the impression that 84px is more suited to editorial work than SaaS projects. Never use below 28px.
Intervals and form
| Purpose | Meaning |
|---|---|
| Density | spacious |
| Basic step | 12px |
| Button radius | 9999px |
| Card radius | 12px |
| Shadows | soft shadows |
| Between sections | 96px |
| Page width | 1200px |
AI will build your website in Huly style and fill it
- Fill with products and posts via the link - Instagram, TikTok, Facebook.
- Transfer content from your old site—just specify the address.
- Modern design on the best engine: React ( Next.js) with server rendering and SEO optimization out of the box.
- Fully automated SEO optimization for search results and neural network recommendations.
Similar styles
- monday — White workshop with pastel stickers
- Slack — The stage is eggplant-colored with white spotlights. A deep plum hue dominates the dark areas, while the off-white canvas allows the large, avant-garde titles to breathe freely.
- Base44 — Sunlit notebook with lime marker
- Supahub — Soft daylight on a purple ridge. A mostly white, airy canvas illuminated by a single bright purple sun, with decorative gradient spheres spilling color into the negative space and generous rounded geometry lending each surface a pleasant, tangible heaviness.
- Raycast — Midnight Command Center, Coral Neon
- Dimension — a dusk-lit workstation with frosted glass panels
- Wiza — A mineral exploration observatory at dusk, shrouded in lavender mist.
- Paste — An amber lantern on white marble—the brand's warm gradient logo hovers in the vast white space, like the only illuminated window in a snow-covered building.
- Reworkd — The soft daylight on the product diagram is the only color that speaks for itself, it's the action button and the gradient headline above it.
- Reflect Notes — Starry violet space is a dark observatory where notes float like constellations against a backdrop of almost black indigo emptiness.
- Ameba — The control room at midnight – an electric blue pulse inside frosted glass panels
- Todoist — A sunlit workspace with a paper diary – a warm cream desk, ink notes, one red pen