Brand Identity
Public guide to the Disocy brand system, official assets, approved logo usage, and the core structure behind the visual language.
This page is the public guide to the Disocy brand system. It covers the core visual structure, the official assets, and the rules required to use the brand well.
Visual Overview
The brand should read at a glance.
Use this visual layer to understand the two chromatic anchors and how the three palettes behave as one visual system.
002
Disocy Light
Sweet Corn is the light origin of the system and the brand material under direct light.
001
Disocy Dark
Meteorite is the same material in low light and should remain warm, never neutral black.
Disocy Light
--light-*Reference ramp for physical production around Sweet Corn. Disocy Light is the physical light-side reference of the brand. Use it when the brand needs to feel open, calm, and materially warm on print or packaging. It is not a decorative cream or an accent. It is one of the two foundational brand materials.
200
Base
Primary light anchor.
500
Midpoint
Useful middle tone for materials and borders.
700
Text
Readable text on light surfaces.
Disocy Dark
--dark-*Reference ramp for physical production around Meteorite. Disocy Dark is the physical dark-side reference of the brand. It should read as a warm charcoal, not as neutral black, so the system keeps the same material character in low light. Use it for dark brand surfaces, packaging, and pairings where the light mark needs maximum presence.
900
Base
Primary dark anchor.
500
Pivot
Balanced step for soft contrast.
800
Raised surface
Tone for raised dark surfaces.
Disocy Matter
--matter-*The active digital palette used by the product. Disocy Matter connects the light and dark anchors into one continuous digital system, so hierarchy stays coherent across modes. This is the palette that should shape backgrounds, text, borders, and emphasis in product environments.
50
Canvas
Absolute light opening.
500
Pivot
Shared midpoint across light and dark interfaces.
900
Dark base
Dark base and primary foreground anchor.
Typography
GT Planar is the primary typographic voice of Disocy. It carries the editorial tone of the brand across product, communication, and printed matter.
GT Planar
GT Planar
Aa Bb Cc
GT Planar is the primary typographic voice of Disocy. It carries the editorial tone of the brand across product, communication, and printed matter.
Editorial
GT Planar should feel composed and directional. Headlines can be assertive, but never loud.
Technical
Its clarity supports systems thinking, specifications, and interface language without turning cold or generic.
Material
The type should move with the same calm precision as the palette, keeping the brand measured and recognisable.
Display
Size
72-96 px
Weight
Weight 600
For campaign lines, hero statements, and key moments of brand expression.
Crafted with precision, worn with intention.
Heading
Size
32-48 px
Weight
Weight 500
For section titles and structured editorial hierarchy.
A clear system needs a clear voice.
Reading
Size
16-20 px
Weight
Weight 400
For descriptive copy, product context, and informative brand writing.
GT Planar holds long-form reading comfortably while preserving a technical, contemporary tone that stays aligned with the visual system.
Official brand files
All public brand exports live under /brand/... and mirror the structure inside public/brand.
Disocy
Corporate marks, symbol exports and motion-ready variants.
DiD™
Product-specific DiD™ marks and typography assets.
Color Discipline
The Disocy palette was not assembled by taste alone. It was built as a controlled color system so the brand keeps the same visual character across light, dark, print, and interface use.
| Technical axis | What is controlled |
|---|---|
| Color space | OKLCH is used to work with lightness, chroma, and hue in a perceptually cleaner way |
| Light to dark continuity | The system keeps the same warm material feeling across both ends of the palette |
| Intermediate steps | Each step is tuned to feel even, stable, and usable in sequence |
| Contrast behavior | The palette is reviewed so text and interface pairings remain controlled and legible |
| Cross-medium consistency | Digital and physical outputs are aligned so the brand does not drift between surfaces |
- OKLCH was used as the working color space to control lightness, chroma, and hue with more visual precision than RGB or HEX alone.
- The light and dark bases belong to the same warm family.
- The intermediate steps were tuned for perceptual consistency, so transitions feel measured rather than arbitrary.
- Contrast, temperature, and balance were reviewed across digital and physical use so the system stays calm and recognizable at every scale.
- Each palette has a defined role, which prevents the brand from drifting as it moves between product, print, and communication.
The result is a brand palette that feels restrained, technical, and materially consistent without looking mechanical.
Logo Rules
- Prefer SVG in digital surfaces.
- Use PNG only when SVG is not supported.
- Do not recolor, stretch, rotate, crop, or add effects to the logo.
- Keep approved pairings only: dark logo on Disocy Light, or light logo on Disocy Dark.
- Do not place the logo on backgrounds outside the brand palette.
Size and Clear Space
- Minimum logo width: 24px in digital, 8mm in print.
- Safety margin: always leave at least
36pxof free space around the logo and lockups in digital layouts. - Clear space: at least the cap-height of the wordmark on all sides.
Product Use
The product UI is built on Disocy Matter. That means backgrounds, text, and interface elements follow one unified palette instead of mixing unrelated colors.
- Avoid pure black and pure white.
- Build hierarchy with nearby steps, not with foreign hues.
Last updated on