Unlockify Stream

Overview

Unlockify Stream is a functional minimalist design system built for a Telegram-to-browser video streaming platform. The aesthetic is rooted in **Warm Brutalism**—a deliberate rejection of glossy softness in favor of honest materials, clear typography, and purposeful whitespace. The brand serves creators and viewers who value simplicity over complexity: send a video to a bot, receive a public link, watch in any browser. The UI evokes calm competence, never fussy. The color palette draws from natural materials—cream paper (#f7f2ec), warm ink (#191c21), and a restrained coral accent (#cc8066)—creating an environment that feels like a well-designed print publication translated to screen.

Voice and personality: precise, instructional, never breathless. The brand speaks in short, declarative sentences. Example: "Send your video to TgStreamBot. Get a public link. Anyone can watch." Vocabulary is concrete—"bot," "link," "browser," "stream"—avoiding marketing abstractions. The tone is respectful of the user's time and intelligence, treating technical workflows as natural and approachable.

Colors

The color system balances a warm, paper-like foundation with sharp, functional accents. **Primary (#191c21)** is the brand's signature ink—used for all interactive elements (buttons, links, active states) and primary text. It is not pure black; the slight warmth (a touch of brown) prevents harshness and aligns with the paper aesthetic. **On-Primary (#ffffff)** provides maximum contrast for text and icons on dark backgrounds. **Secondary (#cc8066)** is a warm coral used sparingly for emphasis, status indicators, and secondary CTAs; it appears in cookie consent buttons and accent underlines. **Tertiary (#0893d4)** is a functional blue reserved for links, focus states, and data visualization. The **surface stack** moves from cream (#f7f2ec) at the base through progressively darker neutrals (#

Typography

The type system pairs **Outfit** (a geometric, friendly sans-serif) for all UI text with **Space Mono** (a monospaced slab serif) for labels, eyebrows, and technical annotations. Display (80px, 500 weight) anchors hero sections with confident scale; headline-lg (40px, 600 weight) leads feature sections; body-md (16px, 400 weight) is the default reading size. The system uses weight contrast rather than size alone: 600-weight labels pop against 400-weight body text at the same size. Eyebrows and labels use Space Mono at 11px with 0.22em letter-spacing, creating a technical, printed aesthetic that signals structure. Apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) to small labels (label-sm) when placed over busy backgrounds or image overlays to ensure legibility. Line-height is generous (1.5x

Layout

The layout uses a **12-column fluid grid** with a max-width of 1180px, centered with auto margins. The spacing scale is semantic: **md (24px)** is the default gutter between sections and card padding; **lg (40px)** separates major sections (hero, features, benefits); **xl (64px)** is reserved for full-screen section breaks. Container padding on mobile is md (24px), scaling to lg (40px) on tablet and desktop. The hero section uses a two-column layout (60% copy, 40% player mockup on desktop; stacked on mobile) with asymmetric breathing room. Feature cards are arranged in a bento grid with variable sizes (main card 2×2, wide card 2×1, small cards 1×1) to create visual rhythm without monotony. Whitespace is treated as a design material: sections have py-24 to py-48 (192px–384px) of vertical br

Elevation & Depth

Depth is achieved through **layered surfaces and subtle shadows**, not through dramatic darkness. The system defines three elevation levels: **Level 1 (Base)** is the cream background (#f7f2ec) with no shadow. **Level 2 (Standard Cards)** uses surface-container (#f0ebe5) with box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a soft lift. **Level 3 (Modals & Elevated Surfaces)** uses primary-container (#242930) or surface-container-highest (#e3ddd7) with box-shadow: 0 18px 50px rgba(44, 37, 33, 0.07), suggesting atmospheric distance. Dark cards (primary-container) have an inset highlight: ins

Shapes

The shape philosophy is **Functional Warmth**—rounded corners that feel approachable without sacrificing clarity. Buttons use **full (999px)** border-radius for a pill shape, signaling friendliness and clickability. Cards use **lg (18px)** for standard containers and **xl (24px)** for featured/hero cards, creating a subtle hierarchy. Input fields use **DEFAULT (14px)** for a balanced, professional appearance. The marquee and scrolling sections use **md (16px)** to feel slightly more technical. The play button in the hero mockup uses **full** to emphasize its interactive nature. This graduated

Components

**Action Elements:** Buttons use a two-tier system. Primary buttons (button-primary) have backgroundColor: {colors.primary}, textColor: {colors.on-primary}, padding: 13.6px 20.8px, height: 44px, rounded: {rounded.full}, with font-weight: 600. On hover, they transition to button-primary-hover with backgroundColor: {colors.primary-container} and textColor: {colors.on-primary-container} over 150ms cubic-bezier(0.4, 0, 0.2, 1). Secondary buttons (button-secondary) are transparent with a 1px border in {colors.outline}, textColor: {colors.primary}, and the same padding/height. On hover, they fill with backgroundColor: {colors.surface-container-high}. Both button types use label-md typography (14px, 600 weight) and include a 2px focus ring at {colors.tertiary} with 2px offset.

**Containers & Sur

Do's and Don'ts

**Do**

• Do use Space Mono for eyebrows, labels, and technical annotations—it signals structure and printedness.
• Do apply the full (999px) border-radius exclusively to buttons and interactive pills; never use it on cards or containers.
• Do maintain the cream background (#f7f2ec) as the default canvas; use surface-container variants only for layered, elevated content.
• Do pair primary (#191c21) text with on-surface-variant (#596273) for secondary information, creating clear hierarchy without color shifts.
• Do use the coral secondary (#cc8066) sparingly—only for emphasis, status, or secondary CTAs; overuse dilutes its impact.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to standard cards and 0 18px 50px rgba(44, 37, 33, 0.07) to modals for consistent depth.
• Do use lg (40px) spacing to separate major sections; it creates breathing room that reinforces the calm, uncluttered aesthetic.

**Don't**

• Don't use pure black (#000) or pure white (#fff) for text or backgrounds; always use the defined surface and on-surface tokens to maintain warmth.
• Don't apply rounded corners smaller than sm (10px) to any interactive element; it reads as harsh and technical.
• Don't mix Outfit and Space Mono weights arbitrarily; use Outfit 600 for UI labels and Space Mono 400 for technical annotations only.
• Don't layer more than three elevation levels (base, standard card, modal); additional layers create visual confusion.
• Don't use the tertiary blue (#0893d4) for primary CTAs or brand emphasis; it is reserved for links, focus states, and data visualization.
• Don't apply text-shadow to body text; use it only on small labels over busy backgrounds (label-sm at 11px).
• Don't reduce padding below sm (12px) on cards or containers; the spacious aesthetic depends on generous internal breathing room.