Design System Analysis · external snapshot

Claude Homepage

Un contrato verificable de autenticación, planes, beneficios, FAQ, productos y responsive behavior observado en claude.com.

Identidad y tokens

La documentación neutral muestra fondo cálido, superficies, texto oscuro, CTA cálido y foco verde.

canvas
#F7F5F0
surface
#EDEAE3
ink
#171716
brand
#D97757
accent
#285C4D
border
#D8D4CB

Hero, auth y planes

hero · 56 / 500
Think fast, build faster
Try Claude
auth entry
Google
Continue
Email
Continue
SSO
Enterprise
plan card

Pro

$17
per month · annual
Try Claude

Inventario de componentes

Product navigation

Platform, Solutions, Pricing, Resources y acceso.

defaultmenu-opencompact

Hero auth entry

Google, email, SSO, privacy y descarga desktop.

focusloadingerror

Plan switcher

Individual frente a Team and Enterprise.

selectedfocus-visible

Plan card / FAQ

Free, Pro, Max y disclosures de ayuda.

recommendedexpanded

Responsive behavior

RangoComportamiento
320–543pxHeader compacto, hero vertical, auth apilada, planes y footer en una columna.
544–767pxPlan cards de dos columnas si caben y navegación flexible.
768–1011pxHero de dos zonas y plan grid adaptable.
1012–1279pxPlan grid de hasta tres columnas, FAQ limitada y footer en grupos.
1280px+Mayor aire exterior sin estirar cards o copy.

Procedencia y validación

La fuente expone hero, autenticación, app desktop, plan switcher, Free/Pro/Max, FAQ y grupos de productos/features/modelos/soluciones.

✓ PASSED — contrato, tokens JSON, componentes, preview y metadata presentes.

Fuente: Claude. Este documento es análisis externo, no documentación oficial.