Font Size -Style Guide 2023

Display-1

Display-2

Display-3

Display-4

H-1

H-2

H-3

H-4

H-5
H-6
Body-Lead (20px/1.25rem) Medium
Body-Big (20px / 1.25REM): Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Body-Regular (18px / 1.125REM) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Body-Capitals (18px / 1.125REM): Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Body-Caption (16px / 1rem): Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Body-Tiny (13px / 0.813 rem) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
  • DevOps practice:
    Our DevOps pipeline cycle ensures the quality of the code we write and release by embedding up-to-date practices like CI / CD, bug and performance monitoring, security checkpoints, and automated code testing.
  • Agile Development:
    Icalia Labs has adopted several agile methodologies in the development and testing processes. These include scrum, kanban, and continual prioritization of tasks as basic planning cycles in each delivery sprint.
  • Service design applied to software products:
    Our comprehensive approach seeks to envision, prototype, and create excellent products that reduce risk in the development phase and prioritize what matters to users' needs. Icalia Labs ensures successful outcomes through the use of methodologies such as Design Sprint from Google Ventures, we guarantee successful results quickly.
Bottom Border b-bot

Colors

NEUTRALS
n100 - #134E4A
n90 - #2D2F40
n80 - #585C78
n70 - #888B9F
n60 - #B0B3CE
n50 - #C3C7E5
n40 - d5d8ed
n30- #e1e3f2
n20- #eff0fb
n10-f9f9ff-
Reds
red100- #471114
red90 - #5F171B
red80 - #7F1D1D
red70 - #D6343C
red60 - #EE3A43
red50 - #F16169
red40- #F5898E
red30 - #F8B0B4
red20- #FCD8D9
red10 - #FDEBEC
Indigo
ind100- #0A1033
ind90 - #0F194D
ind80 - #142166
ind70 - #19297F
ind60 - #2F3CA0
ind50 - #454EC0
ind40 - #5A61DF
ind30 - #7073FF
ind20 - #9295FF
ind 10 - #B4B6FE
SBlue
SB-80
SB-60
SB-40
SB-30
SGreen
SG-80
SG-60
SG-40
SG-30
PRed
PR-80
PR-60
PR-40
PR-30
SPurple
SP-80
SP-60
SP-40
SP-30
SPink
SPink-80
SPink-60
SPink-40
SPink-30
DBlue
DB-100
DB-40
DB-30
bg-R
bg-GR
bg-BB
bg-DB
bg-G-40

bg-G-30

bg-GP

bg-GP-2

bg-GB






bg-GG






bg-TW-70
bg-TW-50
bg-TW-30
bg-TW-10

Paddings and Margins

Margin Top 10px mt-10
Margin Top 20px mt-20
Margin Top 30px mt-30
Margin Bot 10px mb-10
Margin Bot 20px mb-20
Margin Bot 30px mb-30
Padding Bot 30px pb-30
Padding Top-10px pt-10
Padding Top-20px pt-20
Padding Bot 20px pb-20
Padding Top-20px pt-20
Right
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
Jusitfy
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
center-new
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
Padding Bot 10px pb-10

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

Hedding 5
Heading 6 , paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

As a top software development company in USA we understand our clients need to concentrate on the human experience, factors that drive growth, and help launch digital products that activate your organization. Our design sprint & workshop services begin by crafting a well-rounded digital product that could be modularized for future intentions without compromising any interaction or value.

Our UI/UX designers focus on a user-centered approach to design with close collaboration with all stakeholders. Building empathy and understanding through product stories, journey maps, personas, and storyboards, we create and maintain design systems that scale, ensure consistency, and improve digital products quality. esto es un Link

Opportunity

In its beginnings, RTS found itself in a situation where:

  • Control of inventories and supply chains was centralized in a single application, which had this series of limited and superficial functionalities of the materials that enter and leave the facilities.
  • Databases were updated manually and third party reported an estimate of the inventories and historical data.
  • Control of inventories and supply chains was centralized in a single application, which had this series of limited and superficial functionalities of the materials that enter and leave the facilities.
  • Databases were updated manually and third party reported an estimate of the inventories and historical data.
  • Migrate from a traditional operation to a new one, in its entirety.
  • Change staff’s mentality.
  • Training for the use of the new interface.
  • Data migration to the new interface.
  • Implementation of necessary changes and adaptations in the new interface.

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.