Design System Background

Design
System Guidelines

The visual framework, interactive components, color system, and layout grid for the Jalap Nepal web presence.

Brand Identity

Core pillars that guide the industrial aesthetics of Jalap Nepal.

gavel

Robust

Heavily defined structural components, high contrast borders, and massive typography denoting power and stability.

architecture

Precise

Strict geometric grids, sharp layout boundaries (0px roundedness), and detailed structural lines resembling steel blueprints.

verified

Authoritative

A primary red accent system highlighting action calls, with heavy slate and metal dark tones asserting regional dominance.

Color Palette

Tailored HSL theme colors reflecting structural elements, slate steels, and warning highlights.

#ba0013

Primary Red

bg-primary

#e31e24

Primary Container

bg-primary-container

#291715

On Surface

bg-on-surface

#5b5f64

Secondary Slate

bg-secondary

#8e97a4

Steel Gray

bg-steel-gray

#fff8f7

Base Background

bg-surface

#f4d2cf

Surface Dim

bg-surface-dim

#f4f7f9

Surface Ice

bg-surface-ice

#ffe9e6

Surface Container

bg-surface-container

#121212

Deep Charcoal

bg-[#121212]

Typography Scale

Display and Headline typography in geometric Montserrat; body copy in legible Inter; system tags in monolinear IBM Plex Sans.

font-display-lg text-display-lg

Montserrat 64px / Bold 800

TRUSS SYSTEM

font-headline-lg text-headline-lg

Montserrat 32px / Bold 700

Heavy Erection Works

font-headline-md text-headline-md

Montserrat 24px / Bold 700

Hot Dip Galvanization

font-body-lg text-body-lg

Inter 18px / Regular 400

Precision engineering and industrial-scale solutions tailored for structural challenges.

font-body-md text-body-md

Inter 16px / Regular 400

Operating Nepal's largest technological capacity to ensure lifelong protection against structural corrosion.

font-label-caps text-label-caps

IBM Plex Sans 12px / Semi-Bold 600

ESTABLISHED 2011 (2068 B.S.)

UI Components

Machined elements containing clear visual feedbacks and hover states.

Buttons & Interactive States

Primary Button (Solid Structural Red)
Secondary Button (Heavy Border Outlined)
Text link with transition line EXPLORE MORE SERVICES trending_flat

Form Controls

Cards & Bento Components

Bento grids using hard-outline elevations and dynamic micro-animations.

heat_pump

Corrosion Defense

Hover over this card to witness structural translation shadow effects.

Explore trending_flat
construction

Steel Assembly

Clean grids keep industrial layouts readable and technically ordered.

Explore trending_flat
architecture

Seismic Modeling

All card outlines automatically trigger brand accents on cursor mouseover.

Explore trending_flat