Ibmec Jr. Soluções
Formal / system-design

O sistema por trás
da direção.

Tokens, regras e estados que dão consistência à experiência Ibmec Jr Soluções. Uma linguagem técnica com espaço para o humano.

Cores / chromatic logic

Profundidade com pontos de luz.

Teal estrutura a conversa. Mint sinaliza possibilidade. Aqua marca ação.

deep#011126
deep2#0D0D0D
ink#424A59
teal#424A59
aqua#A6A5A4
mint#F2F2F0
fog#A6A5A4
paper#F2F2F0
white#FFFFFF
Tipografia / voice system

Noto Serif Grantha, em todas as suas vozes.

Display / 800 / -5.5%
Direção clara.
Body / 500 / 155%

Complexidade não desaparece. Ela ganha contorno, prioridade e um caminho para seguir.

Technical label / mono / 700
DIAGNÓSTICO → DESENHO → DECISÃO
Layout / spatial rules

Ritmo que organiza atenção.

Spacing unit04 px

Base para micro espaçamentos e alinhamentos.

Section rhythm88 → 176 px

Respiração responsiva entre capítulos.

Content grid12 cols

Gutter de 16 → 32 px · max 1240 px.

12-column grid · colunas visíveis apenas na documentação

Components / states

Ação com resposta.

Button / primary
Default Hover
Feedback / success
Mensagem recebidaRetorno em até dois dias úteis.
Input / states
Portable artifact

Token document.

design-tokens.json
{
  "meta": {
    "name": "Ibmec Jr Soluções / System Design",
    "version": "1.0.0",
    "font": "Noto Serif Grantha",
    "principle": "Complexidade, com direção."
  },
  "color": {
    "deep": "#011126",
    "deep2": "#0D0D0D",
    "ink": "#424A59",
    "teal": "#424A59",
    "aqua": "#A6A5A4",
    "mint": "#F2F2F0",
    "fog": "#A6A5A4",
    "paper": "#F2F2F0",
    "white": "#FFFFFF"
  },
  "typography": {
    "displayFamily": "Figtree, Avenir Next, Segoe UI, sans-serif",
    "fontFamily": "\"Noto Serif Grantha\", Avenir Next, Segoe UI, sans-serif",
    "monoFamily": "SFMono-Regular, Cascadia Code, Roboto Mono, monospace",
    "display": {
      "weight": 800,
      "tracking": "-0.055em",
      "lineHeight": 0.95
    },
    "body": {
      "weight": 500,
      "tracking": "-0.01em",
      "lineHeight": 1.55
    },
    "label": {
      "weight": 700,
      "tracking": "0.16em",
      "lineHeight": 1.2
    }
  },
  "spacing": {
    "unit": "4px",
    "scale": [
      "4px",
      "8px",
      "12px",
      "16px",
      "24px",
      "32px",
      "48px",
      "64px",
      "80px",
      "96px"
    ],
    "section": "clamp(88px, 12vw, 176px)",
    "gutter": "clamp(20px, 5vw, 80px)",
    "contentMax": "1240px"
  },
  "breakpoints": {
    "sm": "640px",
    "md": "768px",
    "lg": "1024px",
    "xl": "1280px"
  },
  "grid": {
    "columns": 12,
    "gutter": "clamp(16px, 2vw, 32px)"
  },
  "radius": {
    "sm": "8px",
    "md": "14px",
    "lg": "24px",
    "pill": "999px"
  },
  "motion": {
    "ease": "cubic-bezier(.2,.7,.2,1)",
    "reveal": "800ms",
    "hover": "240ms"
  }
}