International Magic

International Magic

Preview image. Unlock full-res

Midnight Terminal, Pixelated Echoes

Industryother
Palette
#0a0a0a
#f7f7f7
#7c7c7c
#4d4d4d
#ebebeb
#616161
#585858
#707070

International Magic employs a dark, high-contrast aesthetic that feels like a digital portal. Text is predominantly white or light gray against a near-black canvas, with accents of off-white used minimally for interactive elements. Surfaces are stark and planar, relying on large, abstract shadows for subtle depth rather than complex gradients or border treatments. Typography is compact and precise, maintaining a high information density within fixed-width page layouts, while interactive components feature extremely rounded, almost pill-like shapes. Prioritize Midnight Ink (#0a0a0a) for all primary backgrounds and surfaces to maintain the dark theme. Use Ghost White (#f7f7f7) for primary text and significant text elements like headings. Apply Wand UI Pro for all typography, ensuring font feature settings 'ordn' and 'ss01' are enabled. Utilize 9999px radius for all button and badge elements to create a distinctive pill-like shape. Maintain a default letter-spacing of -0.017em for large display text (96px) and 0.025em for small caption text (10px). Implement the large shadow 'rgba(0, 0, 0, 0.25) 0px 64px 72px 0px' for elevated elements to create depth without overt borders. Employ Ash Gray (#7c7c7c) or Steel Gray (#4d4d4d) for secondary information or links, ensuring sufficient contrast against the dark background. Avoid using bright or overly saturated colors, as the palette is strictly achromatic with very minimal white/gray accents. Do not use generic border-radii; adhere strictly to 9999px for buttons/badges and 24px for other interactive elements. Do not introduce gradients unless they match the detected shadow style, as the system relies on flat surfaces and minimal elevation. Avoid excessive spacing or padding; the design system favors a compact, information-dense layout. Do not use box shadows for button states; interaction is indicated primarily by text color changes or subtle background fills. Do not center page content on a fixed-width container; the layout is full-bleed with content contained by padding. Avoid mixing sans-serif typefaces; Wand UI Pro is the only approved typeface.

More like this