Avelon

Overview

Avelon is a construction and industrial services platform that communicates technical expertise through bold, confident design. The brand aesthetic is "Technical Maximalism"—a movement that pairs industrial-strength precision with vibrant, unapologetic color. The primary accent, #FB651B (vivid burnt orange), dominates CTAs, navigation highlights, and key interactive moments, evoking the energy of active construction sites while maintaining professional credibility. The secondary navy (#0E2F3E) grounds the system with authority and stability, creating a high-contrast, no-nonsense visual language.

Avelon's voice is direct, solution-focused, and transparent. The brand speaks to project managers and contractors who value clarity over decoration—every design decision must earn its place. Tone: confident but not arrogant, technical but never jargon-heavy, optimistic about delivery timelines. Example sentence: "We've managed 47 projects over 15 years—your timeline is safe with us."

Colors

The color system is built on a high-contrast, light-dominant foundation with strategic accent deployment. Primary (#FB651B) is reserved exclusively for CTAs, active navigation states, and critical interactive elements—it appears sparingly but commands attention. Secondary (#0E2F3E) is used for headers, footer backgrounds, and secondary CTAs to establish visual hierarchy without competing with primary. The surface stack (white #FFFFFF, dim #F5F5F5, container #F5F5F5, high #E8E8E8) creates subtle depth through 4–8px shifts in luminance, enabling card hierarchies and layered content without relying on shadows. On-surface text is pure black (#0A0A0A) for maximum legibility on light backgrounds; on-surface-variant (#626262) is used for secondary text and metadata. Error red (#CF2E2E) is deploye

Typography

The type system pairs Space Grotesk (geometric, modern, sans-serif) for all display and heading layers with Inter (neutral, highly legible) for body and label text. This pairing creates visual tension: Space Grotesk's tight letter-spacing (-0.04em on display, -0.02em on headline-lg) and bold weight (700) convey urgency and confidence, while Inter's generous line-height (24px on body-md, 28px on body-lg) ensures readability in dense technical content. Display (133px, 700 weight) is reserved for hero headlines; headline-lg (48px, 700) for section titles; headline-md (32px, 700) for subsections. Body-md (16px, 400) is the default paragraph size with 24px line-height, providing 1.5x leading for comfortable scanning. Labels use Space Grotesk at 16px (700 weight) to reinforce button and interact

Layout

The layout system uses a 12-column fluid grid with a fixed max-width of 1200px, centered on the viewport. Container padding is 24px (md spacing) on desktop, reducing to 12px (sm spacing) on tablets and 8px (xs spacing) on mobile. Section separation uses lg spacing (40px) between major content blocks, md spacing (24px) between subsections, and sm spacing (12px) between related elements. The gutter (24px) is applied between grid columns and card groups. White-space is treated as a design material: generous margins around hero headlines (40px above, 24px below) create breathing room and emphasize key messages. Cards are laid out in 2–3 column grids on desktop, collapsing to single-column on mobile. Container max-width of 1200px ensures text lines remain under 75 characters for optimal readabi

Elevation & Depth

Depth is conveyed through subtle shadows and border treatments rather than dramatic layering. Level 1 (Base): flat white background (#FFFFFF) with no shadow. Level 2 (Cards/Containers): 1px solid border at #CCCCCC with box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a soft lift of 3px. Level 3 (Modals/Overlays): box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1), a diffuse 30px spread that suggests depth without harshness. Hover states elevate cards to Level 3 with a 200ms ease-out transition. Buttons use no shadow in idle state; on hover, they shift background color (primary #FB651B → #E85A0F) a

Shapes

The shape philosophy is "Geometric Precision"—sharp, minimal corner radii that evoke technical drawings and industrial design. Buttons use 4px (DEFAULT) radius, creating a subtle softness without appearing rounded or playful. Cards use 5px (md) radius for a marginally softer appearance, distinguishing them from buttons while maintaining the geometric language. Inputs use 4px (DEFAULT) radius to align with button styling. Large containers (modals, hero sections) use 8px (lg) radius. The full (9999px) radius is reserved for badges and small accent elements. This tiered approach ensures visual co

Components

Action Elements Buttons are the primary interaction mechanism and must be visually dominant. Button-primary uses #FB651B background, white text, 2px solid border, 12px horizontal padding, and 48px height. On hover, the background shifts to #E85A0F (a 10% darker shade) with a 200ms ease-out transition; the border color follows. Button-secondary uses a transparent background with a 2px solid border at #0A0A0A (on-surface), white text on hover, and the same 48px height. Button-ghost is text-only with no border; on hover, it gains a light background (#F5F5F5) and the text color shifts to primary (#FB651B). All buttons use Space Grotesk 16px 700 weight for maximum legibility and impact.

Containers & Surfaces Cards are the primary content container. Standard card: 1px border at #CCCCCC,

Do's and Don'ts

**Do**

• Do use primary (#FB651B) exclusively on CTAs and active states—never on passive backgrounds or body text.
• Do maintain 24px gutter spacing between card groups and 40px between major sections to create visual breathing room.
• Do apply Space Grotesk 700 weight to all headings and button labels for maximum impact and clarity.
• Do use 1px borders at #CCCCCC on cards and 2px borders on buttons to reinforce the technical, precise aesthetic.
• Do transition all interactive states over 200ms with ease-out timing to create smooth, confident interactions.
• Do keep border-radius values at 4–8px maximum; avoid rounded corners that soften the industrial character.

**Don't**

• Don't use secondary (#0E2F3E) or tertiary (#FFFFFF) as primary accent colors—they are supporting roles only.
• Don't apply shadows deeper than 0px 0px 30px rgba(0, 0, 0, 0.1); the system favors borders and color shifts over dramatic depth.
• Don't mix Space Grotesk and Inter within a single heading or button label—maintain clear typographic hierarchy.
• Don't use gradients or transparency effects; the system relies on flat, solid colors and precise borders for clarity.
• Don't exceed 3 columns of cards on desktop or use card heights taller than 300px—maintain scannable, compact layouts.
• Don't apply text-shadow or text-stroke effects; instead, use background-color or border-color shifts to indicate state changes.