Colores
La paleta de colores de sweetgreen.com
sweetgreen.com construye sus páginas sobre #f4f3e7 con texto #0e150e y sin un único color de acento. Los 5 colores de abajo se midieron en el sitio en vivo.
Medido en sweetgreen.com hace 32 días.
Paleta
5 colores| Colores | Rol | Hex | RGB |
|---|---|---|---|
background | Page background | #f4f3e7 | rgb(244 243 231) |
surface | Cards, panels, raised or recessed surfaces | #d8e5d6 | rgb(216 229 214) |
foreground | Primary text | #0e150e | rgb(14 21 14) |
muted-foreground | Secondary text, captions | #8c8c82 | rgb(140 140 130) |
border | Hairlines, dividers, input borders | #0e150e | rgb(14 21 14) |
- Texto sobre el fondo de la página
- 16.62:1 · cumple WCAG AA
Variables CSS
Cada color como propiedad personalizada, con el nombre de su rol. El bloque oscuro aparece cuando el sitio tiene tema oscuro.
:root {
--color-background: #f4f3e7;
--color-surface: #d8e5d6;
--color-foreground: #0e150e;
--color-muted-foreground: #8c8c82;
--color-border: #0e150e;
}Para agentes de IA
El paquete es texto plano, sin clave: descarga DESIGN.md o entrega el paquete completo a Claude Code, Cursor o Copilot con el servidor MCP.
curl -s https://stylepack.ai/packs/sweetgreen.com/DESIGN.mdPreguntas
¿Cuál es el código hex de sweetgreen.com?
El color de acento de sweetgreen.com es #0e150e; el fondo de la página es #f4f3e7 y el color principal del texto, #0e150e. Cada uno se mide en la página renderizada, así que es lo que ven los visitantes, no un valor de una guía de estilo.
¿Cómo uso los colores de sweetgreen.com en Tailwind o CSS?
Copia las variables CSS o el tema de Tailwind v4 de esta página, o descarga el paquete de diseño: incluye tokens.json (tokens de diseño W3C), tokens.css y tailwind.css con los mismos valores.