Styles

A visual foundation that defines the look and feel of the system. It sets the tone through consistent use of color, typography, spacing, and layout rules.

Imagen1
Imagen3

Color

A structured color palette designed to convey identity, visual hierarchy, and accessibility, adaptable to various contexts and brand needs.
Imagen4

Typography

A scalable typographic system that unifies styles, enhances readability, and adds personality to every interface.

Desktop Grid Design

A flexible 12-column layout for structured and scalable content.

  • Columns
    The layout uses 12 equal-width columns, offering balance and flexibility for structuring content.
  • Margin
    Each side includes a 44px margin, ensuring consistent spacing and alignment with the page edges.
  • Gutter
    A 20px gutter separates the columns, creating clear breathing room between elements.
  • Rows
    The grid uses 1000 rows based on a 4px baseline, allowing precise vertical rhythm and alignment throughout the design.

Phone Grid Design

A single-column system optimized for clarity and responsiveness.

  • Columns
    A 1-column layout ensures focus and readability, ideal for stacking content vertically.
  • Margin
    Each side features a 16px margin, providing comfortable padding and alignment on mobile devices.
  • Gutter
    A 20px gutter is maintained to separate elements and improve readability within the single-column flow.
  • Rows
    It also uses 1000 rows based on a 4px baseline, preserving vertical rhythm and visual structure across all viewports.

Spacing

Spacing defines the rhythm and structure of the layout. Vertical and horizontal spacing scales are used consistently to create clarity, balance, and alignment across the system.

Vertical Spacing
Name Value Value px Value rem
Spacing–01
40.25
Spacing–02
80.5
Spacing–03
120.75
Spacing–04
140.875
Spacing–05
161
Spacing–06
201.25
Spacing–07
241.5
Spacing–08
281.75
Spacing–09
322
Spacing–10
342.125
Spacing–11
362.25
Spacing–12
402.5
Spacing–13
442.75
Spacing–14
523.25
Spacing–15
805
Spacing–16
1489.25
Spacing–17
1529.5
Spacing–18
20012.5
Spacing–19
20813
Horizontal Spacing
Name Value Value px Value rem
Spacing–01
40.25
Spacing–02
80.5
Spacing–03
120.75
Spacing–04
140.875
Spacing–05
161
Spacing–06
301.875
Spacing–07
322
Spacing–08
362.25
Spacing–09
442.75
Spacing–10
29218.25
Spacing–11
30819.25

Shape and Elevation

Defining how elements feel and behave in space. Shape sets the character; elevation defines depth.

  • Shape
    Rounded corners create softness and approachability. Default border radius: 40px.
  • Elevation
    Elevation adds depth and hierarchy through shadow. Default elevation: 4px.

Stroke

1.5px

Color

Elevación

4px

Border Radius

40px

Images

Images are designed to be versatile, consistent, and responsive across layouts. They follow fixed shapes and elevation, adapting to both horizontal and vertical formats.

  • Horizontal
    Used in wide containers or cards, horizontal images enhance layout flow and provide strong visual anchors.
  • Vertical
    Ideal for narrow spaces or portrait content. Vertical images maintain balance and readability in stacked or mobile views.
Horizontal
PHOTO
PHOTO
Vertical
PHOTO

Icons

Essential symbols used across navigation, controls, and UI interactions. Designed for clarity at small sizes.

System Icons
Mockup
Interface Icons
Mockup