Editorial, calm, and confident. Built to sit in the space between philanthropy and finance.
#362983Primary. Dark grounds, headings.#3FA162Secondary accent.#EFB142Highlight and calls to action.#E7E2E8Light accent.#CFDFE8Light accent.#CEDDC7Light accent.#F6F1E8Page background.#141119All body and label text.Every brand color is generated into a full scale, six tints and six shades around the base. Here is Royal Blue, light to dark.
Lightest tint on the left, base in the middle, darkest shade on the right.
All body, label, and secondary text is Ink. There is no light gray text. Lighter text only appears on dark or royal blue grounds, using Ivory or Lilac.
LEBEC harnesses innovative finance and technology to unlock assets for a resilient, thriving economy and planet.
Body copy runs in Inter at a comfortable reading size, with a line height set for long form thought leadership rather than quick scanning.
Caption and label text
Instead of a one size fits all spacing scale, the gaps are named for what they sit between. A heading sits closer to the paragraph it introduces, and further from the paragraph above it. That small idea is what makes long pages read like an article.
| Token | Use | Value |
|---|---|---|
--gap-p-p | Paragraph to paragraph | 1rem |
--gap-h2-p | H2 to paragraph | 1.25rem |
--gap-h3-p | H3 to paragraph | 0.75rem |
--gap-p-h2 | Paragraph to H2 | 3rem |
--gap-p-h3 | Paragraph to H3 | 2rem |
--section-y | Section vertical | clamp(4rem, 8vw, 7rem) |
--section-y-lg | Section vertical, large | clamp(6rem, 12vw, 10rem) |
This is the part that makes a finance site feel alive. Instead of stock photography, the brand has its own set of patterns, drawn in real time with p5.js on a royal blue ground. They breathe and shift, slowly, so the page never feels static. Each one below is running live, with the code that draws it right next to it.