CEL
CONTEXT • ELEMENT • LAYER
A front-end naming and architecture methodology for tokenised design systems.
Built for the era where design decisions are encoded as tokens, passed through semantic layers, and consumed by both humans and machines.
The class name is a contract.
The token is the substance.
SKILLS PACKAGE v2.0
Three skills. One coherent workflow.
CEL Audit · UX Skills · Knowledge Capture
CEL AUDIT
Audits front-end codeagainst CEL methodology.Scores class naming,token architecture anddata attributes.
Webflow • HTML
UX SKILLS
Five-phase UX process— Empathise, Define,Ideate, Build, Test.Briefs, audits, tokenhandoffs. Reusable
Notion • Figma
KNOWLEDGE CAPTURE
Turns discussions intostructured docs. Stopsgood thinking fromdisappearing intoSlack threads.
Notion • Wiki
The SYNTAX
context_element--layer
card
context only
card__title
context + element
card__title--featured
context + element + layer
card--dark
context + layer (no element)
Max three parts in a class name.
If you need four, you have a new Context.
CONTEXT
The named component scope.
The outermost boundary of a self-contained UI unit.
Maps directly to
a design token namespace
Maps directly to
a component in the system
Appears on
the root element
Scopes
every element and layer within
<section class="case-study">
<h2 class="case-study__heading">
Naming
Lowercase, single words where possible.
Compound contexts use a hyphen: case-study
ELEMENT
A names part inside a Context.
A meaningful structural piece with its own token mapping.
Name by role, not tag.
Keeps the class stable when markup changes.
DO
card__heading
card__body
card__label
card__media
card__cta
DON'T
card__h2
card__p
card__span
card__img
card__a
Elements are named for their role, not their HTML tag.
LAYER
A state, variant, or condition applied to a Context or Element.
Name by role, not tag.
Keeps the class stable when markup changes.
card--featured
--card-featured-bg
variant
card__heading--dark
--card-heading-dark-color
conditional
btn--loading
--btn-loading-opacity
conditional
nav__item--active
--nav-item-active-border
selection state
Layer names describe the condition.
featured, loading, active, dark, collapsed
TOKEN STACK
PRIMITIVE
Raw, unnamed values.No semantic meaning.Never used directly in components.
--color-blue-500: #1D4ED8
SEMANTIC
Named for intent, not appearance.Maps a primitive to a role.Shared language across components.
--color-action: var(--color-blue-500)
COMPONENT
Scoped to a specific Context.Consumes a semantic token.The exact value a class resolves to.
--btn-bg: var(--color-action)
MACHINE READIBILITY
Human-readable class names.
Machine-readable data attributes.
Two consumers, two contracts.
<div
class="card card--featured"
data-cel-context="card"
data-cel-layer="featured"
data-cel-token="--card"
data-cel-maturity="stable"
>
data-cel-context
Component name
data-cel-layer
Active variant or state
data-cel-token
Token namespace
data-cel-maturity
Lifecycle stage
FORBIDDEN PATTERNS
card__heading__sub
No nested elements.
Flatten to card__subheading.
card--featured--large
No stacked layers.
Use two separate classes.
color: #1a1a1a
No hardcoded values.
Use a component token.
--btn-bg: var( --color-blue-500)
No primitive skip.
Route through the semantic layer.
data-cel-maturity="stable" (set by hand)
Maturity is set by registry.
Never set manually in templates.
NEW COMPONENT CHECKLIST
Five rules Claude must follow. No exceptions.
01
Name the Context
One word, lowercase, no abbreviations
02
List every Element
Name by role, not tag
03
List every Layer
Name by condition or variant
04
Write primitive tokens
Raw values first
05
Write semantic tokens
Map each primitive to a role
06
Write component tokens
One per property per element/layer
07
Write the CSS
Every rule consumes only component tokens
08
Add data-cel-* attributes
All four on the root element
09
Register as draft
Promote to stable after review
CHAOS
CLARITY
CONFIDENCE
VELOCITY
ADVANTAGE
↓
↓
↓
↓
Download the Skills at hux.works/skills
Hamish Duncan · HUX · Design Systems Engineer
Penny Black engages its partners to question how their company's futures can be madebetter, to identify strategies that build and future-proof the organisation, and of course,realise long term growth in a more sustainable, regenerative way.
After all, there is no Planet B. We must replenish and reuse what we already have, andwhilst doing so explore potential renewable sources of income and influence. We mustreform our ways of business, to be ethically healthier and environmentally justifiable.
Penny Black provides foresight into trends within your company’s remit — be they economic, environmental or social, that may affect your organisation.
We devise and employ regenerative concepts that shift the paradigm away from theshareholder-centric strategic model towards more sustainable mission-centric strategies,such as redevelopment and reinvestment.
Using design-led initiatives, we address the need for a rebalance between production andwaste within your company’s digital products and services.
And by collaborating with your organisation, we’ll influence your users (consumers, clients, and workforce) to make better choices in order to play their own part towards a carbon-neutral society.
The main reason for any undertaking is not the what or how, but why your company must adopt change to become sustainable.
Answer this, does your business provide a service that, should it stop, the world would be worse off because of it? Does your brand meet the needs of current users whilst at the same time allowing for future generations to have their potential needs met?
Future generations will be more ecologically self aware than those that came before, and your company must be cognisant of this. Your organisation must renew, repair and reuse, so that there are enough resources for the future. This is where Penny Black comes in.