Lorenta Technologies

Overview

Lorenta Technologies operates within a **Tech-Forward Minimalism** aesthetic—a design philosophy that pairs bold, saturated accent colors (vibrant purple #7e49f2) with a sophisticated dark canvas (#1a1426) to create an environment of focused innovation. The brand serves technology-forward organizations and developers seeking clarity amid complexity. The UI evokes precision, confidence, and forward momentum: every interaction feels intentional, every surface purposeful. The visual language rejects clutter; instead, it uses high-contrast accents and generous whitespace to guide attention to what matters.

The brand voice is direct, technical yet approachable, and never condescending. Lorenta speaks in active verbs and concrete outcomes: "Build solutions that scale," not "We help you build." The tone balances professionalism with accessibility—think of a senior engineer explaining a complex system to a peer, not a marketing department selling a dream. Vocabulary leans into precision: "innovative," "real-world problems," "designed," "solutions." Example sentence in brand voice: "Our platform transforms raw data into actionable intelligence—no guesswork, no delays."

Colors

The color system is built on a **dark-first, accent-driven** philosophy. The primary surface (#1a1426) provides a sophisticated, low-distraction canvas that allows interactive elements to command attention. Primary (#7e49f2) is the signature brand accent—used exclusively on CTAs, active states, focus indicators, and key interactive elements. It appears sparingly but decisively, creating visual hierarchy through contrast rather than saturation. Secondary (#e9a2f2, a lighter lavender) provides a supporting accent for secondary actions, highlights, and container fills. Tertiary (#f2cb07, a warm golden yellow) is reserved for accent badges, status indicators, and tertiary CTAs—it creates visual warmth against the cool purple palette.

Surface tokens follow a strict hierarchy: surface-container

Typography

The type system pairs **Manrope** (headings, 600–700 weight) with **Inter** (body, 400–600 weight), creating a dynamic contrast between geometric precision and humanist warmth. Display (60px, 700 weight, -0.04em tracking) commands attention on hero sections; headline-lg (40px, 700 weight) anchors major sections; headline-md (28px, 700 weight) organizes subsections. Body-lg (18px, 400 weight, 28px line-height) is used for introductory paragraphs and card descriptions, while body-md (16px, 400 weight, 24px line-height) serves as the default paragraph text. Label-md (14px, 600 weight, 0.01em tracking) is applied to button text, form labels, and UI microcopy. All display and headline text uses negative letter-spacing (-0.04em to -0.01em) to tighten letterforms and increase visual impact. Apply

Layout

The layout system uses a **12-column fluid grid** with a maximum container width of 1280px (80rem). Page rhythm is established through consistent spacing: lg (40px) separates major sections, md (24px) separates cards and subsections, and sm (12px) separates inline elements. The gutter (24px) defines horizontal padding on all sides at viewport widths below 1024px. On mobile, the grid collapses to 4 columns; on tablet, 8 columns; on desktop, 12 columns. Hero sections occupy full viewport height (100vh) with centered content using flexbox (display: flex, align-items: center, justify-content: center). Card grids use CSS Grid with gap: 24px (md spacing). Whitespace is intentional: sections breathe with mt (margin-top) values of 64px (xl) between major content blocks. Container max-widths of 880

Elevation & Depth

Depth is conveyed through a **layered shadow system** combined with surface-container tokens. Level 1 (Base): the background surface (#1a1426) with no shadow. Level 2 (Standard Cards): surface-container (#1a1426) with box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) and a 1px border at outline-variant (#49444f). Level 3 (Elevated/Modals): surface-container-high (#24202f) with box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) and the same border treatment. Interactive elements (buttons, inputs) use a subtle inset shadow on focus: inset 0 0 0 3px rgba(126, 73, 242, 0.2) to indicate keyboard focus. Hover state

Shapes

The shape language is **Geometric Precision**—a philosophy that uses consistent, moderate border-radius values to balance approachability with technical sophistication. Buttons and primary CTAs use rounded.lg (1rem / 16px), creating a slightly softened rectangle that feels modern without being overly organic. Cards and containers use rounded.xl (1.5rem / 24px), providing a more generous curve that invites interaction. Input fields use rounded.DEFAULT (0.5rem / 8px), maintaining a more structured, form-like appearance. Badges and pills use rounded.full (9999px) for maximum softness. The reasoni

Components

Action Elements Buttons are the primary interaction mechanism. Button-primary uses backgroundColor: {colors.primary} (#7e49f2), textColor: {colors.on-primary} (#ffffff), padding: 12px 24px, height: 48px, and rounded.lg (16px). On hover, the background transitions to #6a3dd9 (a darker purple) over 150ms. On active/pressed, it darkens further to #5a2fc9. Button-secondary uses a transparent background with a 2px solid border at {colors.primary}, maintaining the same padding and height. On hover, it fills with rgba(126, 73, 242, 0.1) without changing the border. All buttons use label-md typography (14px, 600 weight) and apply transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) for smooth state changes.

Containers & Surfaces Cards use backgroundColor: {colors.surface-contai

Do's and Don'ts

**Do**

• Do use primary (#7e49f2) exclusively on CTAs, focus states, and key interactive elements—never on passive backgrounds or body text.
• Do maintain the 1px outline-variant (#49444f) border on all cards and containers to define edges without harsh contrast.
• Do apply negative letter-spacing (-0.04em to -0.01em) on all display and headline text to increase visual impact and tighten letterforms.
• Do use the 150ms cubic-bezier(0.4, 0, 0.2, 1) timing function for all interactive state transitions (hover, focus, active).
• Do reserve rounded.full (9999px) for badges and pills; use rounded.lg (16px) for buttons and rounded.xl (24px) for cards.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) on standard cards and 0 8px 24px rgba(0, 0, 0, 0.25) on elevated modals.

**Don't**

• Don't use primary (#7e49f2) on body text, backgrounds, or passive elements—it should feel rare and intentional.
• Don't apply rounded-full to buttons or form inputs; reserve it for status badges and pill-shaped elements.
• Don't use positive letter-spacing on display or headline text; maintain -0.04em to -0.01em for visual tightness.
• Don't mix Manrope and Inter weights arbitrarily; use Manrope 600–700 for headings and Inter 400–600 for body.
• Don't apply shadows larger than 0 8px 24px rgba(0, 0, 0, 0.25) on any element; keep the palette restrained.
• Don't use on-surface (#f5f3f9) as a background color; reserve it for text only. Use surface-container tokens for backgrounds.