Layer2Tech

The Brief

Layer2Tech is an Abu Dhabi-based company that builds and invests in digital asset and payment infrastructure. It owns the Cairn platform and backs Djingr. They wanted to start again from scratch: one new brand route, a new website, and a clean handover for their in-house developers, all within a 37.5-hour budget.

There were two hard constraints. The eight-colour palette from the client's own HTML prototype was fixed, down to the hex value. And the audience — businesses, founders, partners and engineers — is technical and wary of hype. The copy deck's line "Trust is earned, not claimed" became the design principle too: credible, calm and precise, with abstract layers instead of coins and trading charts.

The Mark

A second layer is something built on top of what already exists. It doesn't replace the foundation; it extends what the foundation can do. The L2 monogram puts that idea into one form: an L and a 2 sitting on a shared, fused foot, two shapes resting on one base.

The mark is drawn on a 216 × 120 grid from 14 points with three fillet radii, so it holds up from a 16px favicon to signage. The wordmark is set in Funnel Display Medium, then outlined and hand-rounded at the corners to match the mark's softness.

I made the stacked lockup the primary version for covers, signage and square formats. The horizontal lockup covers headers and footers, and the monogram is used on its own for avatars and favicons. Each comes in navy, white and black, with clear-space, sizing and minimum-size rules set out in the guidelines.

Type & Graphic Language

Funnel Display (headlines) and Funnel Sans (body and UI) replace the prototype's Inter. Both are open-licence, so the client's developers can use them freely. Geist Mono adds a utility voice for labels, numbering and captions.

The graphic system is line-only: hairline figures, never solid or 3D. It's made up of a supergraphic, a half-drop pattern, a gradient horizon, rounded gradient columns and a step motif, with one brand graphic per layout. Restraint did a lot of the work. I cut crosshair markers, glows and any diagram that wasn't part of the system.

Because Layer2Tech owns Cairn, which has its own stone-and-structure identity, I set rules to keep the two brands distinct. Layer2Tech stays line-only, diagrams stay at portfolio level, and the L2 mark never appears in Cairn layouts.

The four "How we work" principle diagrams took three rounds. Near-identical slabs read as too samey, and literal objects like plugs and switches felt off-brief. The final set shows four layer behaviours: seated flush, bridging two stacks, slid out and exploded. Each figure has a single blue stroke.

Website

I designed Home, About, Portfolio, Careers and Contact, plus legal templates. When the client added a Blog mid-project, I designed it with their real posts and categories and kept the /blog URL so existing links carried over. I added the things the brief didn't list but a real site needs:

• Tablet layouts for every page (the brief only asked for desktop and mobile)
• 404 and 500 pages, a social share image, and cookie consent where Reject has equal weight to Accept
• A shared inner-hero rule so the headline sits at the same height on every page and nothing jumps as you navigate
• Optical button padding, so the arrow sits the same visual distance from the edge as the text

The fixed palette's blues only reach about 1.9:1 contrast on light backgrounds, so I kept them decorative there and set all text on light in navy. Every token pairing passes WCAG AA in both light and dark modes, and I flagged the few remaining edge cases for the developers rather than hiding them.

Design System & Handover

The Figma file runs on around 300 variables. Hidden primitives feed semantic tokens with two modes, Canvas (light) and Bedrock (dark), and 68 component tokens covering buttons, inputs, cards, header and footer. Every variable has scoped usage and web code syntax, so what developers inspect matches what they write.

Development was out of scope, but I went further to remove the guesswork. I built a full clickable prototype and a front-end-only Next.js build of the whole site. I also delivered an animation kit in which the hairline diagrams move subtly, like a state machine. My first motion kit was too complex, so I rebuilt it as self-animating SVGs with CSS-only parallax that the team can drop straight in with no JavaScript.

In about a week, the project delivered a full identity, brand guidelines, a design system, 10+ page types at three breakpoints, a prototype and a working front-end build.