Arbor Design System
The system, rendered live.
This site did not need a design system. Pressing the easy button would have worked.
I built this instead from a blank canvas, over a few months, while teaching myself to use AI as leverage on craft rather than a substitute for it. Arbor was created with AI, not by AI. That is a very important distinction, and this page is the proof. This is a barely born system and there’s more to grow here. But nothing on this page came from a prompt and a hope. It came from thoughtful, intentional design with a tech-inclusive delivery.
Foundations
Foundations
The tokens everything else is built from. Every value here is read straight from tokens.ts. The single source of truth this page renders against.
Color
- ink#26231FBody text / icons
- surface#F5EFEBPage background
- surface-100#E4DBD6Warm tinted surface
- white#FFFFFFCard fill
- blue-500#8898A0Decorative fill only
- blue-700#3D525CAction / interactive
- sage-100#E4E4D6Tinted surface
- sage-500#9FA185Decorative fill only
- sage-700#575936Interactive-safe text
- wheat-100#E7E1CBTinted surface
- wheat-500#DBCD96Decorative fill only
- wheat-700#776622Interactive-safe text
- terracotta-500#DF7C54Expression / decorative
- terracotta-700#873B1DError semantic
- terracotta-punch#E2592BLarge display type only
- crimson-500#96352CReserved, never applied
Type scale
Arbor
- token
- display-lg
- size
- 72px
- line
- 1.05
Arbor
- token
- display-md
- size
- 56px
- line
- 1.05
Arbor
- token
- display-sm
- size
- 40px
- line
- 1.1
Arbor
- token
- subhead
- size
- 28px
- line
- 1.2
Arbor
- token
- body-lg
- size
- 18px
- line
- 1.55
Arbor
- token
- body-base
- size
- 16px
- line
- 1.55
Arbor
- token
- body-sm
- size
- 14px
- line
- 1.5
Arbor
- token
- caption
- size
- 12px
- line
- 1.4
Elevation
Radius
rounded-full is the sole (Avatar) exception.Motion
- duration-fast
- 150ms
- duration-base
- 250ms
- duration-slow
- 400ms
- ease-standard
- cubic-bezier(0.4, 0, 0.2, 1)
- ease-emphasized
- cubic-bezier(0.2, 0, 0, 1)
Grid
- small · 375px
- 12 col · 16/16
- medium · 600px
- 12 col · 16/16
- large · 900px
- 12 col · 24/24
- xlarge · 1200px
- 12 col · 24/24
The centerpiece
Button
One component, three orthogonal axes (variant, size, and state) for a full matrix of 30 combinations. The static states below (hover, focus, active) are forced so you can see all thirty at once, not just describe them.
| Variant | Size · md | Size · sm | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| default | hover | focus | active | disabled | default | hover | focus | active | disabled | |
| primary | ||||||||||
| secondary | ||||||||||
| tertiary | ||||||||||
Matrix axes per the spec: variant (primary / secondary / tertiary) × size (md / sm) × state = 30. Button also defines a third lg size, used for the home hero CTAs (see Composed → Hero).
Family
Actions & navigation
The interactive surface: everything that takes the reader somewhere or moves them through content.
A paragraph with an internal link and an external link inline.
Family
Form
Inputs, their states, and the two error patterns: inline field errors and the loud form-level summary.
As you'd like to be addressed.
Enter a valid email address.
Enter a message.
Please fix 2 issues before sending
- Email address is not valid.
- Message is required.
Get in touch
Let’s chat! Tell me about your project or role.
Family
Content
The building blocks that carry information: surfaces, labels, and disclosure.
Elevation 100
Elevation 200
Elevation 300
400 · interactive
“Carling doesn't just design screens. She designs the system underneath them, and it holds.”
A small Markdown renderer
The library ships its own renderer for content-package bodies. It supports
headings, paragraphs with bold and links, lists, and
rules, plus directive blocks that render design-system components.
- Token-driven typography at the editorial measure
- Soft line breaks preserved
- No MDX toolchain required
Family
Case study
The narrative components, the pieces that build a case-study page: intros, comparisons, annotated imagery, metrics, and timelines.
The problem
Operators were flying blind between shifts.
No shared view of the field state meant every handoff started with a phone call. We designed the console that ended them.
“The moment we treated onboarding as one system, the metrics stopped fighting each other.”
- 2025Design system v2Arbor
- 2023Console redesign shipsHalliburton
- 2020Research programHalliburton
Console: shift overview
Field detail drill-down
Handoff summary
Family
Feedback & state
Loading, empty, lost, and interrupted: the states a real product spends a lot of its life in.
Nothing here yet
New case studies land here as they ship. Check back soon.
I don’t have a page here.
The link may be broken, or I’ve moved what used to be here.
Modal is a portal overlay: it renders on document.body, locks page scroll, and traps focus while open, so it cannot appear inline in the page flow. This trigger mounts the real component so you can see the genuine open state (with the live ContactForm inside it).
Family
Composed
The largest pieces: components built from other components. These are whole regions of a page.
I design systemsthat hold.
Senior product designer, ten years, building the foundations enterprise products stand on.
About
I create more than pretty pictures.
Ten years designing complex enterprise products and the systems that hold them together, for Fortune 500 companies in energy, aviation, and insurance.
Career
- 2025 - PresentSenior Product DesignerSilk Atg
- 2023 - 2025Product DesignerHalliburton
- 2017 - 2020UX DesignerUnited Airlines
Experience
- Built and shipped the Arbor design system: 35 components, one token source of truth.
- Led the migration of three enterprise products onto shared foundations.
- Redesigned the digital DOS field-operations console used across 40+ sites.
- Ran the research program that reframed the core operator workflow.