Guidelines
Texture

Lumina

CDS components replicate the rough, noisy outer surface of real-world objects through our texture ‘Lumina’. The word ‘Lumina’ˈlü-mə-nə is a combination of luminous(means giving off light) and mina(means glass in Persian). Lumina simulate colorful light passing a dense glass.The texture is composed of three major parts: blur, grain, and gradient. Together they form an elegant-looking texture that stands as a backbone for the uniqueness and user interface of CDS.

The overall theme of CDS is wholly incorporated in Lumina.It has a transparent fading effect that symbolizes the ever-growing, slow development to something great as the word ‘continuum’ explains. The noise adds a real-world beauty of imperfection. CDS backgrounds are preferred to be dynamic. Hence we provide a translucent surface for aesthetic purposes.

Texture can be used to create depth, interest and drama in a design. It can also be used to enhance the mood, tone and message of a design. ― Jennifer Farley

Texture is one of the first things we notice about something that we see. The texture of an element plays a huge part in defining its identity and appeal. It helps us in perceiving, remembering and recreating that particular object.

Components of Lumina

Gradient

The gradient of Lumina is made from accent color as base. The gradient extends from the accent color and fades with transparency. Diagonally positioned radial gradient is used to get a smooth and natural transition. This diagonalized gradient and opaque accent color ensures that the text part ohe component is visible and readable.

  • Gradient Types: There are different types of gradients that can be used to create different effects in a design. Some common types are linear, radial, conical, elliptical and diamond gradients. Each type has its own advantages and disadvantages depending on the context and purpose of the design.
  • Gradient Colors: The colors used in a gradient can have a significant impact on the mood, tone and message of a design. The colors should be harmonious and appropriate for the theme and audience of the design. A common way to choose gradient colors is to use analogous or monochromatic colors from the color wheel.
  • Gradient Direction: The direction of a gradient can also affect the perception and interpretation of a design. The direction can create a sense of movement, perspective, depth or focus in a design. A common way to choose gradient direction is to use horizontal, vertical or diagonal angles.

Grain Noise

The grain part adds a roughness to the texture, making it look more realistic. There are many kinds of noises such as white noise, dark noise, static noise, gaussian noise, etc. We have used a white noise for Lumina. The size of the grain is chosen in a way that it is not too big for blending in with the gradient and not too small for being visible. The grain also has a fading effect same as the gradient for forming the common area of translucency.

  • Noise Types: There are different types of noises that can be used to create different effects in a design. Some common types are white noise, black noise, pink noise, brown noise and blue noise. Each type has its own characteristics and applications depending on the context and purpose of the design.
  • Noise Amount: The amount of noise used in a design can have a significant impact on the quality and style of a design. The amount of noise should be balanced and suitable for the theme and audience of the design. A common way to choose noise amount is to use low, medium or high levels.
  • Noise Distribution: The distribution of noise in a design can also affect the perception and interpretation of a design. The distribution can create a sense of randomness, uniformity, contrast or harmony in a design. A common way to choose noise distribution is to use even, uneven or clustered patterns.

Generator

Blur

The translucent/blur part provides a soft and smooth look to the texture. Blur makes the noise more relevant with the background of the texture as mere noise looks rough and artificial. Adding enough blur to the background ensures the readability of the foreground. While using dynamic backgrounds, blur in the texture provides a pleasant effect.

  • Blur Types: There are different types of blur that can be used to create different effects in a design. Some common types are gaussian blur, motion blur, radial blur and lens blur. Each type has its own advantages and disadvantages depending on the context and purpose of the design.
  • Blur Amount: The amount of blur used in a design can have a significant impact on the focus and clarity of a design. The amount of blur should be adjusted and appropriate for the theme and audience of the design. A common way to choose blur amount is to use low, medium or high levels.