SIMECDesign Systemv1.0.0

Design System SIMEC

Tokens

109 tokens em 15 grupos, todos com o prefixo --simec-. A origem indica se o valor veio do Figma ou do padrão do Bootstrap 3.

Base colors - Cores base

13 tokens

  • --simec-text
    #333333
    Figma
  • --simec-text-muted
    #777777
    Figma
  • --simec-text-inverse
    #ffffff
    Figma
  • --simec-link
    #2e6db4
    Figma
  • --simec-tab-text
    #2e6db4
    Figma
  • --simec-text-danger
    #d9534f
    Figma
  • --simec-text-halted
    #e67e22
    Figma
  • --simec-bg
    #ffffff
    Figma
  • --simec-bg-surface
    #f5f5f5
    Figma
  • --simec-bg-hover
    #eeeeee
    Figma
  • --simec-border
    #cccccc
    Figma
  • --simec-border-light
    #dddddd
    Figma
  • --simec-border-focus
    #66afe9
    Figma

Buttons - Botões (Bootstrap 3: bg / border / hover)

16 tokens

  • --simec-primary
    #2e6db4
    Figma
  • --simec-primary-border
    #295f9f
    Figma
  • --simec-primary-hover
    #24558b
    Figma
  • --simec-success
    #5cb85c
    Figma
  • --simec-success-border
    #4cae4c
    Figma
  • --simec-success-hover
    #47a447
    Figma
  • --simec-danger
    #d9534f
    Figma
  • --simec-danger-border
    #d43f3a
    Figma
  • --simec-danger-hover
    #d2322d
    Figma
  • --simec-warning
    #f0ad4e
    Figma
  • --simec-warning-border
    #ed9c28
    Figma
  • --simec-warning-hover
    #ec971f
    BS3
  • --simec-info
    #5bc0de
    Figma
  • --simec-info-border
    #39b3d7
    Figma
  • --simec-info-hover
    #31b0d5
    BS3
  • --simec-neutral-hover
    #ebebeb
    Figma

Alerts - Alertas (text: figma / bg and border: bs3)

13 tokens

  • --simec-alert-success-text
    #468847
    Figma
  • --simec-alert-success-bg
    #dff0d8
    BS3
  • --simec-alert-success-border
    #d6e9c6
    BS3
  • --simec-alert-warning-text
    #c09853
    Figma
  • --simec-alert-warning-bg
    #fcf8e3
    BS3
  • --simec-alert-warning-border
    #fbeed5
    BS3
  • --simec-alert-danger-text
    #b94a48
    Figma
  • --simec-alert-danger-bg
    #f2dede
    BS3
  • --simec-alert-danger-border
    #eed3d7
    BS3
  • --simec-alert-info-text
    #3a87ad
    BS3
  • --simec-alert-info-bg
    #d9edf7
    BS3
  • --simec-alert-info-border
    #bce8f1
    BS3
  • --simec-alert-simec
    #e30613
    Figma

Field states - Estados de campo (has-success / has-warning / has-error)

4 tokens

  • --simec-field-success
    #3c763d
    BS3
  • --simec-field-warning
    #8a6d3b
    BS3
  • --simec-field-error
    #a94442
    BS3
  • --simec-field-disabled
    #eeeeee
    Figma

Table - Tabela legada SIMEC

4 tokens

  • --simec-table-header
    #e6e6e6
    Figma
  • --simec-table-label
    #dfdfdf
    Figma
  • --simec-table-border
    #c0c0c0
    Figma
  • --simec-table-striped
    #f9f9f9
    Figma

Page layout - Estrutura da página SIMEC

3 tokens

  • --simec-environment-bar
    #0f8f0f
    Figma
  • --simec-footer
    #000000
    Figma
  • --simec-footer-stripe
    #5eaf2e
    Figma

Status icons - Ícones de situação

