21st

Overview

Studiova is a web design and digital agency template that presents itself as a confident, performance-focused studio. Its visual identity follows a Dark-Editorial Minimalism movement: a near-black canvas (#1f2a2e) carries full-bleed photography and oversized Manrope headlines, with one saturated acid-lime accent (#C1FF72) reserved for the moments that should drive action. The emotional response is assured and modern, closer to a contemporary studio portfolio than to a corporate services page.

The voice is direct, outcome-oriented and promotional without hype. Copy leads with verbs of result ("We create high-performing digital designs that elevate brands and enhance conversions") and uses short section labels numbered in sequence (01 Stats & facts, 02 Portfolio). Example sentence: "High quality web design solutions you can trust."

Colors

Primary (#C1FF72) is the signature accent: it fills the primary CTA ("Get This Template", "Sign Up" hover ring), the leaf-glyph highlights, the numbered section circles and the highlighted word in the hero tagline. Use it only for interactive or emphasised elements, never for body copy on white. On-primary (#1F2A2E) is the text colour placed on top of lime fills. Secondary (#626A6D) carries body and supporting copy on light sections, and tertiary (#198754) is reserved for success and status signalling, never decorative use.

The surface stack is inverted from typical dark UIs: the hero and header sit on #1F2A2E with white headings at 0.7 opacity for the supporting text, while content sections use #F4F8FA (surface-container-low) and #E4E5E6 (surface-container) for rules and dividers. Gradie

Typography

The type system is a single-family Manrope set. Display (128px / 700 / line-height 128px, line-height equal to size) is reserved for the hero wordmark and creates a tight, billboard-like rhythm. Headlines (48px / 700 / 57.6px) anchor each section and body copy steps down to 16px / 400 / 24px for comfortable reading. Labels use 14px / 600 for buttons and 12px / 600 with letter-spacing 0.05em for small uppercase-adjacent badges.

Apply font-weight 700 only to headlines and the display wordmark; keep body at 400 so the contrast between display and paragraph copy carries the hierarchy. Over the hero photograph, set supporting text to color rgba(255,255,255,0.7) to maintain legibility without a text-shadow.

Layout

Layout uses a fluid 12-column grid capped at a 1140px container-max with 30px gutters. Sections are separated by vertical padding that steps from py-5 (20px) on mobile to py-11 and py-12 on desktop, producing large breathing room between stats, portfolio and CTA blocks. The lg spacing (20px) is used for in-component stacks, xl (40px) for section separation, and 2xl (48px) for the gap above major CTAs. The hero is full-viewport (min-height 100vh) with content anchored to the bottom-left.

Elevation & Depth

Depth is conveyed almost entirely through colour blocking rather than shadow. Where a shadow is used it is minimal: 0 1px 3px rgba(0,0,0,0.15) on small circular icon buttons so they lift off photography. Focus and active states use a 0 0 0 0.25rem rgba(193,255,114,0.25) halo, which doubles as the lime focus ring. No layered glass, blur or elevated modal stacks are present.

Shapes

The shape language is soft-geometric: circles and pills dominate interactive affordances while cards and images use a larger 56px radius. Primary buttons use an 8px radius, a deliberate departure from pill buttons so the CTA reads as a rectangular action; secondary and icon controls are fully round (9999px) to signal secondary status. Cards and portfolio tiles use 56px, the largest radius in the system, which keeps large imagery feeling friendly.

Action Elements The primary button is 48px tall with 16px horizontal padding, 8px radius, lime fill and label-md text. On hover it shifts to pri

Do's and Don'ts

**Do**

• Reserve #C1FF72 for CTAs, numbered section markers and single-word emphasis only.
• Keep the hero on #1F2A2E with full-bleed photography and white Manrope display type at 128px.
• Use 56px radius for cards and portfolio imagery and 8px radius for rectangular primary buttons.
• Stagger AOS entrance animations in 100ms steps with 1000ms duration.

**Don't**

• Don't place lime text on white backgrounds; contrast fails and the accent loses meaning.
• Don't add gradients or glass blur; the system relies on flat colour blocks.
• Don't use shadows heavier than 0 1px 3px rgba(0,0,0,0.15) on any surface.
• Don't set display text below 48px; the hierarchy depends on the dramatic scale jump.