---
title: "Urbanic design system"
variant: extended
source: https://us.urbanic.com/
captured_at: 2026-10-12
theme: light
industry: fashion
generator: Design DNA (https://four.wiralomi.com/style/urbanic-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Urbanic · Design System

> Monochrome storefront, editorial energy

**Theme:** light · **Industry:** fashion · **Source:** https://us.urbanic.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Urbanic’s homepage pairs a restrained monochrome storefront with cinematic fashion imagery. A concise navigation and spacious category tiles let the collection photography carry the visual story.

## North star

Keep the interface monochrome and quiet, then let large, atmospheric fashion imagery create the page’s visual impact.

## Overview

The page uses a white canvas and near-black typography to keep attention on the fashion content rather than decorative interface elements. Black is reserved for navigation, utility links and icons; softer charcoal supports headings and copy, while a very pale gray marks section boundaries. The header is compact and horizontal, with a serif wordmark contrasted against bold sans-serif navigation. Plus Jakarta Sans carries the measured interface typography, using restrained weight changes rather than color to establish hierarchy. A wide, muted-toned campaign video leads, followed by three evenly aligned category photographs and another full-width editorial image. The images are intentionally atmospheric and softly desaturated, so their grays and dark clothing harmonize with the neutral shell. Generous white intervals separate these media blocks, while the footer shifts to a dense multi-column directory of support and brand links. The overall effect is flat, quiet and editorial, with visual emphasis created by image scale and spacing.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas, header, white gaps between campaign and category media, and footer background. |
| Urbanic Ink | `#000000` | `--color-urbanic-ink` | brand | Navigation, utility icons, and footer links; the primary interface text color. |
| Soft Charcoal | `#262626` | `--color-soft-charcoal` | neutral | Headings and supporting text, providing a slightly softened alternative to black. |
| Mist Line | `#f4f4f4` | `--color-mist-line` | neutral | Very light section borders and hairlines; keep it subtle against the white canvas. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-text` → `#000000` (Urbanic Ink) · `--color-text-muted` → `#262626` (Soft Charcoal) · `--color-border` → `#f4f4f4` (Mist Line)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#262626` | `#ffffff` | 15.13:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| PlusJakartaSans | `--font-body` | webfont | 400, 600, 500 | Navigation, body copy, headings, captions and links throughout the interface. | Plus Jakarta Sans |

- **PlusJakartaSans:** Use clean sans-serif forms with measured 400, 500 and 600 weights; navigation is uppercase, with no notable tracking.

### Type scale — Custom (ratio ≈ 2, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 28px | 400 | 1 | 0 | — | PlusJakartaSans | Editorial campaign or featured collection headline. |
| body | 14px | 500 | 1.29 | 0 | — | PlusJakartaSans | General interface copy and supporting text. |
| caption | 12px | 400 | 1.33 | 0 | — | PlusJakartaSans | Small footer details and secondary labels. |
| nav | 14px | 600 | 5.57 | 0 | — | PlusJakartaSans | Main uppercase header navigation. |
| link | 12px | 400 | 1.33 | 0 | — | PlusJakartaSans | Compact text links, including footer and responsibility links. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 2, 10, 12, 14, 20, 30, 40, 60, 80 px.
- Section rhythm 40px · element gap — · card padding — · max content width 1380px.

A compact horizontal header sits above a full-bleed campaign video. Below it, three category cards share a row, followed by another full-width campaign image and a multi-column footer. The measured page max width is 1380px, while the main campaign media spans the viewport. Keep the grid aligned and comfortable rather than dense, with broad white intervals separating media sections. Footer columns form a practical directory rather than a prominent promotional panel.

## Shape & elevation

- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s ease` on interactive elements.

The interface is predominantly flat: measured data reports no shadows, and component borders are absent. Use white space and occasional pale-gray section hairlines to distinguish areas rather than raised cards. Keep image blocks flush and let their scale, not layering effects, establish hierarchy.

## Imagery

Use fashion photography and campaign video as the primary visual content. The hero video is wide and atmospheric, showing models in motion with a subdued, gray-toned treatment. Category cards use full-bleed portrait-oriented fashion images with restrained text overlays. A second wide editorial image anchors the lower page; avoid decorative illustrations or synthetic 3D styling.

## Components

### Header navigation

White horizontal header with a serif Urbanic wordmark, uppercase 14px Plus Jakarta Sans navigation at weight 600, and compact utility icons.

### Campaign video

Wide, full-bleed fashion video directly below the header, with a small pause control positioned over the lower-right edge.

### Category cards

Three aligned fashion image links for Dresses, Tops and Pants, with restrained overlay labels and shop actions.

### Editorial campaign image

A full-width fashion photograph used as a lower-page feature, with a large centered white serif headline over the image.

### Footer directory

White footer arranged into four link columns for brand, contact, help and policies, followed by social, app-store, wordmark and payment details.

### Measured component styles

- **Primary button**: transparent background · text #000000 · radius 0px · padding 0px · 400 18px PlusJakartaSans
- **Link** (“Social Responsibility”): transparent background · text #000000 · radius 0px · padding 0px · 400 12px PlusJakartaSans
- **Navigation item** (“NEW IN READY-TO-WEAR LOOKBOOK MEMBERSHIP”): transparent background · text #000000 · radius 0px · padding 0px · 600 14px PlusJakartaSans

## Do

- Keep the canvas white and the interface palette monochrome.
- Give campaign photography the strongest visual presence.
- Use uppercase, weight-600 sans-serif navigation.
- Separate major media sections with generous white space.
- Align category tiles evenly in a three-column row.
- Keep footer links compact and grouped into clear columns.

## Don't

- Do not introduce bright interface colors or gradients.
- Do not add shadows or rounded-card styling.
- Do not crowd the campaign imagery with interface controls.
- Do not turn the header into a tall promotional block.
- Do not use decorative illustrations in place of fashion photography.
- Do not over-style link text with heavy treatments.

## Agent prompt

Build a new Urbanic-style fashion storefront page with a restrained editorial feel. Use Gallery White (#ffffff) as the canvas, Urbanic Ink (#000000) for navigation and links, Soft Charcoal (#262626) for headings and supporting copy, and Mist Line (#f4f4f4) only for subtle separators. Set interface text in Plus Jakarta Sans, with compact uppercase navigation at weight 600. Create a concise horizontal header, a dominant full-width fashion campaign image or video, and a balanced row of image-led category links. Follow with another wide editorial feature and a practical multi-column footer. Keep image treatment atmospheric and muted; preserve generous white space between blocks. Favor flat surfaces, crisp alignment, and minimal controls. Avoid gradients, shadows, rounded cards, and decorative color accents.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width campaign video beneath the compact header. | autoplay-style campaign presentation, pause control | edge-to-edge video, small lower-right control |
| 2 | category-nav | Three image-led category tiles aligned in one row with white gutters. | shop by category, image links | three-column grid, overlay category labels, shop actions |
| 3 | gallery | Single full-width campaign image with centered headline overlay. | editorial collection feature, campaign link | full-bleed photography, centered white serif title |
| 4 | footer | Four link columns followed by centered social, app, brand and payment details. | support and policy access, social links, app-store links | white background, compact black links, multi-column directory |

## Source CSS custom properties (selected)

```css
--ub-radius-m: 10px;
--ub-radius-s: 8px;
--ant-primary-color: #000;
--ant-primary-color-hover: #000;
--ant-primary-color-active: #000;
--ub-color-primary: #000;
--ub-error-color: #ff3e30;
--ub-marketing-font-family: "Zodiak";
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/urbanic-com