{"id":4484,"date":"2025-08-12T05:35:28","date_gmt":"2025-08-12T05:35:28","guid":{"rendered":"https:\/\/shapecreativestudio.com\/?page_id=4484"},"modified":"2026-10-11T06:14:46","modified_gmt":"2026-10-11T06:14:46","slug":"design-systems","status":"publish","type":"page","link":"https:\/\/shapecreativestudio.com\/es\/services\/design-systems\/","title":{"rendered":"Sistemas de Dise\u00f1o"},"content":{"rendered":"<div class=\"shape-service-container\" style=\"max-width: 960px; margin: 0 auto; color: #FFF7F1; font-size: 18px; line-height: 1.8;\">\n<div class=\"service-hero-header\" style=\"margin-bottom: 48px; border-bottom: 1px solid rgba(255, 247, 241, 0.1); padding-bottom: 32px;\">\n<h1 style=\"font-size: 38px; line-height: 1.3; font-weight: 700; color: #FFF7F1; margin-bottom: 20px;\">Sistemas de Dise\u00f1o: Cohesi\u00f3n Escalable en Cada Interacci\u00f3n<\/h1>\n<p style=\"font-size: 22px; line-height: 1.6; color: #FFF7F1; margin-bottom: 16px;\">Conecta el dise\u00f1o con el c\u00f3digo mediante tokens at\u00f3micos y componentes reusables.<\/p>\n<p style=\"font-size: 20px; line-height: 1.7; color: #FFE4C9;\">Construimos sistemas de dise\u00f1o que ayudan a equipos multidisciplinarios a entregar productos consistentes y accesibles. Desde tokens de dise\u00f1o y UI kits en Figma hasta librer\u00edas de componentes en React listas para producci\u00f3n.<\/p>\n<\/p><\/div>\n<div class=\"service-deliverables-section\" style=\"background: rgba(255, 247, 241, 0.03); border: 1px solid rgba(231, 136, 149, 0.25); border-radius: 16px; padding: 40px; margin-bottom: 56px;\">\n<h2 style=\"font-size: 24px; font-weight: 700; color: #FFF7F1; margin-bottom: 24px;\">Entregables Clave<\/h2>\n<ul style=\"list-style: none; padding: 0; margin: 0;\">\n<li style=\"margin-bottom: 12px; display: flex; align-items: flex-start; gap: 12px;\"><span style=\"color: #FC6736; font-weight: bold;\">&#10003;<\/span> <span>Arquitectura de Tokens At\u00f3micos (Colores, Tipograf\u00eda, Espaciados, Sombras)<\/span><\/li>\n<li style=\"margin-bottom: 12px; display: flex; align-items: flex-start; gap: 12px;\"><span style=\"color: #FC6736; font-weight: bold;\">&#10003;<\/span> <span>Librer\u00eda de Componentes Accesibles con Est\u00e1ndar WCAG 2.1 AA<\/span><\/li>\n<li style=\"margin-bottom: 12px; display: flex; align-items: flex-start; gap: 12px;\"><span style=\"color: #FC6736; font-weight: bold;\">&#10003;<\/span> <span>UI Kit en Figma con Auto-Layout, Variables y Variantes<\/span><\/li>\n<li style=\"margin-bottom: 12px; display: flex; align-items: flex-start; gap: 12px;\"><span style=\"color: #FC6736; font-weight: bold;\">&#10003;<\/span> <span>Portal de Documentaci\u00f3n Interactiva en Storybook<\/span><\/li>\n<li style=\"margin-bottom: 12px; display: flex; align-items: flex-start; gap: 12px;\"><span style=\"color: #FC6736; font-weight: bold;\">&#10003;<\/span> <span>Gu\u00edas de Gobernanza y Versionado para Desarrolladores<\/span><\/li>\n<\/ul><\/div>\n<div class=\"service-faq-section\" style=\"margin-bottom: 56px;\">\n<h2 style=\"font-size: 28px; font-weight: 700; color: #FFF7F1; margin-bottom: 24px;\">Preguntas Frecuentes<\/h2>\n<div style=\"margin-bottom: 28px;\">\n<h3 style=\"font-size: 21px; font-weight: 700; color: #FFF7F1; margin-bottom: 8px;\">\u00bfQu\u00e9 es un sistema de dise\u00f1o?<\/h3>\n<p style=\"color: #FFE4C9; margin: 0;\">Un sistema de dise\u00f1o es el conjunto compartido de tokens, componentes y gu\u00edas que un equipo de producto usa para construir interfaces consistentes. Conecta dise\u00f1o y c\u00f3digo: los mismos colores, tipograf\u00edas, espaciados y componentes viven en Figma y en una librer\u00eda de componentes documentada, para que dise\u00f1o y desarrollo trabajen desde una \u00fanica fuente de verdad.<\/p>\n<\/p><\/div>\n<div style=\"margin-bottom: 28px;\">\n<h3 style=\"font-size: 21px; font-weight: 700; color: #FFF7F1; margin-bottom: 8px;\">\u00bfCu\u00e1ndo necesita una empresa un sistema de dise\u00f1o?<\/h3>\n<p style=\"color: #FFE4C9; margin: 0;\">Cuando varios equipos, productos o repositorios deben verse y comportarse igual, cuando las interfaces se desalinean con cada versi\u00f3n, o cuando cuesta mantener la accesibilidad y la coherencia de marca. Para Grant Thornton BusinessTools, Shape Creative Studio construy\u00f3 un sistema de dise\u00f1o en React, documentado y compartido por tres repositorios independientes.<\/p>\n<\/p><\/div>\n<div style=\"margin-bottom: 28px;\">\n<h3 style=\"font-size: 21px; font-weight: 700; color: #FFF7F1; margin-bottom: 8px;\">\u00bfQu\u00e9 incluye un sistema de dise\u00f1o de Shape Creative Studio?<\/h3>\n<p style=\"color: #FFE4C9; margin: 0;\">Tokens de dise\u00f1o para color, tipograf\u00eda, espaciado y sombras; una librer\u00eda de componentes accesible alineada con WCAG 2.1 AA; un UI kit en Figma con variables y variantes de componentes; un portal de documentaci\u00f3n interactivo en Storybook; y gu\u00edas de gobierno y versionado para la entrega a desarrollo.<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"service-cta-banner\" style=\"text-align: center; padding: 48px 32px; background: linear-gradient(135deg, rgba(252,103,54,0.15) 0%, rgba(51,51,51,0.95) 100%); border: 1px solid rgba(252,103,54,0.4); border-radius: 16px;\">\n<h2 style=\"font-size: 28px; font-weight: 700; color: #ffffff; margin-bottom: 16px;\">\u00bfListo para llevar tu producto digital al siguiente nivel?<\/h2>\n<p style=\"max-width: 600px; margin: 0 auto 32px auto; color: #D0D0D0;\">Conversemos sobre tus desaf\u00edos de dise\u00f1o de producto, arquitectura t\u00e9cnica y objetivos de negocio.<\/p>\n<p>    <a href=\"\/es\/contacts\/\" style=\"display: inline-block; background: #FC6736; color: #ffffff; font-weight: 700; padding: 16px 36px; border-radius: 8px; text-decoration: none; font-size: 16px; letter-spacing: 0.05em; transition: background 0.2s ease;\">Agenda una Llamada Inicial \u2192<\/a>\n  <\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Conecta el dise\u00f1o con el c\u00f3digo mediante tokens at\u00f3micos y componentes reusables.<\/p>","protected":false},"author":1,"featured_media":0,"parent":2053,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"nf_dc_page":"","footnotes":""},"class_list":["post-4484","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Design Systems - Shape Creative Studio<\/title>\n<meta name=\"description\" content=\"Bridge the gap between design and code with atomic design tokens.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/shapecreativestudio.com\/es\/services\/design-systems\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Design Systems - Shape Creative Studio\" \/>\n<meta property=\"og:description\" content=\"Bridge the gap between design and code with atomic design tokens.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/shapecreativestudio.com\/es\/services\/design-systems\/\" \/>\n<meta property=\"og:site_name\" content=\"Shape Creative Studio\" \/>\n<meta property=\"article:modified_time\" content=\"2026-10-11T06:14:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/shapecreativestudio.com\/wp-content\/uploads\/2026\/10\/shape-og-default.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2400\" \/>\n\t<meta property=\"og:image:height\" content=\"1260\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@shapecreatives\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/shapecreativestudio.com\\\/services\\\/design-systems\\\/\",\"url\":\"https:\\\/\\\/shapecreativestudio.com\\\/services\\\/design-systems\\\/\",\"name\":\"Design Systems - Shape Creative Studio\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/shapecreativestudio.com\\\/#website\"},\"datePublished\":\"2025-08-12T05:35:28+00:00\",\"dateModified\":\"2026-10-11T06:14:46+00:00\",\"description\":\"Bridge the gap between design and code with atomic design tokens.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/shapecreativestudio.com\\\/services\\\/design-systems\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/shapecreativestudio.com\\\/services\\\/design-systems\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/shapecreativestudio.com\\\/services\\\/design-systems\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/shapecreativestudio.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Our Services\",\"item\":\"https:\\\/\\\/shapecreativestudio.com\\\/services\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Design Systems\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/shapecreativestudio.com\\\/#website\",\"url\":\"https:\\\/\\\/shapecreativestudio.com\\\/\",\"name\":\"Shape Creative Studio\",\"description\":\"We transform ideas into digital experiences that drive results. From product design to brand identity\u2014we craft solutions that connect with your audience.\",\"publisher\":{\"@id\":\"https:\\\/\\\/shapecreativestudio.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/shapecreativestudio.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":[\"Organization\",\"ProfessionalService\"],\"@id\":\"https:\\\/\\\/shapecreativestudio.com\\\/#organization\",\"name\":\"Shape Creative Studio\",\"url\":\"https:\\\/\\\/shapecreativestudio.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/shapecreativestudio.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/shapecreativestudio.com\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/favicon@1x.webp\",\"contentUrl\":\"https:\\\/\\\/shapecreativestudio.com\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/favicon@1x.webp\",\"width\":512,\"height\":512,\"caption\":\"Shape Creative Studio\"},\"image\":{\"@id\":\"https:\\\/\\\/shapecreativestudio.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/x.com\\\/shapecreatives\",\"https:\\\/\\\/www.instagram.com\\\/shapecreativestudio\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/shapecreativestudio\\\/\",\"https:\\\/\\\/www.google.com\\\/search?kgmid=\\\/g\\\/11mpcv72wm\",\"https:\\\/\\\/www.google.com\\\/search?kgmid=\\\/g\\\/11yh8qtjlh\"],\"description\":\"UX\\\/UI and product design studio with teams in Gresham, Oregon and Santiago, Chile.\",\"email\":\"hello@shapecreativestudio.com\",\"telephone\":\"+1-971-206-4785\",\"priceRange\":\"$$$\",\"address\":[{\"@type\":\"PostalAddress\",\"streetAddress\":\"Southeast Burnside Street\",\"addressLocality\":\"Gresham\",\"addressRegion\":\"OR\",\"postalCode\":\"97030\",\"addressCountry\":\"US\"},{\"@type\":\"PostalAddress\",\"streetAddress\":\"Avenida Apoquindo 6410\",\"addressLocality\":\"Las Condes\",\"addressRegion\":\"Regi\u00f3n Metropolitana\",\"postalCode\":\"7560903\",\"addressCountry\":\"CL\"}],\"areaServed\":[\"United States\",\"Chile\",\"Latin America\"],\"knowsAbout\":[\"UX design\",\"UI design\",\"Design systems\",\"Web platforms\",\"Custom software development\",\"AI-enhanced design\",\"Brand identity\"],\"founder\":{\"@type\":\"Person\",\"name\":\"F\u00e9lix Rivas\",\"jobTitle\":\"CEO\",\"sameAs\":[\"https:\\\/\\\/www.linkedin.com\\\/in\\\/felixrivasproductdesigner\\\/\"]}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Design Systems - Shape Creative Studio","description":"Conecta el dise\u00f1o con el c\u00f3digo mediante tokens at\u00f3micos y componentes reusables.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/shapecreativestudio.com\/es\/services\/design-systems\/","og_locale":"es_ES","og_type":"article","og_title":"Design Systems - Shape Creative Studio","og_description":"Bridge the gap between design and code with atomic design tokens.","og_url":"https:\/\/shapecreativestudio.com\/es\/services\/design-systems\/","og_site_name":"Shape Creative Studio","article_modified_time":"2026-10-11T06:14:46+00:00","og_image":[{"width":2400,"height":1260,"url":"https:\/\/shapecreativestudio.com\/wp-content\/uploads\/2026\/10\/shape-og-default.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_site":"@shapecreatives","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/shapecreativestudio.com\/services\/design-systems\/","url":"https:\/\/shapecreativestudio.com\/services\/design-systems\/","name":"Design Systems - Shape Creative Studio","isPartOf":{"@id":"https:\/\/shapecreativestudio.com\/#website"},"datePublished":"2025-08-12T05:35:28+00:00","dateModified":"2026-10-11T06:14:46+00:00","description":"Conecta el dise\u00f1o con el c\u00f3digo mediante tokens at\u00f3micos y componentes reusables.","breadcrumb":{"@id":"https:\/\/shapecreativestudio.com\/services\/design-systems\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/shapecreativestudio.com\/services\/design-systems\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/shapecreativestudio.com\/services\/design-systems\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/shapecreativestudio.com\/"},{"@type":"ListItem","position":2,"name":"Our Services","item":"https:\/\/shapecreativestudio.com\/services\/"},{"@type":"ListItem","position":3,"name":"Design Systems"}]},{"@type":"WebSite","@id":"https:\/\/shapecreativestudio.com\/#website","url":"https:\/\/shapecreativestudio.com\/","name":"Shape Creative Studio","description":"We transform ideas into digital experiences that drive results. From product design to brand identity\u2014we craft solutions that connect with your audience.","publisher":{"@id":"https:\/\/shapecreativestudio.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/shapecreativestudio.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":["Organization","ProfessionalService"],"@id":"https:\/\/shapecreativestudio.com\/#organization","name":"Shape Creative Studio","url":"https:\/\/shapecreativestudio.com\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/shapecreativestudio.com\/#\/schema\/logo\/image\/","url":"https:\/\/shapecreativestudio.com\/wp-content\/uploads\/2025\/07\/favicon@1x.webp","contentUrl":"https:\/\/shapecreativestudio.com\/wp-content\/uploads\/2025\/07\/favicon@1x.webp","width":512,"height":512,"caption":"Shape Creative Studio"},"image":{"@id":"https:\/\/shapecreativestudio.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/shapecreatives","https:\/\/www.instagram.com\/shapecreativestudio","https:\/\/www.linkedin.com\/company\/shapecreativestudio\/","https:\/\/www.google.com\/search?kgmid=\/g\/11mpcv72wm","https:\/\/www.google.com\/search?kgmid=\/g\/11yh8qtjlh"],"description":"UX\/UI and product design studio with teams in Gresham, Oregon and Santiago, Chile.","email":"hello@shapecreativestudio.com","telephone":"+1-971-206-4785","priceRange":"$$$","address":[{"@type":"PostalAddress","streetAddress":"Southeast Burnside Street","addressLocality":"Gresham","addressRegion":"OR","postalCode":"97030","addressCountry":"US"},{"@type":"PostalAddress","streetAddress":"Avenida Apoquindo 6410","addressLocality":"Las Condes","addressRegion":"Regi\u00f3n Metropolitana","postalCode":"7560903","addressCountry":"CL"}],"areaServed":["United States","Chile","Latin America"],"knowsAbout":["UX design","UI design","Design systems","Web platforms","Custom software development","AI-enhanced design","Brand identity"],"founder":{"@type":"Person","name":"F\u00e9lix Rivas","jobTitle":"CEO","sameAs":["https:\/\/www.linkedin.com\/in\/felixrivasproductdesigner\/"]}}]}},"_links":{"self":[{"href":"https:\/\/shapecreativestudio.com\/es\/wp-json\/wp\/v2\/pages\/4484","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shapecreativestudio.com\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/shapecreativestudio.com\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/shapecreativestudio.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/shapecreativestudio.com\/es\/wp-json\/wp\/v2\/comments?post=4484"}],"version-history":[{"count":4,"href":"https:\/\/shapecreativestudio.com\/es\/wp-json\/wp\/v2\/pages\/4484\/revisions"}],"predecessor-version":[{"id":4924,"href":"https:\/\/shapecreativestudio.com\/es\/wp-json\/wp\/v2\/pages\/4484\/revisions\/4924"}],"up":[{"embeddable":true,"href":"https:\/\/shapecreativestudio.com\/es\/wp-json\/wp\/v2\/pages\/2053"}],"wp:attachment":[{"href":"https:\/\/shapecreativestudio.com\/es\/wp-json\/wp\/v2\/media?parent=4484"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}