3 tokens

  • --simec-icon-success
    #3c9a3c
    Figma
  • --simec-icon-help
    #f5c518
    Figma
  • --simec-icon-error
    #d9534f
    Figma

Typography - Tipografia

11 tokens

TokenValorOrigemUsar
--simec-font-family"Inter", "Helvetica Neue", Helvetica, Arial, sans-serif
--simec-font-monoMenlo, Monaco, Consolas, "Courier New", monospace
--simec-font-size-sm12px
Figma
--simec-font-size-base14px
BS3
--simec-font-size-md16px
Figma
--simec-font-size-lg18px
BS3
--simec-font-size-xl28px
Figma
--simec-font-weight-normal400
BS3
--simec-font-weight-bold700
BS3
--simec-line-height1.428571429
BS3
--simec-line-height-text1.5

Spacing - Espaçamentos

5 tokens

TokenValorOrigemUsar
--simec-space-xs4px
Figma
--simec-space-sm6px
Figma
--simec-space-md10px
Figma
--simec-space-lg12px
Figma
--simec-space-xl15px
Figma

Control heights - Alturas de controles

9 tokens

TokenValorOrigemUsar
--simec-button-height-xs22px
Figma
--simec-button-height-sm30px
Figma
--simec-button-height34px
Figma
--simec-button-height-lg46px
Figma
--simec-input-height-sm30px
Figma
--simec-input-height34px
Figma
--simec-input-height-lg45px
Figma
--simec-table-header-height38px
Figma
--simec-table-condensed-height32px
Figma

Radius and modal - Bordas e modais

5 tokens

TokenValorOrigemUsar
--simec-radius-sm3px
BS3
--simec-radius4px
BS3
--simec-radius-lg6px
BS3
--simec-modal-width600px
Figma
--simec-modal-width-lg900px
Figma

Elevation - Elevação e sombras

4 tokens

TokenValorOrigemUsar
--simec-shadow-insetinset 0 1px 1px rgba(0, 0, 0, 0.075)
BS3
--simec-shadow-sm0 1px 1px rgba(0, 0, 0, 0.05)
BS3
--simec-shadow-md0 6px 12px rgba(0, 0, 0, 0.175)
BS3
--simec-shadow-lg0 5px 15px rgba(0, 0, 0, 0.5)
BS3

Motion - Movimento e transições

3 tokens

TokenValorOrigemUsar
--simec-duration-fast150ms
BS3
--simec-duration-normal300ms
BS3
--simec-easingease-in-out
BS3

Grid and breakpoints - Grade e pontos de quebra

8 tokens

TokenValorOrigemUsar
--simec-breakpoint-sm768px
BS3
--simec-breakpoint-md992px
BS3
--simec-breakpoint-lg1200px
BS3
--simec-container-sm750px
BS3
--simec-container-md970px
BS3
--simec-container-lg1170px
BS3
--simec-grid-columns12
BS3
--simec-grid-gutter30px
BS3

Download tokens - baixar tokens

Os mesmos tokens em cinco formatos, publicados junto com este site.

ArquivoPara que serveBaixar
tokens.cssVariáveis --simec-* para qualquer tela (link ou @import). Baixar
tokens.jsonOs mesmos tokens agrupados, para ferramentas e scripts. Baixar
tokens.scssVariáveis $simec-* para Bootstrap-sass / Sass. Baixar
tokens.lessVariáveis @simec-* para Bootstrap 3 / Less. Baixar
tokens.jsObjeto SIMEC_TOKENS para JavaScript, sem build. Baixar
<!-- CSS: variáveis --simec-* prontas para usar -->
<link rel="stylesheet" href="https://<endereço-publicado>/tokens.css">

// JSON: para ferramentas, scripts e sistemas
fetch("https://<endereço-publicado>/tokens.json").then((r) => r.json());

// SCSS / LESS: @import "tokens";  →  $simec-primary  |  @simec-primary
// JS:  <script src="tokens.js"></script>  →  SIMEC_TOKENS["simec-primary"]