Forja ERP

Overview

Forja ERP is a business management platform designed for Brazilian enterprises seeking streamlined financial, sales, and operational control. The design system embodies "Minimalist Pragmatism"—a philosophy that strips away visual noise to expose pure function. Every pixel serves the user's workflow: light neutral surfaces (#ffffff, #ededed) provide a calm, distraction-free canvas, while dark charcoal accents (#333333) mark critical actions and navigation points. The aesthetic rejects skeuomorphism and trendy gradients, instead embracing the clarity of Swiss-style typography and a restrained color palette rooted in professional software tradition.

The brand voice is direct, confident, and solution-oriented. Forja speaks to operations managers and finance teams in their language: clear, jargon-aware, and action-focused. The tone avoids marketing hyperbole; instead, it emphasizes reliability and speed. Example: "Forja ERP: O sistema de gestão que você sonhou" (The management system you dreamed of)—a promise of simplicity and completeness, not flashiness.

Colors

The color system is anchored in a light-neutral foundation with strategic dark accents. Primary (#333333) is the signature charcoal used on all call-to-action buttons, active navigation states, and critical UI elements—it commands attention without aggression. Surface colors range from pure white (#ffffff) to soft grays (#ededed, #e8e8e8), creating a subtle depth hierarchy: surface-container (#ededed) is the default card background, while surface-container-highest (#e0e0e0) signals elevated or focused states. On-surface text is pure black (#000000) for maximum legibility at 16px body size; secondary text uses #464646 for reduced emphasis. Outline colors (#777777, #a3a3a3) define borders and dividers, maintaining visual separation without harshness. Error states use a warm red (#fa444d) pai

Typography

Inter is the sole typeface, chosen for its exceptional clarity at small sizes (12px label-sm through 14px label-md) and its neutral, professional character. The type scale is built on a 4px baseline grid: display (60px, 700 weight) anchors hero sections; headline-lg (48px, 700) and headline-md (36px, 700) structure page sections; title-lg (24px, 600) marks subsections; body-lg (18px, 400) and body-md (16px, 400) carry primary content; label-md (14px, 600) and label-sm (12px, 500) label form fields and badges. Letter-spacing is minimal (-0.02em on display, 0em on body) to maintain the typeface's inherent rhythm. Line-height is set generously (26px on body-lg, 24px on body-md) to ensure readability in dense data tables and form layouts. Apply text-shadow: 0 1px 1px rgba(0, 0, 0, 0.05) on sma

Layout

The layout system uses a 12-column grid with a max-width of 1280px, accommodating both desktop dashboards and tablet views. Spacing is semantic: gutter (24px) defines horizontal padding on containers; lg (40px) separates major sections; md (24px) is the default card padding and inter-component margin; sm (12px) spaces form elements and list items. The light background (#ffffff, #ededed) is the dominant visual anchor, with content cards floating atop using subtle shadows (0 1px 2px rgba(0, 0, 0, 0.06)). White-space is generous—never cramped—to reduce cognitive load in data-heavy interfaces. Container max-width of 1280px ensures readability on wide screens without forcing horizontal scrolling on 1024px tablets.

Elevation & Depth

Depth is conveyed through a restrained shadow system and surface-color hierarchy, not through layered blur or glassmorphism. Level 1 (Base): the light background (#ffffff) with no shadow. Level 2 (Standard Card): surface-container (#ededed) with a 1px border in surface-variant (#e1e3e5) and a soft shadow (0 1px 2px rgba(0, 0, 0, 0.06)). Level 3 (Elevated/Modal): surface (#ffffff) with a 1px border and a stronger shadow (0 4px 12px rgba(0, 0, 0, 0.08)). Hover states elevate cards to Level 3 with a 150ms ease-in-out transition. Focus states on inputs add a 3px inset shadow (0 0 0 3px rgba(51, 51

Shapes

The shape philosophy is "Soft-Technical"—rounded corners are present but restrained, signaling approachability without sacrificing precision. Border-radius follows a 4-step scale: sm (4px) for small UI elements like badges and tight form inputs; DEFAULT (8px) for standard buttons and input fields; md (12px) for cards and modals; lg (16px) for larger containers and hero sections. Buttons use lg (16px) to soften their impact while maintaining clear affordance. The full (9999px) radius is reserved for circular avatars and icon buttons. This conservative rounding keeps the interface feeling profes

Components

Action Elements Buttons are the primary interaction pattern. button-primary uses #333333 background with white text, 12px 24px padding, 48px height, and 8px border-radius. On hover, the background darkens to #2a2f34 with an elevated shadow (0 4px 12px rgba(0, 0, 0, 0.12)) and a 150ms transition. On active/press, the background becomes #151618 with a tighter shadow (0 2px 4px rgba(0, 0, 0, 0.15)). button-secondary is transparent with a 1px border (#a3a3a3), matching the primary height and padding; on hover, it fills with surface-container-low (#f0f0f0) and the border becomes #777777. Both button variants use label-md typography (14px, 600 weight) for clear, scannable text.

Containers & Surfaces Cards are the primary content container. The base card has a white background (#ffffff),

Do's and Don'ts

**Do**

• Do use primary (#333333) exclusively for CTAs, active states, and critical navigation—never dilute it with secondary colors.
• Do maintain 24px gutter spacing on all container edges to ensure breathing room and prevent content crowding.
• Do apply Inter at 16px body-md with 24px line-height for all body copy to guarantee readability in data-dense tables.
• Do use surface-container (#ededed) as the default card background and surface-container-high (#e8e8e8) for hover states to create a clear depth progression.
• Do include 150ms ease-in-out transitions on all interactive elements (buttons, cards, inputs) to signal responsiveness without feeling sluggish.

**Don't**

• Don't use colors outside the defined palette—no custom hex values or brand-new accent colors; consistency is trust.
• Don't apply shadows stronger than (0 8px 16px rgba(0, 0, 0, 0.1))—excessive depth breaks the minimalist aesthetic.
• Don't mix typefaces; Inter is the only font family. Poppins and Phosphor are icon/symbol fonts only, never for body text.
• Don't round corners beyond 16px on standard UI elements; excessive rounding feels toy-like and undermines professional credibility.
• Don't use opacity or blur effects (backdrop-filter, rgba overlays) on content surfaces—Forja is clarity-first, not glassmorphic.