TOTAKEKE

Overview

TOTAKEKE is a meme-coin brand celebrating the twin brother of Cheems, the beloved internet dog. The design system embraces a 'Playful Crypto-Maximalism' aesthetic—combining dark, high-contrast surfaces (rgb(15, 14, 15)) with vibrant orange accents (rgb(255, 98, 0)) and warm cream typography (rgb(255, 248, 226)). The brand evokes irreverent humor, community energy, and the chaotic optimism of decentralized finance, while maintaining clarity and accessibility. The UI feels bold and unapologetic, like a dog meme that refuses to be ignored.

The voice is casual, confident, and slightly tongue-in-cheek. Vocabulary leans into crypto slang ('moon,' 'hodl,' 'community') mixed with dog-meme vernacular ('cheems,' 'doge,' 'twin brother'). The brand personality is mischievous yet earnest—it celebrates the absurdity of meme coins while genuinely inviting users into a community. Example sentence: 'TOTAKEKE was posted in Balltze's official social media channels as the twin brother of our beloved doggy Cheems—now imagine what happens when the same dog has a clean slate and a fresh run.'

Colors

The color palette is built on a dark-mode foundation (surface: #0f0e0f) that creates maximum contrast for the primary accent orange (primary: #ff6200, rgb(255, 98, 0)). This orange is used exclusively on all Call-To-Action buttons, active navigation states, and interactive focus rings—it is the brand's signature crypto-energy color. The secondary warm gold (secondary: #febb60, rgb(254, 187, 96)) appears on hero image borders, decorative accents, and hover states, creating a cohesive warm-tone palette. The tertiary mauve-brown (tertiary: #924451, rgb(146, 68, 81)) is reserved for headings and structural text, providing visual hierarchy without competing with the primary orange. The on-surface text is a soft cream (on-surface: #fff8e2, rgb(255, 248, 226)) that reduces eye strain on dark back

Typography

The type system pairs two distinct families: GlassJaw (a custom display font loaded via @font-face) for all headlines and CTAs, and Comic Neue for body text and UI labels. GlassJaw at 100px / 800 weight / 2px letter-spacing creates the hero headline 'TOTAKEKE{cto}' with maximum personality and brand recognition; this same font at 22px / 900 weight powers the primary CTA buttons, ensuring they command attention. Comic Neue at 20px / 700 weight / 130% line-height (26px) serves as the primary body text, delivering warmth and approachability—the 700 weight is applied globally to all text via CSS font-weight: 700 !important, reinforcing the bold, confident voice. Smaller labels use Comic Neue at 16px / 700 weight for consistency. All headings (h1, h2, h3) inherit GlassJaw with 2–3px letter-spac

Layout

The page layout uses a fixed, full-viewport model (position: fixed, width: 100%, height: 100%) with overflow-y: scroll to create a single-column, vertically-scrollable experience. The container max-width is 1280px, centered within the viewport. The hero section uses a two-column grid (left content, right image) that collapses to single-column on mobile (max-width: 1000px). Spacing follows a semantic scale: lg (40px) separates major sections (hero, about, tokenomics, gallery), md (24px) separates cards and content blocks, sm (12px) separates inline elements. The gutter (24px) is applied to all horizontal padding on the page. The hero image is wrapped in a card with rounded: 50px and a 3px border in #febb60, creating a warm frame that draws the eye. The curved-loop-jacket SVG text animation

Elevation & Depth

Depth is conveyed through a combination of box-shadows and border treatments rather than pure layering. The base elevation (sm) uses box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) for subtle separation of minor UI elements like disabled states. Standard cards and interactive elements use md elevation (0 3px 8px rgba(0, 0, 0, 0.15)), creating a soft lift from the dark background. Modals, expanded dropdowns, and hero image containers use lg elevation (0 8px 24px rgba(0, 0, 0, 0.2)) for maximum prominence. The hero image card uses a 3px solid border at rgba(254, 187, 96, 1.0) combined with box-shadow:

Shapes

The shape philosophy is 'Crypto-Playful Roundness'—combining extreme border-radius values (2000px for buttons, 1000px for scrollbar) with moderate radii (20px for cards, 10px for inputs) to create a visual hierarchy of softness. Buttons use border-radius: 2000px (a near-infinite radius that creates perfect pill shapes), making them instantly recognizable as interactive elements and reinforcing the playful, approachable brand voice. Hero image containers use border-radius: 50px, creating a softer, more organic frame than sharp corners while remaining distinct from buttons. Standard content card

Components

Action Elements Primary buttons use backgroundColor: rgb(255, 98, 0), textColor: rgb(255, 255, 255), fontFamily: GlassJaw, fontSize: 22px, fontWeight: 900, borderRadius: 2000px, padding: 15px 30px, and boxShadow: 0 3px 8px rgba(0, 0, 0, 0.15). On hover, the background transitions to #ff9d3d with a subtle scale(1.02) transform over 200ms. On active, the shadow increases to 0 8px 24px rgba(0, 0, 0, 0.2). Secondary buttons use transparent background with a 2px solid border in the primary orange, maintaining the same text styling. Link buttons use textColor: {colors.primary} with borderBottom: 2px solid {colors.primary}, creating an underline that transitions to the primary-fixed-dim color on hover.

Containers & Surfaces Hero image cards use backgroundColor: transparent, rounded: 50px

Do's and Don'ts

**Do**

• Do use the primary orange (#ff6200) exclusively on CTAs, focus rings, and active states—it is the brand's signature accent and must never be diluted.
• Do apply Comic Neue at 700 weight globally for body text and UI labels; the boldness reinforces the confident, unapologetic brand voice.
• Do use border-radius: 2000px for all buttons to create instant visual recognition and reinforce the playful, approachable personality.
• Do maintain the dark surface (#0f0e0f) as the dominant background; it maximizes contrast and makes the warm accents pop.
• Do apply the 3px gold border + box-shadow glow effect to hero images and key interactive elements to create visual hierarchy without relying on shadows alone.
• Do use the full M3 color token stack (surface-container-low through surface-container-highest) to create subtle depth layers in cards and modals.

**Don't**

• Don't use the primary orange on body text, backgrounds, or non-interactive elements—reserve it exclusively for CTAs and focus states.
• Don't apply system fonts or generic sans-serif; always use Comic Neue for body text and GlassJaw for headlines to maintain brand distinctiveness.
• Don't use sharp border-radius values (0px, 4px) on buttons or hero images; the brand requires rounded, pill-shaped elements.
• Don't apply heavy shadows (0 16px 40px or larger) on standard cards; use the md elevation (0 3px 8px) to maintain visual lightness.
• Don't mix the secondary gold (#febb60) and primary orange (#ff6200) on the same interactive element; use one accent per component.
• Don't reduce the letter-spacing on GlassJaw headlines below 2px; the spacing is critical to the brand's bold, confident appearance.