Grupo Solmex - Pattern Library

01 — Core Patterns

Signature Textures

Primary patterns extracted from logo construction. Use these to add visual interest while maintaining brand consistency.

45° Diagonal Stripes

The signature Solmex pattern derived from the logo's diagonal flow. Use as primary background texture for hero sections and marketing materials.

hero marketing print

Radial Rings

Concentric circles inspired by the logo's central nexus. Use for focus areas and data visualization backgrounds.

dashboard focus

Precision Dot Grid

Engineering-inspired dot matrix for technical applications and form backgrounds.

forms technical

Technical Grid

Precise grid lines for data-heavy interfaces and technical documentation.

data charts

Corner Cut Accent

A signature visual element derived from the logo's geometric cut. Use as card accents and container decorations.

cards accent containers

Industrial Noise

Subtle texture overlay that adds depth and industrial character to solid backgrounds.

overlay texture

Gradient Mesh

Geometric mesh pattern using brand gradient colors for premium backgrounds.

premium background

Flow Lines

Subtle angled lines suggesting movement and logistics flow.

subtle motion

02 — Theme Variants

Light & Dark Modes

All patterns are available in both dark and light variants for different application contexts.

Dark Mode

Light Mode

Dark Mode

Light Mode

03 — Application

In Context

Examples of patterns applied in real interface contexts.

Hero Section

Main landing page header with content overlay

Marketing Hero

45° stripes at 15% opacity

Dashboard

Data visualization canvas

Analytics Background

Tech grid at 10% opacity

Form Input

User input areas

Form Background

Dot grid at 30% opacity

04 — Implementation

CSS Code

Copy these CSS snippets to implement patterns in your projects.

/* 45° Diagonal Stripes - Solmex Signature Pattern */
.pattern-stripes {
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 20px,
    rgba(255, 148, 59, 0.15) 20px,
    rgba(255, 148, 59, 0.15) 40px
  );
}

/* Precision Dot Grid */
.pattern-dots {
  background-image: radial-gradient(
    rgba(255, 148, 59, 0.3) 1.5px,
    transparent 1.5px
  );
  background-size: 24px 24px;
}

/* Technical Grid */
.pattern-grid {
  background: 
    linear-gradient(rgba(255, 148, 59, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 148, 59, 0.1) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* Radial Rings */
.pattern-radial {
  background: repeating-radial-gradient(
    circle at center,
    transparent 0,
    transparent 20px,
    rgba(255, 148, 59, 0.08) 20px,
    rgba(255, 148, 59, 0.08) 40px
  );
}

/* Corner Cut Accent */
.pattern-corner::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  border-style: solid;
  border-width: 0 0 60px 60px;
  border-color: transparent transparent rgba(255, 148, 59, 0.3) transparent;
}

05 — Guidelines

Best Practices

Rules for using patterns effectively while maintaining brand integrity.

✓ Do

• Use patterns at low opacity (10-30%) as subtle textures
• Ensure content remains readable over patterned backgrounds
• Maintain consistent pattern scales across similar elements
• Use corner cuts on cards and containers for brand accent
• Apply noise overlay to add depth to solid backgrounds
• Use 45° stripes for primary marketing materials

✕ Don't

• Never use patterns at full opacity—they should be subtle
• Don't combine multiple patterns in close proximity
• Avoid patterns that compete with important content
• Don't use non-brand colors in pattern fills
• Avoid changing pattern angles (stick to 45° and 90°)
• Don't stretch or distort patterns

Industrial Textures