kumo.productions™
Branding Standards
General rules
This document sets out the minimum rules required to preserve the kumo.productions™ brand when using the logotype, together with reference examples of its use. Apart from the prohibitions explicitly defined here, treat all other general items as guidance, and apply them with appropriate judgment for the medium and situation. Should new media or technologies cause these rules to hinder the preservation or use of the brand, they will be revised promptly in consultation with the owner of this document.
Designers working with the brand under these guidelines should not feel constrained by the rules in this document — produce the graphics that best serve the final result.
kumo.productions™ is a video production company based in Tokyo. kumo™ specializes in motion graphics and 3D CGI, and has been creating commercials, music videos, and live performances.
Contents
The kumo.productions™ Naming Guidelines
Naming & Notation
Official name and notation
Primary
The official name and notation of kumo.productions™ is kumo.productions™. As a rule, do not put a space between productions and ™; however, when a space makes the text resolve as a hyperlink and that benefit matters, the space may be inserted.
kumo.productions ™ → becomes a link
Secondary
In environments where ™ cannot be entered, write kumo.productions. Where . cannot be used either, write kumoproductions.
Do
- kumo.productions™preferred
- kumo.productionsdomain names and other environments without ™
- kumoproductionsusernames and other environments without ™ or the period
Don't
- Kumo Productionsnever capitalize
- kumo プロダクションnever render the name in Japanese
- kumo_productionsnever use underscores
Short name
kumo™ may be used as the short name. Use it mainly within sentences, and avoid standalone use elsewhere as much as possible.
This work was produced by kumo™.
kumo may also be added to file names and similar identifiers to indicate ownership or management by kumo™. Write it in all lowercase or all uppercase, unaffected by any surrounding naming convention.
Do
- kumo_Logo.pngfile name
- KUMO-HNDhost name
Don't
- Kumo_Logo.pngnever use PascalCase
URL notation
The domain name is kumo.productions. Unlike .com and the like, the .productions TLD is uncommon, and a bare domain is not obviously a URL at a glance — take care.
Especially in print and other situations where a hyperlink is not possible, prefer writing the URL with an explicit marker, as follows.
- 1. https://kumo.productions/state https:// explicitly
- 2. 🔗 kumo.productionsuse an icon
- 3. Web: kumo.productionsprefix with Web: or similar
The kumo.productions™ Symbol Guidelines
The kumo™ Symbol — CENTRAL
The base composition of the symbol
This symbol is the most fundamental element of the visual identity. It is composed of four spheres of different sizes, arranged on the prescribed grid.
Its silhouette — a cloud, and the gathering of water droplets the name evokes — embodies the many elements of computer-graphics production at kumo.productions™: materials, shading and lighting, compositing, pixels, and motion. It symbolizes that expressive range while remaining flexible enough to adapt to any medium or environment, and it retains its identity in any composition.
Only the pattern, proportions, and tonal values of the individual spheres carry the visual identity of kumo.productions™; their individual layout and number do not affect it.
This is the most basic of those layouts, and every kumo.productions™ identity is symbolized around this composition.
Unless there is a specific context or intent that calls for transforming the spheres, we recommend using this as the base composition.
The kumo.productions™ Symbol Guidelines
The kumo™ Symbol — Systems
Construction system
The symbol is composed of four spheres of different sizes, each of which is in turn built from particles that express its shading.
Composition examples 1–6
The symbol is composed of four differently sized spheres arranged on the prescribed grid. Only their pattern, proportions, and tonal values define the identity — their individual layout may be arranged freely within the following rules.
Corner ornament
A treatment that uses a single sphere as an ornament, as seen on kumo.productions™ OGP images and at the top of web pages. In addition to the construction rules above, follow the rules below. This portal applies it at the top right of the page.
The kumo.productions™ Symbol Guidelines
The kumo™ Symbol — Incorrect Usage
Prohibited examples
Never deform or distort the symbol beyond its prescribed proportions. Beyond the examples below, any treatment that significantly damages the brand identity is prohibited.
The kumo.productions™ Logotype Guidelines
The kumo™ Logotype
Logotype — Pangram Pangram Foundry / Object Sans Regular
The logotype is the most fundamental element that visually represents kumo.productions™.
Built on Object Sans Regular by Pangram Pangram Foundry, it permeates and adapts to every context while embodying the identity at its most iconic.
Each of these logotypes is a fundamental element of the kumo.productions™ visual identity. Use the appropriate variant for the medium and the design of the graphic.
Never deform, rotate, or redraw the logotype in any circumstance. Changing the color or density of individual objects is also prohibited, apart from a few defined exceptions.
Always use an exact copy taken from this document or the accompanying logo data.
When multiple symbols are visible at once on a single surface of one medium, avoid layouts that repeat the same size and shape as a rule.
Three-dimensional objects are exempt from this rule.
Typography Style
Type system
Each of these typefaces has an impersonal quality that sits naturally with the elements that make up kumo.productions™, forming a highly legible typographic system.
Use Helvetica Now Display in combination with the logotype and for headings; use Helvetica Now Text for print and for text in small spaces.
The Japanese typeface, TP Tokyo City font, may be combined freely in both headings and body text.
For Japanese–English settings, use the bundled composite font file, kumo.productions.type-style, or combine the typefaces at 100% width and height.
Only when the above is unavailable, use kumo.productions.type-style2, composed of the SECONDARY typefaces, or combine those typefaces at 100% width and height.
For character-spacing settings, always use the bundled kumo.yakumono-typestyle.
As a rule, use the PRIMARY typefaces. Avoid the SECONDARY typefaces, Inter and BIZ UDPGothic, wherever possible — choose them only when the PRIMARY typefaces cannot be used.
Combining PRIMARY and SECONDARY typefaces within the same text or the same medium is prohibited.
The MONOSPACE typeface must be used as standalone text, never combined with any other typeface within a passage.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789@¥$%!?.,:;(-)
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789@¥$%!?.,:;(-)
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789@¥$%!?.,:;(-)
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789@¥$%!?.,:;(-)
kumo.productions.type-style — 100%(PRIMARY・SECONDARY)
kumo.productions.type-style2 — 100%(SECONDARY)
kumo.yakumono-typestyle — PRIMARY・SECONDARY(約物)
Logo Systems Guidelines
Logo Systems
Combining the logotype with text
The logotype can be combined with text to bring names, departments, or systems into the identity. Pair Logotype TERTIARY or Logotype ABBREVIATION with Helvetica Now Display, following the examples below.
These are examples of combining the symbol with type. CENTRAL combined with PRIMARY is the most basic form, but feel free to recompose them to suit the design, purpose, and medium.
Color Style Guidelines
Color Style
Color palette
These colors are elements that establish the kumo.productions™ identity.
To match the symbol — a cloud and its gathering of water droplets — each is a special color drawn from the image of the sky.
Never alter their lightness, saturation, or hue, and always apply them as flat, uniform fills. Follow the pairing rules described later.
Semantic colors — Extension
Role-based aliases for the seven base colors. UI and production work should reference these as a rule (defined in tokens/colors.css). The usage rules for the two highlight colors — never on gray, never in low contrast — apply at the semantic layer as well.
Color Style Guidelines
Color Combinations
Color pairings
These are pairing examples within the kumo.productions™ color system.
Incorrect usage
These are prohibitions and cautions within the kumo.productions™ color system, defined to avoid unintentionally damaging the identity. Beyond the examples below, any treatment that significantly damages the brand identity is prohibited.
Usage Examples
Usage Examples
Applications (names and contact details are placeholders)
On-screen
Billing Statement — full text (placeholder copy)
BILLING STATEMENT
Bill to. CLIENT — Payment due. 2024.01.01
000-0000 0-00-0 SAMPLE BLDG 000
000-0000 0-0-0 000 / 000-0000-0000
Invoice number T0000000000000
Subject. CG — Total.(JPY) 99,790
Bank account number BANK (0000) (000) 0000000
発行元: 合同会社○○○○○○ 東京都○○区○○ サンプルビル 000
宛先住所: 東京都○○区○○○ 0-00-0 SAMPLE BLDG 000
Task description デザイン製作費 / Delivery date 25.01.01 / Quantity 1 / Amount(JPY) 100,000(×6行)
Subject. CG デザイン制作費 / 銀行 ○○支店 普通 0000000(口座名義はダミー)
Subtotal 100,000 / Consumption tax 10% 10,000 / Total 99,790
kumo.productions / 01/01
Resume — full text (placeholder copy)
Direction(×3)
Works Title Name Title(×8)
From corporate promotional videos to virtual content.(×8)
Full Name | Alias
Executive Director, Motion Designer, CG Generalist
本文ダミーテキスト: 「ある日の暮方の事である。…」(芥川龍之介『羅生門』冒頭)
kumo.productions / P.01
Business cards — full text (placeholder copy)
Full Name | Alias — Executive Director, Motion Designer, CG Generalist
Full Name | Alias — Director, CG Artist
Full Name | Alias — Motion Designer, CG Artist
E name@kumo.productions
P +81 000.0000.0000
X @username
Design System Extension
Design Tokens
CSS tokens derived from the brand rules — styles.css imports tokens/colors, typography, and spacing
Semantic colors — full definitions in Color Style
Spacing — grid unit a = 4px
Radius / Elevation / Motion
Dividers are 1px hairlines. Shadows are limited to --shadow-card (very light) and --shadow-overlay
--dur 150ms / --ease cubic-bezier(0.2, 0, 0, 1)
focus ring: 2px rgba(100,173,212,.55)
Files
assets/svg/(ロゴ・シンボル)
Dark mode
<html data-theme="dark"> flips every semantic token. The ground becomes Space black, text Base white, and the accent Sky blue (Night sky blue lacks contrast on black, in line with the prohibited pairings). Solid controls (--solid / --on-solid) swap black and white.
Design System Extension
UI Components
A standard UI set built on the brand rules (React + token references). Live demos below — try them. Each component ships as a .jsx implementation, a .d.ts prop contract, and a .prompt.md usage guide
Colors and states follow the guidelines: primary = Base black, accent = Night sky blue, focus ring = Sky blue, hairline-based dividers, and restrained 150ms motion. The state colors (--success / --warning / --danger) are additions required by UI, chosen as oklch values that harmonize with the palette (minimal use).