Smarkets

SsdS_ Fundamentals Design System

Version: 2023.01

Colors Behavior

SsdS_V.202301 StyleGuide
[ Version: 2023.01 ]
Nós da Smarkets utilizamos a caixa de ferramentas (Toolkit) na estrutura do Bootstrap, para construção de componentes e telas de nossa plataforma. Logo a baixo você poderá encontrar nosso Design System divididos categorias fundamentais com elas você encontrará orientações da criação de cada componente utilizado em nossa plataforma, desde cores, fontes, componentes, comportamentos, entre outros.
Primary Color
Main Color Light #B1E2F5
Main Color Smarkets #27ADE4
Main Color Dark #0081BF
$-10MBlue
#DBF1FB
$-20MBlue
#B1E2F5
$-30MBlue
#80D0EF
$-40MBlue
#49BBE9
$-50MBlue
#49BBE9
$-60MBlue
#49BBE9
$-70MBlue
#1996C8
$-80MBlue
#0081BF
$-90MBlue
#10607F
Secundary Color
Secundary Color Light #84DFE3
Secundary Color Smarkets #24ACB9
Secundary Color Dark #1F8388
$-10SGreen
#E0F7F8
$-20SGreen
#84DFE3
$-30SGreen
#60D9DF
$-40SGreen
#33C9D7
$-50SGreen
#24ACB9
$-60SGreen
#229FAA
$-70SGreen
#1E8F99
$-80SGreen
#0081BF
$-90SGreen
#1A7074
Neutral Color
Light Text #FFFFFF
Neutral Color #9E9E9E
Dark Text #212121
$-Transparent
#FFFFFF00
$-20SLight
#FFFFFF
$-30SLight
#FAFAFA
$-40SNeutral
#DADADA
$-50SNeutral
#9E9E9E
$-60SNeutral
#7E7E7E
$-70SDark
#3E3E3E
$-80SDark
#212121
$-90SDark
#000000
System Color
Success #2297A0
Info #0081BF
Danger #B55332
Warning #C3AB3C
Muted #9E9E9E
SUCESSserá usada para situações Positiva, de sucesso ou resolvida corretamente. INFO será usada para situações de informação Indicativa, em que se faz parte de um processo normal. DANGER será usada para situações Negativa, quando houver algum erro ou não resolvida corretamente onde é preciso uma atenção de urgência. Warning será usada para situações de alerta onde é necessário haver algum tipo de ação em que não está em seu status final aguardando para sequência em seu fluxo. MUTED será usada para situações de inativação ou que não apresentarão destaques importantes para ação.

Surface

SsdS_V.202301 StyleGuide
[ Version: 2023.01 ]
Nós da Smarkets utilizamos a caixa de ferramentas (Toolkit) na estrutura do Bootstrap, para construção de componentes e telas de nossa plataforma. Logo a baixo você poderá encontrar nosso Design System divididos categorias fundamentais com elas você encontrará orientações da criação de cada componente utilizado em nossa plataforma, desde cores, fontes, componentes, comportamentos, entre outros.
Primary
Config 0x0x0x
Config 0x0x0x
Config 0x0x0x

Typography

SsdS_V.202301 StyleGuide
[ Version: 2023.01 ]
Nossa escala de tipografia adere a uma escala de 4-8pt, começando com um pequeno texto de corpo e avançando até uma classe de cabeçalho grande chamada “Head”. Os estilos de cabeçalho usam a fonte OpenSans , fonte gratuita do Google. Para textos temos 3 variações de cores indicada logo a baixo. $n-Text_Blue e $n-Text_Green são cores destacastes, a versão Green em suma é utilizado para Headers. A cor Dark e Blue são cores para corpo e uso geral, porem não devem ser usadas no mesmo material, ao usar uma somente essa deve ser usada em todo o sistema.
$n-Text_Blue #44546A
$n-Text_Dark #212121
$n-Text_Green #1A605F
$-20SLight #FFFFFF
OpenSans Font
Headlines
Aa
Bold, 64/76
Aa
Bold, 36/44
Aa
Semi Bold, 28/36
Aa
Regular, 24/36
Aa
Semi Bold, 20/28
Aa
Bold, 64/76
Aa
Bold, 36/44
Aa
Semi Bold, 28/36
Aa
Regular, 24/36
Aa
Semi Bold, 20/28
Aa
Bold, 64/76
Aa
Bold, 36/44
Aa
Semi Bold, 28/36
Aa
Regular, 24/36
Aa
Semi Bold, 20/28
Aa
Bold, 64/76
Aa
Bold, 36/44
Aa
Semi Bold, 28/36
Aa
Regular, 24/36
Aa
Semi Bold, 20/28
Body
Aa Aa
Regular/Bold, 18/28
Aa Aa
Regular/Bold, 16/24
Aa Aa
Regular/Bold, 14/20
Aa Aa
Regular/Bold, 18/28
Aa Aa
Regular/Bold, 16/24
Aa Aa
Regular/Bold, 14/20
Aa Aa
Regular/Bold, 18/28
Aa Aa
Regular/Bold, 16/24
Aa Aa
Regular/Bold, 14/20
Aa Aa
Regular/Bold, 18/28
Aa Aa
Regular/Bold, 16/24
Aa Aa
Regular/Bold, 14/20
Button / Link
Aa
Semi Bold, 18/28
Aa
Semi Bold, 16/24
Aa
Semi Bold, 14/20
Aa
Semi Bold, 18/28
Aa
Semi Bold, 16/24
Aa
Semi Bold, 14/20
Aa
Semi Bold, 18/28
Aa
Semi Bold, 16/24
Aa
Semi Bold, 14/20
Aa
Semi Bold, 18/28
Aa
Semi Bold, 16/24
Aa
Semi Bold, 14/20
Fields
Aa
Regular, 16/24
Aa
Regular, 12/16
Aa
Bold, 12/16
Aa
Regular, 16/24
Aa
Regular, 12/16
Aa
Bold, 12/16
Aa
Regular, 16/24
Aa
Regular, 12/16
Aa
Bold, 12/16
Aa
Regular, 16/24
Aa
Regular, 12/16
Aa
Bold, 12/16

