@ft-consult/foundation · inspeção

Foundation Tokens

Demonstração mínima para inspeção de Foundation. Todos os valores são do pacote, sem cópia local.

Cores — Primitives

Neutral

neutral-0#ffffff
neutral-25#fbfcfe
neutral-50#f7faff
neutral-100#e8edf3
neutral-200#d8e0ea
neutral-300#c5cfda
neutral-500#718094
neutral-600#61708a
neutral-700#3d4a5a
neutral-900#10203a

Dark (superfície técnica)

dark-800#172a48
dark-900#0e1b33
dark-950#071221

Status

blue-50#eff8ff
blue-100#d9eeff
blue-700#00679a
green-50#effbf5
green-200#c5efd7
green-700#0f7145
amber-50#fff8e8
amber-200#f9dfa0
amber-800#805304
red-50#fff3f2
red-200#ffd0cb
red-700#b42f26
violet-50#fcf4fe
violet-200#f0caf7
violet-700#8c319d

Cores — Semânticas

surface.application#f3f7fc
surface.primary#ffffff
surface.secondary#f8fafc
surface.technical#071221
surface.technicalElevated#0e1b33
content.primary#10203a
content.secondary#61708a
content.muted#728092
content.inverse#f7faff
status.information#00679a
status.success#168653
status.warning#b87808
status.error#d53d32
status.critical#a3261e
status.offline#61708a
status.unavailable#728092
status.disconnected#61708a
status.selected#008ed6
status.synchronizing#1478b5

Tipografia

display48/52 — texto de exemplo
page32/38 — texto de exemplo
section22/28 — texto de exemplo
overlay20/26 — texto de exemplo
subheading17/23 — texto de exemplo
card16/22 — texto de exemplo
kpiLarge32/36 — texto de exemplo
kpiCompact22/26 — texto de exemplo
body15/23 — texto de exemplo
secondary14/21 — texto de exemplo
compact13/18 — texto de exemplo
meta12/17 — texto de exemplo
tableCompact12/16 — texto de exemplo
code13/19 — texto de exemplo
action14/20 — texto de exemplo

Breakpoints

mobile320px
tablet768px
notebook1024px
desktop1440px

Raios

radius.sm (—px alias)4px
radius.md (—px alias)8px
radius.lg (—px alias)12px
radius.xl (—px alias)22px

Bordas

border.subtle#d8e0ea
border.default#bcc6d2
border.strong#728092
border.onDarkrgb(255 255 255 / 0.13)
border.onDarkInteractivergb(143 225 255 / 0.42)

Elevação

none
surface
interactive
floating
overlay

Backdrop

default
strong
defaultDark
strongDark

Densidades

compact: 32px

Tabela técnica e controles compactos

standard: 36px

Campos e botões padrão — uso predominante

comfortable: 40px

Jornadas orientadas e áreas de cliente

Foco

color-focus: #00abff

outline: 2px solid #00abff

Camadas e Breakpoints operacionais

layers.appChrome100
layers.modal500