Becklyn

Becklyn

Preview image. Unlock full-res

Inky canvas, stark white lines

Industryagency
Palette
#1a1a1a
#ffffff
#3b3b3b
#606060
#004eff

Becklyn employs a deep, inky canvas with stark white text, establishing a high-contrast foundation for a digital agency. Typography blends assertive, almost brutalist sans-serifs with classic serifs for accent, creating a mood of modern authority with a nod to traditional craft. Components are defined by sharp edges or subtle curves and ghost-like interactions, prioritizing functionality without heavy ornamentation. The visual system is rooted in a dark mode aesthetic, allowing a single vivid gradient accent to provide energetic punctuation against an otherwise monochrome backdrop. Prioritize a dark aesthetic with a Midnight Ink (#1a1a1a) background for most surfaces and Ghost White (#ffffff) for primary text and interactive elements. Use UniversalSans for all body text, UI elements, and most headlines, primarily at weight 400 for clarity and a modern feel. Reserve Cambon for high-impact display headlines (68px or 92px) to add a touch of classic elegance against the modern sans-serif majority. Apply negative letter-spacing aggressively on larger text sizes (e.g., -0.0590em at 92px) to ensure titles feel tight and impactful. Employ Charcoal Gray (#3b3b3b) as a subtle background for elevated cards or secondary content blocks, providing minimal surface differentiation. Use 100px border-radius for all button-like interactive elements to create a distinct pill or circular shape. Introduce the Spectrum Burst gradient (linear-gradient(...) #004eff) as a deliberate accent for primary calls-to-action or critical highlights against the dark monochrome. Use it sparingly. Avoid using bright, saturated colors universally; restrict them to the Spectrum Burst gradient for accent. Do not use generic box-shadows or heavy elevation; surfaces should primarily differentiate through background color shifts. Avoid mixed-case headings unless Cambon is specifically used for a decorative effect; otherwise, maintain clear typographic hierarchy with UniversalSans. Do not deviate from the established letter-spacing values, especially for headlines, as it defines a key part of the typographic personality. Avoid complex border styles or heavy strokes; the design favors minimal borders (if any) or very thin outlines in Ghost White. Do not use Ghost White as a background color unless for specific, small, and contained elements like the footer on some pages, where it acts as a rare inversion of the dominant dark theme. Do not apply large, standard padding to interactive ghost buttons; they are designed to be visually lightweight and contextually driven by text.

More like this