Breackpoint

SsdS_V.202301 StyleGuide
[ Version: 2023.01 ]
Os contêineres são o elemento de layout mais básico no Bootstrap e são necessários ao usar nosso sistema de grade padrão. Os contêineres são usados ​​para conter, preencher e (às vezes) centralizar o conteúdo dentro deles. Embora os contêineres possam ser alinhados, a maioria dos layouts não requer um contêiner alinhado.
null
Extra small
<576px
Small
≥576px
Medium
≥768px
Large
≥992px
Extra large
≥1200px
.container
100%
540px
720px
960px
1140px
.container-sm
100%
540px
720px
960px
1140px
.container-md
100%
100%
720px
960px
1140px
.container-lg
100%
100%
100%
960px
1140px
.container-xl
100%
100%
100%
100%
1140px
.container-fluid
100%
100%
100%
100%
100%

Button

SsdS_V.202301 StyleGuide
[ Version: 2023.01 ]
Os botões são divididos em 3 categorias com variantes de Icon, Text, Outline e Disabled junto ao estado defaut e hover.
Solids Variants
btn-Primary
btn-Secundary
btn-Danger
btn-Disable
Outlines Variants
btn-Outline-Primary
btn-Outline-Secundary
btn-Outline-Danger
btn-Outline-Disable
Links Variants
btn-Link-Primary
btn-Link-Secundary
btn-Link-Danger
btn-Link-Disable
Text + Icon buttons Variants
btn-Icon-Primary
btn-Icon-Secundary
btn-Icon-Danger
btn-Icon-Disable
btn-Icon-Outline-Primary
btn-Icon-Outline-Secundary
btn-Icon-Outline-Danger
btn-Icon-Outline-Disable
btn-Icon-Link-Primary
btn-Icon-Link-Secundary
btn-Icon-Link-Danger
btn-Icon-Link-Disable
Just Icon Button Variants

Selectors

SsdS_V.202301 StyleGuide
[ Version: 2023.01 ]
Os contêineres são o elemento de layout mais básico no Bootstrap e são necessários ao usar nosso sistema de grade padrão. Os contêineres são usados ​​para conter, preencher e (às vezes) centralizar o conteúdo dentro deles. Embora os contêineres possam ser alinhados, a maioria dos layouts não requer um contêiner alinhado.
Checkbox
Radio Buttons

Field Forms

SsdS_V.202301 StyleGuide
[ Version: 2023.01 ]
Os menus suspensos são sobreposições contextuais alternáveis ​​para exibir listas de links e muito mais. Utilizando como base o framework Bootstrap. A seguir está disposto apenas a parte visual e não componentizada do dropdown.
Text field
Default
Text Input Defaut
Dropdown
Selecione
Dropdown Defaut
Data
dd/mm/aaaa
Date Defaut
Number
0
Input number defaut
Tag
Item 01
Tags Defaut
Anexar
Escolher arquivo…
Buscar
Text Input Defaut
Pequisar
Default
Search Defaut
Pequisar
Default
Detalhado
Search Defaut
Text field box

Textbox…

 

 

 

Text Field Defaut

Popover and Tooltip

SsdS_V.202301 StyleGuide
[ Version: 2023.01 ]
Popover “pop-up” e “overlay” componente consiste em uma pequena janela ou caixa de diálogo que aparece sobre o conteúdo existente quando o usuário interage com um elemento específico, como um botão ou link para projetar informações adicionais, opções ou controles. Tooltip por outro lado, são caixa de texto ionformativas que surgem quando o usuários passa o cursor sobe um elemento específico, como botão ou link. Ambas oferecem informações breves e conxtetuais integrados ao Bootstrap, são valiosos para aprimorar a usabilidade e a interatividade em projetos web, seguindo as melhores práticas de design responsivo e proporcionando aos desenvolvedores uma implementação simplificada desses recursos.
ContentBodyPopOverTooltip

Alerts

SsdS_V.202301 StyleGuide
[ Version: 2023.01 ]
A mensageria de erros “Alertas” em sistemas refere-se à prática de fornecer mensagens claras, informativas e amigáveis aos usuários quando ocorrem falhas ou problemas durante a interação com um aplicativo ou sistema. Essas mensagens desempenham um papel crucial na experiência do usuário, contribuindo para a compreensão do erro, orientação sobre como corrigi-lo e, em última análise, melhorando a usabilidade geral do sistema.
Alerts Success
Alerts Warning
Alerts Error

Divider

SsdS_V.202301 StyleGuide
[ Version: 2023.01 ]
Componente responsável a adicionar uma divisão visual entre seções de uma página, como entre itens de uma lista, entre seções de formulário ou entre módulos em uma página.