Jut-su.net

Overview

Jut-su.net is a premium anime streaming platform designed for Russian-speaking audiences, delivering high-quality content with professional dubbing and subtitles. The design system employs a "Dark-Neon Minimalism" aesthetic—a high-contrast dark canvas (rgb(12, 12, 12)) punctuated by a vivid magenta accent (rgb(255, 48, 172)) that commands attention on call-to-action elements, navigation highlights, and interactive states. The emotional response is one of focused energy: the dark background reduces cognitive load while the neon magenta creates urgency and excitement around content discovery. The interface feels premium yet accessible, balancing entertainment with functional clarity.

The brand voice is direct, enthusiastic, and culturally attuned to anime fandom. Vocabulary emphasizes quality ("лучшее качество" — best quality), freedom ("совершенно бесплатно" — completely free), and community ("наших пользователей" — our users). The tone avoids corporate jargon; instead, it speaks in the language of passionate viewers. Example sentence in brand voice: "Смотри топовые сериалы в лучшей озвучке — всё, что тебе нужно, в одном месте." (Watch top series in the best dubbing — everything you need in one place.)

Colors

The color system is built on a dark-first philosophy with strategic neon accents. **Primary (rgb(255, 48, 172) / #ff30ac)** is the signature magenta used exclusively on primary CTAs ("Войти", "Посмотреть"), active navigation states, and focus indicators. This high-saturation accent creates visual hierarchy without relying on brightness shifts. **Secondary (rgb(135, 191, 247) / #87bff7)** is a cool blue reserved for secondary interactions and informational elements, providing visual contrast to the warm magenta. **Tertiary (rgb(96, 199, 100) / #60c764)** is a vibrant green used for success states, positive feedback, and status indicators. **Error (rgb(235, 77, 75) / #eb4d4b)** is a muted red for destructive actions and warnings, preventing alarm fatigue in a dark interface.

The surface sta

Typography

Montserrat is the sole typeface, chosen for its geometric clarity and strong personality in both light (400, 500) and bold (600, 700, 800) weights. The type hierarchy maps directly to content importance: **Display (60px, 700)** anchors hero sections and major announcements; **Headline-lg (40px, 700)** titles key sections; **Headline-md (28px, 700)** subtitles and card headers; **Body-lg (18px, 400)** long-form descriptions; **Body-md (16px, 500)** standard UI copy; **Label-md (14px, 600)** buttons and interactive labels; **Label-sm (12px, 500)** metadata and secondary info. Letter-spacing is minimal (-0.04em on display, -0.02em on headlines) to maintain the geometric weight of Montserrat. On small labels over busy anime artwork backgrounds, apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6) t

Layout

The layout uses a 12-column grid with a max-width of 1280px, maintaining consistent horizontal rhythm across all screen sizes. The gutter is 24px, creating breathing room between sections without excessive whitespace. The header spans full-width with 24px padding (md spacing), anchoring navigation and search at the top. Content sections use lg spacing (40px) for vertical separation, creating a clear visual rhythm that guides users through anime discovery. The hero slider occupies the full container width with a 35px gap between grid items, allowing featured anime to command attention. Inputs and buttons maintain a consistent 50px height with 25px horizontal padding, creating a comfortable touch target (minimum 44px) while preserving visual proportion. Container max-widths step down for mob

Elevation & Depth

Depth is conveyed through layered shadows and background color shifts rather than bright highlights. **Level 1 (Base)**: rgb(12, 12, 12) with no shadow—the canvas. **Level 2 (Standard Cards/Inputs)**: rgb(30, 30, 30) with box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15)—subtle lift for interactive elements. **Level 3 (Modals/Elevated Surfaces)**: rgb(54, 54, 54) with box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3)—pronounced separation for focus. Hover states intensify shadows to 0 16px 40px rgba(0, 0, 0, 0.3), signaling interactivity. Inset shadows (inset 0 1px 4px rgba(0, 0, 0, 0.1)) are applied to pres

Shapes

The shape system follows a "Soft-Technical" philosophy: rounded corners are generous enough to feel modern and approachable, yet precise enough to maintain geometric clarity. **Buttons and inputs** use 25px radius (rounded.lg), creating a pill-like form that feels friendly and clickable. **Cards and containers** use 10px radius (rounded.DEFAULT), balancing softness with structure. **Header and navigation** use 15px radius (rounded.md), sitting between buttons and cards to create visual hierarchy. **Badges and small UI elements** use 50% radius (rounded.xl) for perfect circles, drawing attentio

Components

Action Elements **Button-Primary** is the hero CTA, using the magenta accent (rgb(255, 48, 172)) with white text, 50px height, 30px horizontal padding, and 25px border-radius. On hover, the background shifts to the purple container (rgb(200, 130, 255)) and an inset shadow (inset 0 -5px rgba(0, 0, 0, 0.35)) creates tactile depression. Transition timing is 0.3s for all properties. **Button-Secondary** uses the elevated surface color (rgb(54, 54, 54)) with white text, maintaining the same dimensions but without the colored glow. On hover, it brightens to rgb(58, 58, 58) and gains a subtle inset shadow. **Button-Ghost** has transparent background and white text, used for tertiary actions like "Random" or "More"; on hover, it gains the secondary surface background and the magenta text color

Do's and Don'ts

**Do**

• Do use the magenta primary (rgb(255, 48, 172)) exclusively on CTAs and active states—never on passive backgrounds or secondary text.
• Do maintain 50px minimum height for all interactive elements (buttons, inputs, selects) to ensure comfortable touch targets on mobile.
• Do apply 0.3s transitions on all interactive state changes (hover, focus, active) to provide smooth, predictable feedback.
• Do layer shadows progressively: Level 1 (no shadow) → Level 2 (0 3px 8px) → Level 3 (0 12px 40px) to create clear depth hierarchy.
• Do use Montserrat weights sparingly: 400 for body, 500 for secondary labels, 600 for buttons, 700 for headings—never mix adjacent weights in the same component.

**Don't**

• Don't use the secondary blue (rgb(135, 191, 247)) or tertiary green (rgb(96, 199, 100)) as primary CTAs—reserve them for secondary actions and status indicators.
• Don't apply border-radius smaller than 6px (rounded.sm) on interactive elements; the platform's soft-technical aesthetic requires generous curves.
• Don't hardcode colors in component styles—always reference the color token system ({colors.primary}, {colors.surface-container}, etc.) to maintain consistency.
• Don't use text-shadow on body copy over light backgrounds; reserve it for small labels (label-sm) over busy anime artwork only.
• Don't exceed 0.3s transition timing on interactive states; faster feedback (0.2s) is acceptable for focus, but slower transitions feel sluggish and break the responsive feel.