Opice Blum

Overview

Opice Blum is a pioneering digital law firm that redefines legal services through architectural minimalism—a design philosophy that strips away ornament to expose pure function and precision. The brand serves forward-thinking enterprises navigating digital transformation, data protection, and intellectual property in an increasingly complex regulatory landscape. The UI aesthetic combines stark black-and-white geometry with neon-bright lime-green accents (#c0ff3d), creating visual tension that conveys both authority and innovation. This contrast evokes a sense of clarity and decisiveness: the interface cuts through complexity like a legal argument cuts through ambiguity.

The voice is direct, measured, and intellectually rigorous—never breathless or casual. Opice Blum speaks in declarative sentences with active verbs and concrete nouns. Example: "Redefinindo os limites do possível" (Redefining the limits of the possible) captures the brand's tone: ambitious yet grounded, transformative yet precise. The vocabulary favors legal and technical terminology without jargon barriers; the brand educates rather than obscures.

Colors

The color system operates on a principle of maximum contrast and visual hierarchy. Primary (#c0ff3d) is a high-saturation neon lime used exclusively for call-to-action buttons, interactive states, and brand-critical accents. It commands attention against the white background (rgb(255, 255, 255)) and black text (rgb(28, 28, 28)), creating a 3-color palette that mirrors the legal profession's binary logic: black (authority, text), white (clarity, space), and neon green (action, urgency). Secondary (#b2dd2c) is a slightly desaturated variant of primary, used for hover states and secondary emphasis; it maintains the neon character while providing visual rest. Tertiary is pure black (#000000), deployed for dark-mode buttons and high-contrast text overlays. The outline color (#515151) is a mid-g

Typography

The type system is built on Inter, a geometric sans-serif that embodies the brand's architectural minimalism. The hierarchy spans from display (60px, weight 200, -0.02em letter-spacing) down to label-sm (12px, weight 500, 0.05em letter-spacing), with each level serving a distinct narrative function. Display and headline-lg use ultra-light weights (200–300) to create visual breathing room and convey sophistication; these are deployed on hero sections and major section titles. Body text defaults to weight 300 or 400 at 16–18px with 24–28px line-height, ensuring legibility on both desktop and mobile without sacrificing the brand's spare aesthetic. Labels and buttons use weight 500–600 with increased letter-spacing (0.01–0.05em) to add visual texture and draw the eye to interactive elements. O

Layout

The page rhythm follows a 12-column grid with a fixed container max-width of 1280px and responsive padding: 16px on mobile (md), 24px on tablet, and 80px on desktop (lg breakpoint at 1024px). This creates a fluid-to-fixed transition that maintains visual proportion across devices. White-space is treated as a design material: section separation uses lg spacing (40px) on mobile, scaling to 64px on desktop, creating visual breathing room that reinforces the minimalist aesthetic. The gutter (24px) is applied consistently between grid columns and card padding, ensuring rhythm coherence. Container padding (1rem / 24px on mobile, 1.5rem / 24px on tablet, 5rem / 80px on desktop) is defined via the .container class and applied to all major sections, preventing content from touching viewport edges.

Elevation & Depth

Depth is conveyed through a restrained shadow system that avoids the soft, diffuse shadows of glassmorphism in favor of sharp, precise shadows that reinforce the architectural aesthetic. Level 1 (base surfaces) uses no shadow; Level 2 (cards, inputs) applies box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a subtle lift without visual noise. Level 3 (modals, dropdowns) escalates to box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12), a larger spread that signals modal prominence. Hover states on cards transition from Level 2 to Level 3 over 300ms, telegraphing interactivity. The black overlay behin

Shapes

The shape philosophy is 'Architectural Sharpness'—a commitment to right angles and minimal curvature that mirrors the precision of legal language. Buttons and inputs use rounded: DEFAULT (0.5rem / 8px), a subtle radius that softens hard edges without introducing organic curves. Cards and modals use rounded: md (0.75rem / 12px), providing slightly more visual relief while maintaining geometric clarity. Dropdowns and select panels use 4px radius, the smallest increment, to emphasize their utilitarian function. The full radius (9999px) is reserved for badges and pill-shaped elements, where the ci

Components

Action Elements Buttons are the primary interaction mechanism and must be instantly recognizable. The button-primary component uses background: {colors.primary} (#c0ff3d), text-color: {colors.on-primary} (#1c1c1c), padding: 12px 24px, height: 48px, and rounded: {rounded.DEFAULT} (8px). On hover, the background transitions to {colors.primary-fixed-dim} (#b2dd2c) over 300ms, creating a perceptible but not jarring state change. The button-secondary variant inverts the palette: background: {colors.tertiary} (#000000), text-color: {colors.on-tertiary} (#c0ff3d), maintaining the neon accent as a text color to preserve brand identity. Ghost buttons (transparent background with 1px border) are used for tertiary actions; they default to border: 1px solid {colors.outline} (#515151) and transitio

Do's and Don'ts

**Do**

• Do use the neon primary (#c0ff3d) exclusively for interactive elements and CTAs—never for body text or backgrounds.
• Do maintain the 3-color palette (black, white, neon green) as the core visual identity; introduce secondary colors only for error states or accessibility.
• Do apply consistent padding (24px for cards, 12px for inputs) to create visual rhythm and reduce cognitive load.
• Do use weight 200–300 for headlines and weight 400–500 for body text to preserve the minimalist aesthetic.
• Do transition all interactive states over 300ms using cubic-bezier(0, 0, 0.4, 1) to telegraph changes with precision.
• Do use box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) for Level 2 surfaces and 0 16px 40px rgba(0, 0, 0, 0.12) for modals to build depth without visual noise.

**Don't**

• Don't use rounded corners larger than 12px on functional elements (buttons, inputs, cards)—this softens the architectural aesthetic.
• Don't apply gradients or complex layering; the system relies on flat colors and precise shadows for hierarchy.
• Don't use the primary color (#c0ff3d) for backgrounds or large surface areas—it's an accent, not a fill.
• Don't introduce new colors outside the defined palette (black, white, neon green, gray outline, error red); this fragments the visual identity.
• Don't use font weights below 200 or above 700 in body text; this disrupts readability and dilutes the minimalist voice.
• Don't apply blur or transparency to text; maintain 100% opacity for all typography to preserve legibility and authority.