What is UGREEN's primary brand color?

UGREEN has no chromatic brand accent in its marketing chrome. The primary color is pure black (#000000), which carries every CTA background, primary button fill, border, heading, and body text. Two very-low-frequency colors appear in the extracted data — a steel blue (#1975b7) at 2 occurrences and a deep red (#c30000) at 1 occurrence — but neither appears in the marketing chrome at scale. They are likely campaign or badge colors. The system is intentionally monochromatic: product photography provides all chromatic energy.

What typeface does UGREEN use, and what should I use as a substitute?

UGREEN runs Metropolis as its single typeface across every tier — display, heading, body, button, nav, and caption all share the same family. Metropolis is an open-source geometric sans-serif (based on Gotham/Futura proportions, released under SIL OFL). It is available on GitHub and Fontsource. Display headlines sit at 48–56px in weight 600–700; body at 14–16px in weight 400; buttons at 14px in weight 700. The closest system substitute is Inter; for Gotham-style proportions, Montserrat (Google Fonts) is a closer match. Weight 700 at display sizes is the UGREEN-specific move — not a light grotesk display, a confident heavy one.

What corner-radius scale does UGREEN use?

UGREEN's radius scale is pill-first. The 50px radius appears 13 times in the captured page — on primary buttons, promotional badges, and CTA pills. The 14px radius appears on variant-picker chips (the product color/size selectors). Cards use 12px. A tiny 2px radius appears on input fields and small inline chips. The scale skips the 4–8px small-step tier entirely; UGREEN goes from 2px (inputs) directly to 12px (cards) to 14px (chips) to 50px (pill buttons). The pill geometry is the brand's warmth signal in an otherwise very cold black-and-white system.

How does UGREEN structure its product showcase grid?

The product showcase uses a 2-column hero card layout for the Signature Series (two large product-photo cards side by side), followed by a 4-column product-name row for sub-categories (Nexode, MagFlow, Revodok, Uno), then a single-column hero for the featured category (UGREEN NASsync enclosure with photography). The card internal padding is 20px throughout. Cards have no shadow — a 1px black-with-opacity border on hover and a subtle scale-up (1.03x) on hover are the only interactive signals. Image-first: the product photo fills the card top to bottom, with the product name and CTA sitting below the image.

Can I use this DESIGN.md to build my own consumer-electronics product page?

Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce UGREEN's specific moves: white canvas with pure-black CTA fills, Metropolis at controlled weights, pill-radius buttons at 50px, product-card grid with hover-scale, and semantic stock-status tokens (in-stock green, low-stock amber, out-of-stock gray). The token references resolve cleanly — {colors.ink} for any text, {colors.canvas} for any background, {rounded.pill} for primary buttons. Caveat: the monochromatic system depends heavily on product photography for visual interest. Build it with placeholder boxes and it will look sparse; build it with strong product shots and it looks exactly like UGREEN.

UGREEN Design System

UGREEN's marketing-site design system as a DESIGN.md file.

About UGREEN DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source ugreen.com

E-commerce & Retail
Consumer Electronics

UGREEN's marketing site is built on a single design conviction: the product is the color. Every hero, product-showcase grid, and feature strip renders against a white canvas with ink-black text and borders, giving the silver-aluminum chargers, slate-blue NAS enclosures, and gold USB-C connectors the visual field to carry all chromatic weight. Where brands like Anker or Belkin reach for accent colors to signal technology or trust, UGREEN holds the chrome at pure black-and-white and trusts the hardware photography to do every expressive job. The effect is closer to a product catalog than a marketing site — editorial and restrained, with the product objects as the only interruption.

The DESIGN.md file packages the system into a machine-readable spec for React and AI tools. Inside: 15 color tokens drawn from a two-tone palette — pure black (#000000) as ink, border, CTA fill, and primary button background; pure white (#ffffff) as canvas, button text, and input background; plus a light gray (#dadada) for input borders, a near-white (#f2f4f8) for background gradient bands, and a handful of semantic tokens (error, success, stock status). Ten typography tokens span Metropolis at weights 400 through 700 — display tops out at 56px / weight 700 for product-name callouts, with heading at 48px / weight 600 for section leads. 16 components cover the pill-button CTAs, the product-card grid, the variant-picker chip, and the dark hero section.

Feed this file to Claude or Cursor and it reproduces UGREEN's specific moves: pure ink-on-white instead of a tech-blue accent, pill-geometry buttons at 50px radius, Metropolis at controlled weights, and product imagery as the sole chromatic voice. The one move worth borrowing only if you are comfortable with total chromatic restraint is the decision to put zero brand color in the marketing chrome — it forces every pixel of brand differentiation into the industrial design quality of the hardware itself. For most SaaS teams this would read as unfinished. For a hardware brand with strong product photography, it reads like confidence.

What makes it distinct

Chromatic restraintzero accent colors in the marketing chrome; every brand moment is a black fill, a black border, or a black text heading on pure white
Metropolis single-familydisplay at 48–56px weight 600, body at 14–16px weight 400, buttons at 14px weight 700, no second typeface
Pill-dominant radius50px on buttons and badges is the primary rounding; 12px on cards; 14px on variant-pickers; the scale skips 4–8px entirely
Product-photography voltageall chromatic energy (silver chargers, blue NAS enclosures, gold connectors) lives in the product images, not the brand chrome
20px base spacingthe dominant gap throughout the page, appearing 25 times in extracted spacing, anchoring the product-grid cadence

Live at ugreen.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

ugreen.com

Explore UGREEN

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Semantic

Status, errors, success, inline links.

Other

Specialty colors.

UGREEN design system FAQ

Common questions about UGREEN's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

UGREEN — official site

UGREEN's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.