El sistema Surco en una página.
Tokens, tipografía, componentes UI, bloques de marketing y producto, iconografía, layout, microcopy y accesibilidad. Diseñado para alimentar landing, dashboard, plugin WordPress y emails sin pérdida de coherencia.
01 · Logo
Lockup escalón vectorizado
Símbolo a la izquierda del wordmark, ratio 0.86 (símbolo a cap-height). 8 archivos SVG en /assets/logo/ — listos para hand-off.
lockup-color · sobre crema
lockup-mono-light · sobre tinta
lockup en terracota
lockup-mono-dark
mark-color (64)
mark-mono-light
favicon · 32 + 16
app-icon · 256
Archivos: surco-lockup-color · -mono-dark · -mono-light · surco-mark-color · -mono-dark · -mono-light · surco-favicon · surco-app-icon — todos SVG escalables sin pérdida.
02 · Color
Tokens semánticos & escalas 50–900
5 colores brand → 10 tonos cada uno → tokens semánticos aplicados. Todos los pares text-on-surface verifican WCAG AA en uso por defecto.
Escalas brandprimary · secondary · accent · neutral
primary
50#FBEFE9
100#F4D8C7
200#EAB39B
300#DD8A6A
400#CC6A48
500★#B14A2C
600#943C22
700#76301B
800#562218
900#391711
secondary
50#F2F1E5
100
200
300
400
500★#5C6A2A
600
700
800
900
accent
50
100
200
300
400★#D9A04B
500
600
700
800
900
neutral
50#FFFCF5
100
150
200
300
500
700
800
900★#1F1A12
950
Semantic colorssuccess · warning · danger · info
success
50
300
500#5C7A2A
700
warning
50
300
500#C28935
700
danger
50
300
500#B14A2C
700
info
50
300
500#385A72
700
Danger comparte hue con primary intencionadamente — la marca lleva la responsabilidad cromática del sistema. Warning usa accent-500.
Tokens semánticos aplicadossurface · text · border · brand
| Token | Light | Dark |
|---|---|---|
| surface-1 | neutral-50 | neutral-900 |
| surface-2 | neutral-100 | neutral-800 |
| surface-3 | neutral-150 | neutral-700 |
| text-primary | neutral-900 | neutral-50 |
| text-secondary | neutral-700 | neutral-200 |
| text-muted | neutral-500 | neutral-400 |
| border-subtle | tinta @ 8% | crema @ 8% |
| border-default | tinta @ 14% | crema @ 14% |
| bg-brand | primary-500 | primary-400 |
| focus-ring | primary @ 45% | primary-300 @ 55% |
03 · Spacing & radius
Escala 4px · radios reducidos
Spacing base 4px (13 pasos). Radios discretos — la marca privilegia la línea recta del escalón sobre la curva. Default en cards = lg, en botones = md, en inputs = md.
Spacing scale
space-1 · 4
space-2 · 8
space-3 · 12
space-4 · 16
space-5 · 20
space-6 · 24
space-8 · 32
space-10 · 40
space-12 · 48
space-16 · 64
space-20 · 80
space-24 · 96
Radius scale
none · 0
xs · 2
sm · 4
md · 8 ★
lg · 12 ★
xl · 16
full
★ defaults — md (8) en botones, inputs y badges; lg (12) en cards y paneles. full reservado para chips, switches y avatares.
04 · Shadows · elevación
Sombras con tinte cálido
Todas usan rgba(31,26,18,…) — nunca negro puro. La sombra debe sentirse como tierra arrojada, no como vacío.
none
xs · botones
sm · cards ★
md · hover
lg · popovers
xl · modal
05 · Tipografía
Source Serif 4 · Inter · JetBrains Mono
Source Serif 4 (var, opsz 8..60) para display y h1/h2 — voz periodística, sobria, fiable. Inter para body y h3/h4 — pantalla. JetBrains Mono para datos tabulares y código.
El surco que deja tu marca.
El surco que deja tu marca.
El surco que deja tu marca.
El surco que deja tu marca.
Conecta tu WordPress en un minuto.
Mide rankings desde el día uno.
Plugin WordPress nativo
Quality gate transparente
Conecta WordPress y Search Console. Surco se encarga del keyword research, redacción, internal linking, schema e imágenes.
Default del sistema. Usado en párrafos, cards, descripciones de feature y todo el dashboard de producto.
Usado en helpers de formularios, captions de gráficas y notas a pie.
Posición media · 30d
CTR 4.2% · POS_AVG 12.4 · 11 keywords ↑
06 · Componentes UI base
Botones, inputs, badges, alerts & more
Cada componente con todos los estados: default · hover · focus visible · active · disabled. Tamaños sm / md / lg donde aplica.
Button · variantes y tamañosbtn-primary · -secondary · -ghost · -danger · -link
primary · default
primary · hover
primary · focus
primary · active
primary · disabled
secondary
ghost
danger
link
loading
Inputs y form fieldsinput · textarea · select · checkbox · radio · switch
Sin barra final.
Falta el dominio.
No se puede modificar mientras hay artículos en cola.
Cardcard · card-interactive
Posición media · 30d
Reportada por Google Search Console.
Card interactiva
Hover sube la elevación y endurece el borde.
Badge / Tag6 variantes
Borrador
Recomendado
Publicado
En revisión
Error
Info
Alert / Bannerinfo · success · warning · danger
Conexión a Search Console pendiente
Surco mide tus rankings cuando conectes GSC. Tarda 2 minutos.
Plugin instalado correctamente
surco-corp.com ya está conectado. Empezamos el research mañana.
Cuota mensual al 80%
Te quedan 2 artículos del plan Starter. Sube a Pro para no parar.
No pudimos publicar el artículo
El plugin pide actualización a v1.4. Reintenta tras actualizar.
Tabs.tabs · .tab
Accordion.accordion-item
Con un plugin oficial: lo subes desde Plugins → Añadir nuevo, o lo instalamos por ti vía un enlace. Cero código.
Tooltip · Avatar · Progress · Skeletonhelpers
Sembrado hace 4 días
JS
MR
CL
Cuota mensual
Modal / Dialogelevación xl
Eliminar sitio
Se cancelarán los artículos en cola. La acción es irreversible.
Toastposición bottom-right
Artículo publicado
«10 ideas para tu blog» en surco-corp.com
Empty stateinvita a la acción
Aún no hay artículos
Conecta tu WordPress y Surco sembrará el primero en 24 h.
07 · Componentes de marketing
Bloques para landing y comparativas
Los bloques que consume directamente la landing del Brief 03.
Pre-launch · waitlist abierta
El surco que deja tu marca en Google.
Blog SEO automatizado para tu WordPress. En español, con plugin de un clic, métricas reales y sin trucos. Desde 19 € al mes.
Posición media · 30d▲ 4,1
12,4
10 ideas para tu blog
+ 2,1
Cómo elegir tema WordPress
en revisión
Tabla comparativa · Surco vs SEObotmarketing/compare
| Factor | Surco | SEObot |
|---|---|---|
| Idioma UI | Español nativo | Inglés |
| Onboarding WP | Plugin one-click | REST API manual |
| Tier de entrada | 19 €/mes | $49/mes |
| WooCommerce-aware | Sí | No |
| Quality gate visible | Sí | No |
| Backlinks PBN | No (white hat) | Sí (riesgo) |
Hobby
19 € / mes
- 4 artículos al mes
- 1 sitio
- Reporting GSC
StarterRecomendado
39 € / mes
- 10 artículos al mes
- 1 sitio
- Internal linking
- Reporting GSC
Pro
79 € / mes
- 30 artículos al mes
- 3 sitios
- WooCommerce-aware
Studio
179 € / mes
- 80 artículos al mes
- 10 sitios
- Soporte prioritario
Surco
Blog SEO automatizado para WordPress. Construido en España por Websalia.
Producto
08 · Componentes de producto
Dashboard cliente
Sidebar, top app bar, métricas, gráficas, tabla y status — todos consumiendo los mismos tokens.
Iniciosurco-corp.comCL
Tu surco esta semana
3 artículos sembrados, 11 keywords subiendo. Próxima publicación: martes.
Posición media · 30dGSC
12,4
▲ 4,1 posiciones
Clicks · 30dGSC
2.314
▲ 18%
CTR medio · 30dGSC
4,2 %
▲ 0,3 pp
Artículos recientesdata-table
| Título | Estado | Pos. | Clicks | Sembrado |
|---|---|---|---|---|
| 10 ideas para tu blog que sí funcionan en 2026 | Publicado | 8,2 | 412 | hace 4 días |
| Cómo elegir tema WordPress sin equivocarte | En revisión | — | — | hoy |
| WooCommerce vs Shopify para PYMEs | Borrador | — | — | ayer |
| SEO local en Madrid: la guía honesta | Error | — | — | 2 may |
09 · Iconografía
Lucide · stroke 1.75 · 4 tamaños
Recomendación: Lucide (MIT). Stroke 1.75px (un punto medio entre 1.5 y 2 — encaja con el grosor del símbolo escalón a tamaño UI). Color por defecto text-secondary; en estados activos pasa a primary-500.
dashboard
sites
articles
link-hub
settings
billing
search
plus
edit
trash
check
alert
info
external-link
download
upload
refresh
calendar
chart
user
16
20
24 ★
32
10 · Layout patterns
Containers · grid · breakpoints
Container max-widths
| prose | 640 px | artículos, FAQ |
| narrow | 768 px | login, formularios largos |
| default ★ | 1080 px | dashboard cliente |
| wide | 1280 px | landing, marketing |
| full | 1440 px | hero edge-to-edge |
Breakpoints
| sm | < 640 | mobile |
| md | 640 – 1024 | tablet |
| lg | 1024 – 1440 | desktop |
| xl | > 1440 | large |
Grid 12 columnas. Gutter space-6 (24) en desktop, space-4 (16) en tablet, space-3 (12) en mobile. Section spacing entre bloques: space-20 (80) desktop, space-12 (48) mobile.
11 · Microcopy & voz
Cómo escribimos en producto
Convenciones
- Sentence case en todos los títulos. Nunca Title Case salvo nombres propios (WordPress, Surco, Google).
- Tutea. «Conecta tu WordPress», no «Conecte su WordPress».
- Fechas: «2 de mayo de 2026» · «hace 3 días» · «el martes pasado».
- Números: separadores españoles (1.234,56). Porcentajes con espacio (4,2 %).
- Sin hype: evita «revolucionario», «10x», «increíble».
Errores empáticos · ejemplos
No pudimos publicar el artículo
El plugin necesita actualizarse a v1.4. Reintenta tras actualizar →
No: «Error 503: el sistema falló.» · Sí: «No pudimos publicar el artículo. Reintenta en un par de minutos o avísanos.»
12 · Accesibilidad
WCAG AA, focus visible, motion
Contraste
Mínimo 4.5:1 body, 3:1 large text. Pares verificados:
| tinta @ crema | 15.2 : 1 | AAA |
| terracota @ crema | 5.4 : 1 | AA |
| crema @ terracota | 5.4 : 1 | AA |
| muted @ crema | 4.6 : 1 | AA |
Focus visible
Outline 2px de focus-ring con offset 2px. Obligatorio en todo elemento interactivo.
Hit target & motion
- Mínimo 44×44 px en mobile.
- Botón md (40) permitido en desktop por densidad.
- prefers-reduced-motion apaga skeleton, sparkline animado y modales.
13 · Mockups canónicos
El sistema, aplicado
Tres piezas que demuestran tokens, tipografía y componentes funcionando juntos.
a · Hero de landingconsume nav · btn · badge · card
Pre-launch
El surco que deja tu marca en Google.
Blog SEO automatizado para tu WordPress. En español, sin trucos.
Posición media · 30dGSC
12,4
▲ 4,1 posiciones
b · Card métrica del dashboardconsume tokens + chart + status
Posición media · 30d▲ 4,1
12,4
desde el día 1 conectado a GSC
10 ideas para tu blog+2,1
c · Email transaccionalHTML email-safe · Source Serif 4 opcional
Surco
Informe semanal14 may 2026
Tu surco esta semana: 3 sembrados, 11 keywords subiendo.
Posición media bajó de 16,5 a 12,4 (▲ 4,1). El artículo «10 ideas para tu blog» ya entra en CTR del 4%.
Recibes este email porque tienes una suscripción activa en Surco. Construido en España por Websalia.