SIRUP 5th Anniversary Special Site

SIRUP 5th Anniversary Special Site

Preview image. Unlock full-res

Midnight command center, high-contrast; functionality through dark surfaces and illuminated accents.

Industrymedia
Palette
#000000
#404040
#666666
#ffffff
#e8e9ed
#5a1501
#4554ac
#5262be

The SIRUP 5th Anniversary site presents a 'midnight command center' aesthetic, characterized by a deep black canvas punctuated by a single vibrant orange accent. Typography is a key identifier, mixing a system sans-serif for body text with several custom display fonts that feature wide letter-spacing. UI elements are dense and dark, with ghost buttons that blend into the background, hinting at interactive states through subtle borders and text color changes. The overall impression is one of intense focus and a strong, almost understated graphic sensibility. Always default to 'Midnight Canvas' (#000000) as the background for new sections. Use 'White Frost' (#ffffff) for all primary text and critical UI elements against dark backgrounds. Apply 'Ignition Orange' (#5a1501) sparingly for high-impact background sections or thematic content blocks, never for small interactive elements. Utilize a 27.5px border-radius for interactive buttons and forms to unify their appearance, except for fully circular elements, which use 1440px. Employ the 'Termina' font with 0.1em letter-spacing for major headings and display text to establish a distinct brand voice. Ensure interactive elements primarily use ghost or outlined styles, with solid fills reserved for subtle, secondary actions. Maintain a clear visual hierarchy by limiting prominent chromatic accents to 'Digital Violet' (#4554ac) for decorative purposes or 'Action Violet' (#5262be) for active text states. Avoid using multiple saturated colors; color should be highly controlled and primarily achromatic with a single brand accent. Do not use '#e8e9ed' for primary text; it is reserved for subtle secondary text or background elements. Do not introduce new typefaces; only 'Helvetica Neue', 'Termina', 'source-han-sans-japanese', and 'Glodok' are permitted. Avoid heavy shadows or gradients; interfaces should feel flat and direct. Do not create filled buttons unless specifically using the 'Subtle Ghost Button (Filled)' variant with 25% white opacity. Refrain from using tight letter-spacing for 'Termina' or 'Glodok'; their identity is defined by open tracking. Do not use 'Ignition Orange' (#5a1501) for small text or icons directly interacting with content, as it functions best as a background accent.

More like this