extraído de airtable.com Ver sitio ↗

Airtable

A sober, editorial workflow-software interface anchored on white canvas and dark-ink type, where brand voltage comes from full-bleed signature cards in coral, dark green, peach, and dark navy that punctuate long-scroll explainer pages.

light mode blue 20 colores Light Mode

airtable.com

Color

light · 20 colors

Primary

#181d26

primary

#0d1218

primary-active

Ink

#181d26

ink

#333840

body

#41454d

muted

#ffffff

on-primary

Brand

#dddddd

hairline

#9297a0

border-strong

#aa2d00

signature-coral

#0a2e0e

signature-forest

#f5e9d4

signature-cream

#fcab79

signature-peach

#a8d8c4

signature-mint

#f4d35e

signature-yellow

#d9a441

signature-mustard

Surface

#ffffff

canvas

#f8fafc

surface-soft

#e0e2e6

surface-strong

#181d26

surface-dark

#1d1f25

surface-dark-elevated

Typography

2 familias

AaEeCcGg50.

Figtree sustituto de Haas Groot Disp

300 LightDesign that moves people.

400 RegularDesign that moves people.

500 MediumDesign that moves people.

600 SemiBoldDesign that moves people.

700 BoldDesign that moves people.

Body — Be Vietnam Pro

El sistema visual combina tipografía de alta calidad con colores cuidadosamente seleccionados. Cada decisión de diseño refleja la personalidad de la marca y comunica su propósito con claridad y precisión.

Role	Size	Weight	LH	Font
display xl	72px	700	1.0	Display
display lg	48px	600	1.1	Display
heading	32px	600	1.2	Display
body lg	20px	400	1.5	Body
body	16px	400	1.6	Body
label	14px	500	1.4	Display
mono	13px	400	1.6	Mono

Components

live recipes

Componente destacado

Airtable UI

La card usa la superficie del sistema con borde sutil y el radio real de la marca. El kicker en el color primario es el único acento de color sobre el fondo.

Spacing & shape

base 16px

Spacing scale

4px

8px

12px

16px

24px

32px

48px

96px

Radius family

8px

9999px

Principles

guardrails

Do

Usa los colores del sistema con intención y consistencia.
Mantén la tipografía dentro de la escala establecida.
Aplica los radios de borde según el contexto de cada componente.

Don't

No uses colores fuera del sistema sin justificación visual.
No mezcles familias tipográficas de categorías incompatibles.
No apliques sombras donde el sistema usa color plano.

Resources

copy & paste

:root {
  /* Color */
  --canvas: #ffffff;
  --surface: #f8fafc;
  --ink: #181d26;
  --ink-soft: #333840;
  --muted: #41454d;
  --primary: #181d26;
  --primary-hover: #0c0f13;
  --border: #dddddd;
  /* Typography */
  --font-display: 'Figtree', system-ui, sans-serif;
  --font-body: 'Be Vietnam Pro', Georgia, serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  /* Radius */
  --radius-btn: 8px;
  --radius-card: 8px;
  /* Spacing */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-96: 96px;
}

@theme {
  --color-canvas: #ffffff;
  --color-surface: #f8fafc;
  --color-ink: #181d26;
  --color-primary: #181d26;
  --color-primary-hover: #0c0f13;
  --color-border: #dddddd;
  --font-display: 'Figtree', system-ui, sans-serif;
  --font-body: 'Be Vietnam Pro', Georgia, serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --radius-btn: 8px;
  --radius-card: 8px;
}

{
  "color": {
    "canvas": "#ffffff",
    "surface": "#f8fafc",
    "ink": "#181d26",
    "primary": "#181d26",
    "border": "#dddddd",
    "primary-active": "#0d1218",
    "body": "#333840",
    "muted": "#41454d",
    "hairline": "#dddddd",
    "border-strong": "#9297a0"
  },
  "font": {
    "display": "Figtree",
    "body": "Be Vietnam Pro",
    "mono": "JetBrains Mono"
  },
  "radius": {
    "btn": "8px",
    "card": "8px"
  },
  "spacing": {
    "4px": "4px",
    "8px": "8px",
    "12px": "12px",
    "16px": "16px",
    "24px": "24px",
    "32px": "32px",
    "48px": "48px",
    "96px": "96px"
  }
}