VTEX — Latin America's most technically current design system — and it has no licence.
Fit guidance has no recorded field-level check date. No readiness audit recorded.
Shoreline is VTEX's current design system for back-office and admin experiences, superseding the older VTEX Styleguide. VTEX is a Brazilian commerce platform company; Shoreline is developed in the open as a monorepo of seven packages including a charts library and a table implementation.
Developed by VTEX in public on GitHub. Code Connect files are generated rather than hand-written, which is why there are 33 of them covering the component set rather than a token handful.
The identity-bearing decisions, rendered. Names and values are illustrative — refer to the system’s official tokens reference for the canonical, current set.
--sl-color-gray-0
Lightest neutral primitive
--sl-color-blue-8
Accent primitive
--sl-bg-base
Page background, aliased
--sl-fg-base
Body text, aliased
--sl-fg-critical
Destructive text
--sl-space-4
Default gap, also aliased as --sl-space-gap
Exactly what ships in vtex-shoreline-design.md — plus the same token snapshot restated as CSS custom properties. Copy either, or feed the Markdown straight to an AI coding tool as styling context.
Restated from shoreline.vtex.com and vtex/shoreline, links last checked 2026-09-16. The file lists its sources and method in a provenance block at the top.
# Shoreline — Design Style Reference ```yaml # How this file was made. Sources are first-party; nothing here is # read from a rendered page. Full breakdown at source_page below. method: partial confidence: low verified_at: 2026-09-16 source_page: https://www.designsystems.one/design-systems/vtex-shoreline sources: - https://shoreline.vtex.com/ - https://github.com/vtex/shoreline ``` > **Unofficial, community-authored reference.** Compiled by [designsystems.one](https://www.designsystems.one). Not affiliated with, endorsed by, or sponsored by VTEX. "Shoreline" and related marks belong to their respective owners. This document describes publicly observable style attributes in original words — it contains no copied documentation, logos, icon artwork, or original token files. Always defer to the official source for canonical, current values. **System:** Shoreline **Owner:** VTEX **Official documentation:** https://shoreline.vtex.com/ --- ## Summary Latin America's most technically current design system — and it has no licence. ## Design tokens (illustrative) | Token | Value | Role | | --- | --- | --- | | `--sl-color-gray-0` | `#ffffff` | Lightest neutral primitive | | `--sl-color-blue-8` | `#3993f4` | Accent primitive | | `--sl-bg-base` | `var(--sl-color-gray-0)` | Page background, aliased | | `--sl-fg-base` | `var(--sl-color-gray-12)` | Body text, aliased | | `--sl-fg-critical` | `var(--sl-color-red-10)` | Destructive text | | `--sl-space-4` | `1rem` | Default gap, also aliased as --sl-space-gap | ## Origin Shoreline is VTEX's current design system for back-office and admin experiences, superseding the older VTEX Styleguide. VTEX is a Brazilian commerce platform company; Shoreline is developed in the open as a monorepo of seven packages including a charts library and a table implementation. ## Governance Developed by VTEX in public on GitHub. Code Connect files are generated rather than hand-written, which is why there are 33 of them covering the component set rather than a token handful. ## Known for - 33 Figma Code Connect files plus a figma.config.json — more Code Connect coverage than any system currently scored in our Agent-Ready Index. - A disciplined two-layer token architecture: 266 CSS custom properties in the sunrise theme, with primitives like --sl-color-gray-12 aliased into semantic roles like --sl-fg-base. - First-party charts and data-table packages, which admin systems usually leave to third parties. ## Underrated - The semantic layer names states explicitly — --sl-fg-critical, -hover, -pressed — so interaction states are tokens rather than ad-hoc CSS. - It is a serious, current system from a region the design-system conversation ignores. ## Watch out for - There is no licence file of any kind in the repository. Public on GitHub is not the same as open source: without a licence, default copyright applies and you have no granted right to use it. Resolve that before adopting. - Scoped to back-office experiences, in VTEX's own words — it is not a storefront system. ## Components worth studying - **Charts package** — First-party data visualisation, themed from the same tokens. - **ts-table** — A dedicated table package rather than a table component. - **Generated Code Connect** — 33 mappings produced by tooling, so Figma and code do not drift by hand. ## When to choose Shoreline Read Shoreline for its Code Connect and token architecture, which are ahead of most of the field. Do not ship it into a product until the licensing question is answered by VTEX. ## Apply this style with an AI tool Paste this into your AI coding assistant as a direction, then iterate: > Design in the spirit of Shoreline by VTEX — Latin America's most technically current design system — and it has no licence. Lean into what it's known for: 33 Figma Code Connect files plus a figma.config.json — more Code Connect coverage than any system currently scored in our Agent-Ready Index. Match the intent, not the pixels; adapt it to my product rather than cloning it. ## Official references - [Shoreline docs](https://shoreline.vtex.com/) - [vtex/shoreline on GitHub](https://github.com/vtex/shoreline) --- _Generated by [designsystems.one](https://www.designsystems.one/design-systems/vtex-shoreline) — a catalogue of public design systems. Style facts are reported for reference and education; adapt them to your own product. Report issues or takedown requests via the site._
If you’re evaluating this system
Read Shoreline for its Code Connect and token architecture, which are ahead of most of the field. Do not ship it into a product until the licensing question is answered by VTEX.
Where next
