canvas
#F1F0EBPrimary page background · --bg
Africa Ebony · Design system · v1.0
design
kit.
The visual language behind Africa Ebony: quiet, tactile and editorial. This living reference documents the exact foundations, type, components and responsive rules used across the storefront.
- Base unit
- 4 px
- Desktop root
- 17 px
- Mobile root
- 16 px
01 / foundations
colour
and material.
A warm gallery canvas lets the depth of ebony remain the visual focus.ink
#10100FHeadings, controls and active states · --text
backdrop
#DEDDD7Browser canvas
surface
#E8E7E1Quiet component surface
warm section
#E6E5DFEditorial section contrast
muted
#5F5E58Supporting copy · --muted
line
#CECDC6Dividers and input rules · --line
ebony
#070707Deepest material tone
restrained contrast
Use near-black against warm off-white. Pure white is reserved for negative space inside photography, not as the page canvas.
material first
Product photography uses natural shadows, contain sizing and multiply blending so carved objects feel placed rather than pasted.
fine structure
One-pixel warm-grey rules separate content. Large blocks rely on spacing before borders, shadows or decorative surfaces.
02 / typography
scale
with restraint.
Large, light headlines are balanced by compact labels and highly readable body copy.Primary sans serif
Inter
Aa Bb Cc Dd Ee Ff Gg
0123456789 — & ↗
- Weights in use
- 300 · 400 · 500 · 600
- Source
- Google Fonts import
- License
- SIL Open Font License 1.1
- CSS path
assets/css/styles.css:1- License record
assets/fonts/FONT-LICENSES.md
Arabic companion Noto Sans Arabic · weights 300–600 · SIL OFL 1.1.
System fallbacks Helvetica Neue, Arial and Georgia are referenced from the visitor’s operating system and are not distributed inside this theme.
Display XL · clamp(4.5rem, 10vw, 10rem)objects
with memory.
Display L · clamp(3.5rem, 7vw, 7.25rem)carved by hand.
Heading · clamp(3rem, 6vw, 6.25rem)nature’s depth.
Section title · clamp(1.15rem, 2vw, 1.7rem)The complete collection
Body · .84rem / 1.8Every piece begins with the grain. The material guides each cut, leaving a record of time, place and the maker’s hand.
UI · .78remshop · journal · buying guide · contact
Micro · .68rem / 0.12emHAND-CARVED · WEST AFRICAN EBONY
Headings weight 300–400 · tracking −4% to −7.5% · line-height .82–.95
Body weight 400 · neutral tracking · line-height 1.7–1.9
Labels uppercase · tracking 10%–14% · muted ink
Currency tabular reading · lowercase UI context
03 / components
quiet
interaction.
Controls stay compact and tactile. Shape, contrast and motion communicate state.buttons
Pill radius: 99px · transition: 200–300msform fields
Underline fields · 1px rule · no filled containerradius
Use only where touch or imagery benefits8px field option
18px product image
26px feature panel
99px action pill
Product card anatomy · 01
eternal antelopes
Animal380,00 €
- 01 Image ratio 1.55:1 desktop
- 02 Image radius 1.1rem
- 03 Grid gap 1rem
- 04 Hover scale 1.035
04 / layout
fluid
structure.
Full-width sections use a shared responsive gutter. Content grids collapse without changing reading order.global gutter
clamp(1.1rem,
4vw, 4rem)
18px minimum · 64px maximumdesktop grid
12 columns
Product collection uses four equal trackstablet breakpoint
980 px
Navigation collapses · products become two columnsmobile breakpoint
620 px
One-column editorial flow · 16px root123456789101112
spacing scale
4px base rhythm · fluid spacing for large sections41 unit82 units123 units164 units246 units328 units4812 units6416 units05 / motion & access
movement
with purpose.
Animation supports orientation and tactility; it never blocks reading or purchasing.Micro
200–300 ms
Buttons, icons and small state changesComponent
450–750 ms
Cards, drawers and section revealsAmbient
5.8–7 s
Slider progress and subtle image driftReduced motion All animation and transitions collapse to 0.01ms when the visitor requests reduced motion.
Keyboard Native buttons, links, labels and form fields preserve semantic focus and activation.
Touch Icon controls use a 32px visual frame; primary calls to action add generous horizontal padding.
Responsive type Display sizes use clamp(); the root drops from 17px to 16px below 620px.
implementation reference
one language.
every surface.
Foundationsassets/css/styles.css
Shopassets/css/shop.css
Productassets/css/product.css
Editorialassets/css/blog.css + article.css
Informationassets/css/info.css
This pageassets/css/design-kit.css