:root {
/* superficies: el fondo es CREMA, no blanco */
--color-background: #FFFCEC;
--color-background-soft: #FFFADD;
--color-surface: #FFFFFF; /* material, no superficie de página */
--color-surface-inverse: #3139FB;
--color-surface-glass: rgba(0, 0, 0, 0.85);
--color-surface-glass-hover: rgba(0, 0, 0, 0.65);
/* marca: un solo azul */
--color-primary: #3139FB;
--color-primary-deep: #2702C2;
--color-primary-hover-veil: rgba(23, 3, 148, 0.5);
--color-primary-lavender: #C6C8F9;
/* tinta */
--color-text-primary: #000000;
--color-text-secondary: #696969; /* el ÚNICO gris, y es neutro */
--color-text-muted: #A6A6A6;
--color-text-on-primary: #FFFCEC; /* el crema vuelve como tinta */
--color-text-on-primary-soft: #FFFADD;
--color-text-on-glass: #FFFFFF;
--color-text-on-deep: #FFFFFF;
/* bordes: 2px, nunca hairlines */
--color-border: #3139FB;
--color-border-width: 2px;
--color-border-reserved: rgba(0, 0, 0, 0);
/* estados (derivados) */
--color-success: #12B76A;
--color-success-bg: #E6F8EF;
--color-info: #3139FB;
--color-info-bg: #E7E8FF;
--color-error: #F0384A;
--color-error-bg: #FFE6E9;
--color-warning: #F5A524;
--color-warning-bg: #FFF3E0;
--font-display: "Plus Jakarta Sans";
--font-body: "Plus Jakarta Sans";
--font-mono: "Space Mono";
/* radios: NO hay píldoras */
--radius-xs: 4px;
--radius-sm: 8px;
--radius-control: 10px;
--radius-card: 16px;
--radius-cta: 22px;
/* las SEIS sombras del sitio entero */
--shadow-card: 0 2px 2px rgba(0, 0, 0, 0.10);
--shadow-button: 0 5px 5px rgba(0, 0, 0, 0.10);
--shadow-button-hover: 0 7px 15px rgba(0, 0, 0, 0.20);
--shadow-button-focus: 0 2px 6px rgba(0, 0, 0, 0.10);
--shadow-glass: 0 2px 8px rgba(0, 0, 0, 0.25);
--shadow-keycap: 0 2px 5px rgba(0, 0, 0, 0.20);
/* espaciado */
--space-base: 2px;
--space-xs: 6px;
--space-sm: 8px;
--space-md: 10px;
--space-lg: 16px;
--space-xl: 20px;
--space-2xl: 26px;
--space-3xl: 32px; /* --padding, token real */
--space-4xl: 64px; /* --navbar-height, token real */
--space-section: 128px;
/* layout: las 8 variables reales de arc.net */
--padding: 32px;
--max-width: 1280px;
--navbar-height: 64px;
--mobile-cta-height: 56px;
/* motion: scale, no translate */
--duration-fast: 150ms;
--duration-glass: 200ms;
--ease-glass: ease-in-out;
}
/* el festón: la firma de arc.net, en dos líneas de CSS */
.scallop {
height: 13px;
background: radial-gradient(circle 13px at 13px 0px, #3139FB 13px, transparent 13.5px)
repeat-x 0 0 / 26px 13px;
}
@theme {
--color-background: #FFFCEC;
--color-background-soft: #FFFADD;
--color-surface: #FFFFFF;
--color-surface-inverse: #3139FB;
--color-primary: #3139FB;
--color-primary-deep: #2702C2;
--color-primary-lavender: #C6C8F9;
--color-text-primary: #000000;
--color-text-secondary: #696969;
--color-text-muted: #A6A6A6;
--color-text-on-primary: #FFFCEC;
--color-text-on-primary-soft: #FFFADD;
--color-border: #3139FB;
--color-success: #12B76A;
--color-success-bg: #E6F8EF;
--color-info: #3139FB;
--color-info-bg: #E7E8FF;
--color-error: #F0384A;
--color-error-bg: #FFE6E9;
--color-warning: #F5A524;
--color-warning-bg: #FFF3E0;
--font-display: "Plus Jakarta Sans", "Marlin Soft SQ", system-ui, sans-serif;
--font-body: "Plus Jakarta Sans", "Marlin Soft SQ", system-ui, sans-serif;
--font-mono: "Space Mono", "ABC Favorit Mono", ui-monospace, monospace;
--radius-xs: 4px;
--radius-sm: 8px;
--radius-control: 10px;
--radius-card: 16px;
--radius-cta: 22px;
--shadow-card: 0 2px 2px rgba(0, 0, 0, 0.10);
--shadow-button: 0 5px 5px rgba(0, 0, 0, 0.10);
--shadow-button-hover: 0 7px 15px rgba(0, 0, 0, 0.20);
--shadow-button-focus: 0 2px 6px rgba(0, 0, 0, 0.10);
--shadow-glass: 0 2px 8px rgba(0, 0, 0, 0.25);
--shadow-keycap: 0 2px 5px rgba(0, 0, 0, 0.20);
--spacing-base: 2px;
--spacing-xs: 6px;
--spacing-sm: 8px;
--spacing-md: 10px;
--spacing-lg: 16px;
--spacing-xl: 20px;
--spacing-3xl: 32px;
--spacing-4xl: 64px;
--spacing-section: 128px;
--container-page: 1280px;
}
{
"colors": {
"primary": "#3139FB",
"primary-deep": "#2702C2",
"primary-hover-veil": "#170394",
"primary-lavender": "#C6C8F9",
"background": "#FFFCEC",
"background-soft": "#FFFADD",
"surface": "#FFFFFF",
"surface-inverse": "#3139FB",
"surface-glass": "rgba(0, 0, 0, 0.85)",
"surface-glass-hover": "rgba(0, 0, 0, 0.65)",
"text-primary": "#000000",
"text-secondary": "#696969",
"text-muted": "#A6A6A6",
"text-on-primary": "#FFFCEC",
"text-on-primary-soft": "#FFFADD",
"text-on-glass": "#FFFFFF",
"text-on-deep": "#FFFFFF",
"border": "#3139FB",
"success": "#12B76A",
"success-bg": "#E6F8EF",
"info": "#3139FB",
"info-bg": "#E7E8FF",
"error": "#F0384A",
"error-bg": "#FFE6E9",
"warning": "#F5A524",
"warning-bg": "#FFF3E0"
},
"typography": {
"display-xl": {
"fontFamily": "Marlin Soft SQ",
"substitute": "Plus Jakarta Sans",
"fontSize": "45.51px",
"fontWeight": 700,
"lineHeight": "0.93",
"letterSpacing": "-0.04em"
},
"headline": {
"fontFamily": "Marlin Soft SQ",
"fontSize": "28px",
"fontWeight": 700,
"lineHeight": "1.07",
"letterSpacing": "-0.05em"
},
"cta": {
"fontFamily": "ABC Oracle",
"fontSize": "24px",
"fontWeight": 400,
"lineHeight": "1.2",
"letterSpacing": "normal"
},
"body": {
"fontFamily": "Inter",
"fontSize": "17px",
"fontWeight": 500,
"lineHeight": "1.5",
"letterSpacing": "normal"
},
"ui": {
"fontFamily": "Marlin Soft SQ",
"fontSize": "14px",
"fontWeight": 500,
"letterSpacing": "-0.02em"
},
"button": {
"fontFamily": "Marlin",
"fontSize": "14px",
"fontWeight": 600,
"lineHeight": "29px",
"letterSpacing": "-0.01em"
},
"mono-caps": {
"fontFamily": "ABC Favorit Mono",
"substitute": "Space Mono",
"fontSize": "12px",
"fontWeight": 700,
"letterSpacing": "0.05em",
"textTransform": "uppercase"
}
},
"rounded": {
"xs": "4px",
"sm": "8px",
"control": "10px",
"card": "16px",
"cta": "22px",
"full": "100%"
},
"shadow": {
"card": "0 2px 2px rgba(0, 0, 0, 0.10)",
"button": "0 5px 5px rgba(0, 0, 0, 0.10)",
"button-hover": "0 7px 15px rgba(0, 0, 0, 0.20)",
"button-focus": "0 2px 6px rgba(0, 0, 0, 0.10)",
"glass": "0 2px 8px rgba(0, 0, 0, 0.25)",
"keycap": "0 2px 5px rgba(0, 0, 0, 0.20)"
},
"spacing": {
"base": "2px",
"xs": "6px",
"sm": "8px",
"md": "10px",
"lg": "16px",
"xl": "20px",
"2xl": "26px",
"3xl": "32px",
"4xl": "64px",
"section": "128px",
"page-padding": "32px",
"max-width": "1280px",
"navbar-height": "64px",
"mobile-cta-height": "56px"
},
"motion": {
"duration-fast": "150ms",
"duration-glass": "200ms",
"ease-glass": "ease-in-out",
"hover-gesture": "scale(1.02) en botones, scale(1.05) en nav. NUNCA translateY"
},
"components": {
"cta-glass": {
"height": "76px",
"padding": "8px 22px 8px 8px",
"gap": "16px",
"rounded": "22px",
"background": "rgba(0, 0, 0, 0.85)",
"backdropFilter": "blur(3.0483298301696777px)",
"boxShadow": "0 2px 8px rgba(0, 0, 0, 0.25)",
"hover": { "background": "rgba(0, 0, 0, 0.65)", "arrow": "translateX(2px)" }
},
"button-solid": {
"height": "45px",
"padding": "8px 24px",
"gap": "10px",
"rounded": "10px",
"background": "#2702C2",
"color": "#FFFFFF",
"boxShadow": "0 5px 5px rgba(0, 0, 0, 0.1)",
"hover": { "transform": "scale(1.02)", "boxShadow": "0 7px 15px rgba(0, 0, 0, 0.2)" },
"focus": { "transform": "scale(1.02)", "boxShadow": "0 2px 6px rgba(0, 0, 0, 0.1)" }
},
"nav-item": {
"padding": "8px 10px",
"gap": "6px",
"rounded": "8px",
"border": "1px solid rgba(0, 0, 0, 0)",
"hover": { "transform": "scale(1.05)", "background": "rgba(23, 3, 148, 0.5)" }
},
"card": {
"background": "#FFFCEC",
"color": "#3139FB",
"rounded": "16px",
"padding": "20px",
"gap": "20px",
"border": "none",
"boxShadow": "0 2px 2px rgba(0, 0, 0, 0.1)",
"overflow": "hidden"
},
"handle-badge": {
"background": "#FFFFFF",
"color": "#3139FB",
"border": "2px solid #3139FB",
"rounded": "8px",
"padding": "4px 16px"
},
"keycap": {
"size": "53px",
"background": "#C6C8F9",
"border": "4px solid #FFFFFF",
"rounded": "8px",
"boxShadow": "0 2px 5px rgba(0, 0, 0, 0.2)"
}
}
}
# DESIGN.md - Arc
> Sistema extraído de https://arc.net (home, julio 2026).
> Medido en vivo con Puppeteer (1600x900). Arc no tokeniza el color: su :root sólo
> declara OCHO variables, todas de layout. El resto vive dentro de Stitches, que emite
> clases hasheadas (.c-koCplY, .c-bCeQxv, .c-cYdlNN) cuyas reglas se leyeron de los
> <style> inyectados (~236 KB de CSS inline).
## 1. Tema Visual
Arc es un navegador que se niega a parecer software. La primera decisión, y la que lo
explica casi entero, es que NO HAY BLANCO DE FONDO Y NO HAY GRIS DE PRODUCTO. La
superficie con más área es un crema, #FFFCEC (score 11.3M contra 8.3M del blanco, que
sólo aparece dentro de tarjetas y botones). Es papel, no pantalla. Contra ese papel se
estampa un azul eléctrico saturado, #3139FB, que ocupa bandas completas: la barra de
navegación, la franja de testimonios, el pie. El sitio no "usa" el azul como acento;
se BAÑA en él por tramos.
La transición entre esas dos superficies es su firma: las bandas no se cortan en recto.
Se cortan con un BORDE FESTONEADO, una sierra de semicírculos que hace que la banda azul
parezca un trozo de papel recortado con tijeras dentadas. Es un gesto de manualidad
puesto en el producto más técnico posible.
## 2. Color
Azul Arc #3139FB bandas, tinta sobre crema, bordes de badge, links
Azul profundo #2702C2 el relleno del botón sólido
Velo de hover #170394 al 50% de alfa: el hover del nav (HUNDE, no aclara)
Lavanda #C6C8F9 la tecla de atajo
Crema #FFFCEC EL FONDO. Nunca #FFFFFF
Crema suave #FFFADD texto sobre las bandas azules
Blanco #FFFFFF SÓLO dentro de objetos
Tinta #000000 negro puro. Arc no lo suaviza
Gris #696969 el ÚNICO gris, y es NEUTRO (sin azul dentro)
Contraste:
#000000 sobre #FFFCEC ........ 20.4:1 AAA
#3139FB sobre #FFFCEC ......... 6.6:1 AA
#FFFCEC sobre #3139FB ......... 6.6:1 AA <- el azul aguanta en las dos direcciones
#FFFFFF sobre #2702C2 ......... 11.2:1 AAA
#696969 sobre #FFFCEC ......... 5.3:1 AA
## 3. Tipografía
Original: Marlin Soft SQ -> Plus Jakarta Sans (Google substitute)
Original: ABC Favorit Mono -> Space Mono (Google substitute)
Marlin Soft SQ es una geométrica de terminales blandos y bowls escuadrados. Plus Jakarta
Sans es la única de Google Fonts que combina esqueleto geométrico con bowls escuadrados y
cortes rectos, y aguanta el tracking -0.04em a peso 700 sin cerrar las contraformas.
Se descartaron Outfit (tubular a 700), Poppins (círculo puro) y Figtree (neutra).
Space Mono no es realmente una sustitución: ARC YA LA SIRVE en su propio @font-face.
display xl 45.51px / 700 / lh 0.93 / -0.04em
headline 28px / 700 / lh 1.07 / -0.05em
cta 24px / 400 / lh 1.2 / normal
body 17px / 500 / lh 1.5 / normal
ui 14px / 500 / / -0.02em
button 14px / 600 / lh 29px / -0.01em
mono caps 12px / 700 / / +0.05em UPPERCASE
La inversión es total: el display se cierra (-0.04em), el metadato se abre (+0.05em),
y el cuerpo se queda quieto en cero.
## 4. Componentes
CTA DE CRISTAL (.c-koCplY) — el objeto más trabajado del sitio
height: 76px (fijo, no derivado del padding)
padding: 8px 22px 8px 8px ASIMÉTRICO: el icono va pegado a la izquierda
gap: 16px
border-radius: 22px
background: rgba(0, 0, 0, 0.85)
backdrop-filter: blur(3.0483298301696777px) <- valor literal del sitio
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25)
font: 24px / 400 / lh 28.8px
transition: background 0.2s ease-in-out
hover: background rgba(0, 0, 0, 0.65) <- ACLARA, no oscurece
hover .arrow: translateX(2px) <- animación INDEPENDIENTE, 0.2s ease-in-out
tamaño base: 58px / radio 16px / gap 14px / padding 8px 18px 8px 8px
BOTÓN SÓLIDO (.c-bCeQxv, size large)
height: 45px | padding: 8px 24px | gap: 10px | border-radius: 10px
font: 14px / 600 / lh 29px / -0.01em
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1)
transition: transform 0.15s, box-shadow 0.15s ease-out
hover: scale(1.02) + 0 7px 15px rgba(0,0,0,0.2) <- ESCALA, no levanta
focus: scale(1.02) + 0 2px 6px rgba(0,0,0,0.1) <- la sombra del foco es MÁS PEQUEÑA
primaryLightA: bg #2702C2 / color #FFFFFF
primaryLight: bg #FFFFFF / color #2702C2
ITEM DE NAV (.c-bsQNRu)
padding: 8px 10px | gap: 6px | border-radius: 8px
border: 1px solid rgba(0, 0, 0, 0) <- borde reservado, invisible
font: 14px / 500 / -0.02em
transition: transform 0.15s, background 0.15s
hover: scale(1.05) + background rgba(23, 3, 148, 0.5) <- HUNDE
TARJETA (.c-cYdlNN)
background: #FFFCEC <- crema: del MISMO color que el papel
color: #3139FB <- el texto de la tarjeta es AZUL
border-radius: 16px (1rem)
border: NINGUNO <- el contraste crema/azul ya la recorta
gap: 20px (1.25rem)
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1) <- grosor de papel, no altura
overflow: hidden
Se apoya sobre la banda AZUL. Es un recorte del papel de fondo pegado sobre el color.
Si la pones sobre crema, deja de funcionar y hay que darle borde.
BADGE DE HANDLE (.c-bQeGRQ)
background: #FFFFFF | color: #3139FB
border: 2px solid #3139FB <- DOS píxeles. Arc no tiene hairlines
border-radius: 8px | padding: 4px 16px
font: mono 12px / 700 / +0.05em / UPPERCASE
TECLA (.c-iRWeVN)
53x53px | background: #C6C8F9 | border: 4px solid #FFFFFF
border-radius: 8px | box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2)
## 5. Elevación
Las SEIS sombras de todo el sitio. Ninguna teñida, ninguna con spread, ninguna
con más de 15px de blur:
0 2px 2px rgba(0,0,0,.10) la tarjeta
0 5px 5px rgba(0,0,0,.10) el botón en reposo
0 7px 15px rgba(0,0,0,.20) el botón en hover <- EL TECHO DEL SISTEMA
0 2px 6px rgba(0,0,0,.10) el botón en foco <- más BAJA que el reposo
0 2px 8px rgba(0,0,0,.25) la píldora de cristal
0 2px 5px rgba(0,0,0,.20) la tecla
Radios: 4 / 8 / 10 / 16 / 22. NINGUNA PÍLDORA. El radio máximo es 22px sobre 76px
de alto, lo que deja el botón claramente rectangular.
## 6. Motion
--duration-fast: 150ms (transform, box-shadow, background de controles)
--duration-glass: 200ms (el CTA de cristal y su flecha)
--ease-glass: ease-in-out
Los controles hacen scale(), NUNCA translateY(). Botón 1.02, nav 1.05.
El CTA de cristal tiene DOS animaciones en un solo gesto: el fondo cambia y la
flecha se desplaza 2px, cada una con su propia transición.
## 7. Do / Don't
SÍ:
- Crema #FFFCEC como fondo. El blanco es un material, no una superficie.
- Invierte bandas COMPLETAS a azul y pon la tinta en crema.
- Corta las bandas con el festón (radial-gradient de semidiscos de 13px cada 26px).
- Anima con scale(), no con translateY().
- Techo de sombra: 0 7px 15px rgba(0,0,0,.2).
- Tarjeta: 2px de blur y ningún borde.
- Badges con borde de 2px.
NO:
- #FFFFFF como fondo de sección (borra la marca entera).
- Grises azulados (#F1F5F9, #64748B). El único gris es #696969, neutro.
- Píldoras (border-radius: 999px). El radio máximo es 22px.
- translateY en hover. Arc escala.
- Sombras largas y difusas (0 20px 60px).
- Tracking negativo en el cuerpo.
- Que el cristal oscurezca en hover: aclara (.85 -> .65).
## Anexo: Stack técnico
- React + Stitches (CSS-in-JS). ~236 KB de CSS inyectado en <style>, cero hojas .css
externas: por eso las reglas :hover sólo se leen del DOM.
- El :root del documento tiene 8 variables, TODAS de layout:
--padding: 32px, --max-width: 1280px, --navbar-height: 64px,
--mobile-cta-height: 56px, --announcement-banner-height: 0px, + safe-area.
- Tokens de Stitches detectados: --colors-brandBlue, --colors-brandOffwhite,
--colors-gray7, --fonts-softSans, --fonts-referralSans, --fonts-body, --fonts-mono.
- 10 familias en @font-face, todas self-hosted: Marlin, Marlin Soft Basic,
Marlin Soft SQ, Sohne Breit, Sohne Breit Extrafett, EB Garamond, ABC Favorit Mono,
ABC Oracle, Space Mono, Inter/InterVariable.
- Radios medidos: 8px (9 nodos), 10px (3), 4px (1), 22px (1), 16px (1rem).
Cero border-radius: 999px en todo el sitio.
- Bordes: 2px solid #3139FB (4 nodos) y 1px solid rgba(0,0,0,0) (5 nodos, reservado).
El sistema NO tiene hairlines grises.
- Focus global: a:focus-visible, button:focus-visible { outline: 2px solid
var(--colors-gray7); outline-offset: 2px; box-shadow: none; }
- (no detectado): variables CSS de color en el :root, rejilla con columnas, escala de
sombras tokenizada, estados semánticos con superficie, inputs, modo oscuro.
