Designing Disneyland
LOGO RECREATION
Hong Kong Disneyland 20th Anniversary
I love Hong Kong Disneyland’s 20th Anniversary Logo and all of the subsequent branding for the 20th. It’s dreamy, soft, magical. Seeing it around the same time as Disneyland’s 70th logo and branding, it’s hard not to compare and contrast them. While DLR’s anniversary logo and branding is mostly flat and sharp shape driven, HK’s is glowing, sparkly, and much more round/circular. Both use a pretty similar palette, applied in much different manners, but HK’s relies on the beautiful indigo color to ground the entire look. The entire look has an underlying semi-opaque glass aesthetic and I think works wonderfully for this anniversary branding.
Remaking the logo started with rebuilding HKDL’s current logo, specifically the castle portion of the logo. It was difficult to find extremely high resolution images of this logo, so some parts (mainly the two ornate spires) weren’t replicated perfectly. The majority of the castle is built with mostly rectangles, circles, and triangles. As this was one of the first recreation projects I did, it was at this point I was beginning to discover how much of Disneyland design is built of mostly simple & basic shapes. Making this castle was almost like constructing it out of children’s building blocks.
From there, I began remaking the “20” portion of the logo. The “2” is a simple path, not a font. Perhaps the original was made using the font but after making it myself, I believe the original designer also made it from scratch as it was easy to replicate with a single path very easily. The end of the “2” in the final versions always fade away, so I just made the path long enough to intersect with the circle shape that makes the “0”.
The “0” of the logo is an almost perfect circle. What is not perfect though is the two ellipse shapes that make the left and right ear. These were a challenge to nail down, not just due to their odd, slightly organic shape, but also because in some of the versions of the logo they do not have a very defined edge.
Some challenges I had in recreating the logo are seen in two spots:
The area where the ear and the castle intersect, it was difficult to determine how much they intersect.
The area where the bottom of the “2”, the “0”, and the castle intersect. There’s a lot happening here and seeing low res versions of the logo, I couldn’t grasp this detail so I had to make an educated guess with it.
Having physical work to reference for this project would’ve been great and would’ve eradicated a lot of the question marks I ran into, but alas, we do what we can with what we have.
In what I could find, the logo had four versions:
Primary: seen on dark (perhaps only on the brand’s indigo background) – A colorful version with with white accents
Secondary: Seen on light backgrounds – A version based in the brand’s indigo color
White (Tertiary): I only saw a couple instances of this, and I assume is being used to demphasize the logo and highlight other things on a layout (such as products or characters). It was always used on a background that was dark enough to support so that it didn’t get lost.
Solid/Flat Vector: Seen in white or other solid colors. – Used on merchandise that needed a 1-color approach or a specific printing technique (ie screenprinting)
Some key elements to the three main logos (not including the solid/flat vector version) indcludes:
Painterly, Soft Gradients: beautiful brand colors are shown through gradients throughout the logos, showcasing how they blend and soften into each other. The white one mimics this feeling despite only being in one color.
Glowy, feeling transparency: This is done in different ways, but these three logos all feel like they are glowing, made with light, and as if you can see through them. In reality, there is very little transparency on them, seen only on the bottom of the “2” and a little bit throughout the white version.
Ear Placement: The ear on the left side is seen behind the “0” while the ear seen on the right is seen in front of the “0”. This illusion is made through the colors on the latter ear intersecting with the “0”.
Seperation of the “2” and “0” through color: The distinction of the “2” in this logo depends heavily on its shape. Where it collides with the “0” is only seen through a slight color change or glow. This makes the logo feel dreamy and elegant, not forcing the eye to separate the two numbers but creating delination through a subtle effect.
What I was a little surprised about was that all four of these logos were also constructed differently in ways I wasn’t expecting. I go into more detail below about those nuances.
Primary Logo
As this is the primary logo, I find this to be the baseline, the one with all the bells and whistles, the one a set of rules that actually make it more rigid in application. You really get to see the logo’s transparent, colorful, light-like aesthetic in ways that the other logos don’t achieve. The other logos seem to be much more practical though, as this one can only be used on the indigo solid background.
KEY DETAILS:
One of the more surprising things I found is that the castle shape is not masked out or removed, the castle is actually a solid vector on top of everything. This was discovered when I noticed that you can see a little bit of the base of the castle. I expected this to not happen and for it to be built more like the white logo but suppose they made this decision since a.) I’ve never seen it on a non-solid indigo background and b.) it doesn’t need to be transparent like the white one does.
This logo is also the only one that has a glow around the main “0” logo. The only other logo that would follow this would be the white one, but it is not seen on the white one, as far as I can tell.
The transparency on the ears for this one is a little unusual, as they both look like they could be behind or in front of the “0”. This does lend itself to give that “fake transparency” effect that I spoke about earlier.
The bottom right of the “0” has a blurry fade out, only seen elsewhere on the white logo. This really adds to the dreaminess and softness of the logo.
Secondary Logo
The secondary logo takes quite a departure from the primary logo in terms of build and detail. I expected it to just be a a color switch, and inverse of sorts using the indigo as a base, but there is much more at work here. This logo is closer to the solid/vector version of the logo than anything else. Gone are all the soft, glowing elements, with sharp, clean lines replacing everything. Even the blurry, soft ears are in sharp detail. I’m a little unsure why decision was made other than for a practical reason: this logo is seen on a myriad of dreamy and soft backgrounds and so this logo needed to be sharp in contrast.
KEY DETAILS:
This is the only logo where the “2” fully fades out before it reaches the bottom of the “0”.
For being colored in a more flat gradient, the “2” is separated from the “0” with just a tiny bit of glow. It’s subtle but necessary.
The ears do a different styling to achieve its layered look. The ear on the left is clearly behind, using a white glow to really emphasize that, but here, unlike the primary logo, the “0” doesn’t reveal any transparency to see the full shape of that ear. The other ear does something very different: instead of a simple transparency, it looks almost multiplied with the two layers.
Both the primary and secondary logo bring color into their respective “Hong Kong Disneyland” wordmarks. The primary logo utilizes a teal to white to purple colorway that is seen throughout the branding, while the secondary logo seems to continue the coloring above straight into the wordmark as if they are colored from the same base.
White (Tertiary) Logo
This logo is closely built to its primary logo sibling. Much of the little details are seen again here, with a couple important changes: the castle here is actually masked out instead of being a solid shape on top, and there is some transparency happening throughout a lot of the logo. I show it here against two different colors to really get a picture of it. The result is cloudlike and sells the frosted glass aesthetic really well.
Funny enough, this one was the most challenging to recreate. Something about it being one-color and transparent opened up some new challenges to figure out. A not-solid white wordmark is sort of a rarity in design, but the results are worth it as it maintains all the effects while still being simple and very useful.
I found… another version of this mark on an app icon for HKDL… it’s much more simplified, mostly just utilizing a glow around everything. I find this one to be the preferred version in my opinion.
KEY DETAILS:
As mentioned above, the castle here is actually masked out/removed, which makes it possible to use it on a variety of backgrounds, including non-solid backgrounds.
The “2” maintains the outer glow that the primary logo had, but the “0” loses its outer glow.
I think that this logo nails the layering of the ears the best. I can really seen three separate layers with the ears having transparency and the “0” having variance in transparency. I would’ve loved to have seen all the logos follow this method.
The bottom right of the “0” has a blurry fade out, like the primary logo.
Solid/Flat Vector Logo
When logos have a ton of effects, transparency, and color, you really need a solid version for practical application. In this logo you can really see the structure of the logo.
KEY DETAILS:
Without the aid of color and glow, offset strokes have been used to create separation between the “2” and the “0”.
The intersections of the ears and the “0” have been removed to evoke the layered look. This is the only time you really see the castle and the ear interact.
This logo package is a great case study for how application of logos can heavily dictate and change the styling of its versions. I’m assuming in the background there are a lot of rules about how to use each logo since they were made with specific intentions. Use cases for these logos were probably tested across multiple graphics and products and as such important changes were made to each version.
Holistically, when you guests see these logos, they don’t notice the differences. Shape and typography and constants and so the eye doesn’t pick up how wildly different the primary and secondary logos are from each other. On top of that, the consistent and large color library within the branding unifies the logos even further.