One language.
Every experience.
The foundations for everything we build at Bantu Ecommerce. A shared system of color, type, and reusable components, grounded in the BE Agency library.
Foundations are extracted from Figma. The component recipes below are project implementations using those tokens.
Color with purpose.
Sky is our brand. Neutral brings balance. Semantic color makes status clear.
Brand · Sky
--be-colors-brand-*Neutral
--be-colors-neutral-*Success · Green
--be-colors-green-*Warning · Yellow
--be-colors-yellow-*Error · Red
--be-colors-red-*Semantic color, in both modes.
Use roles in interfaces so colors adapt with the theme.
| Figma role | Light | Dark |
|---|---|---|
bg-primary | #FFFFFF | #0A0A0A |
bg-secondary | #FAFAFA | #171717 |
text-primary (900) | #171717 | #FAFAFA |
text-secondary (700) | #404040 | #D4D4D4 |
border-primary | #D4D4D4 | #404040 |
bg-brand-solid | #0284C7 | #0284C7 |
A clear direction.45° linear gradient
A voice in every size.
Manrope for display and body. Four weights, eleven sizes, one consistent rhythm.
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm
Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
0123456789 & @ ! ? %
40050060070072 / 90pxMake it matter.
60 / 72pxMake it matter.
48 / 60pxMake it matter.
36 / 44pxGood design makes room for clarity.
30 / 38pxGood design makes room for clarity.
24 / 32pxGood design makes room for clarity.
20 / 30pxGood design makes room for clarity.
18 / 28pxGood design makes room for clarity.
16 / 24pxGood design makes room for clarity.
14 / 20pxGood design makes room for clarity.
12 / 18pxGood design makes room for clarity.
Room to breathe.
A shared spacing scale keeps layouts intentional, from a 2px detail to a 160px section gap.
spacing-none0pxspacing-xxs2pxspacing-xs4pxspacing-sm6pxspacing-md8pxspacing-lg12pxspacing-xl16pxspacing-2xl20pxspacing-3xl24pxspacing-4xl32pxspacing-5xl40pxspacing-6xl48pxspacing-7xl64pxspacing-8xl80pxspacing-9xl96pxspacing-10xl128pxspacing-11xl160pxbe-container≥ 768px viewport< 768px viewport--be-paragraph-max-widthShape and depth.
Soft corners and considered shadows create a clear hierarchy.
0px2px4px6px8px10px12px16px20px24px9999pxElevation
Shadow colors follow the source light and dark modes.
A little context.
Compact labels for status and categories. Always pair color with meaningful text.
ui/badgeAsk with clarity.
Labels, helpful hints, and visible feedback make forms easier to complete.
ui/input · field · checkbox · switchEnter a valid email address.
Unavailable fields keep their label and context.
Keep people informed.
Feedback that explains what happened and what to do next.
ui/alertChanges saved
Your project is up to date and ready to share.
A little context helps
Use clear, specific feedback to explain what happens next.
Review before publishing
A few project details still need your attention.
We couldn’t save your changes
Check your connection and try again.
Better together.
A small composition built entirely from the same tokens and components.
ui/cardA consistent starting point.
Tokens and components working together in a simple project card.
Bantu Ecommerce
Built on the BE Agency foundations.
Build from here.
Use semantic tokens for interfaces and shared components for consistent behavior.
Compose components
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
<Button variant="default" size="lg">
Start your project
</Button>
<Input type="email" aria-label="Email" />Apply the foundations
/* Tailwind utilities */
text-display-md font-semibold
bg-background text-foreground
rounded-md shadow-sm
/* Original Figma variable */
gap: var(--be-spacing-3xl);
color: var(--be-colors-text-text-primary-900);All 691 variables, 44 text styles, and 26 effects are saved in src/design-system/figma-tokens.json. Run bun run tokens:generate after updating that snapshot. See the README for component usage and conventions.