
How to Build a Climate-Ready Data Stack
Insights
·
4 min

Client List
Client Name
Meal Plan
Training Plan
Weight (kg)
Target (kg)
Alex
Carb Load
HIIT
113
98
Overdue
Jordan
Veg Plan 1
Muscle Builder
78
92
Overdue
Taylor
Paleo
Zero 2 Hero
67
70
Dispute
Sam
Protein Fix
Calisthenics
81
85
Overdue
Casey
Balanced
Leg Burners
63
65
Pending
001 | CASE STUDY
Coaches want to focus on helping people, not juggling systems. But as their client numbers grow, fragmented workflows make it harder to manage everything effectively. I redesigned the experience to bring their tools and processes together into one unified, efficient workflow.
View Case
Text
Default
Text / Primary
$dui-color-text-primary
neutral / $900
Primary text used on default surfaces.
Aa
Text / Secondary
$dui-color-text-secondary
neutral / $600
Secondary text used on default surfaces.
Aa
Text / Tertiary
$dui-color-text-tertiary
neutral / $300
Tertiary/disabled text used on default surfaces.
Aa
Status
Text / Error
$dui-color-text-error
error / $500
Negative text indicating errors of destructive outcome.
Aa
Text / Warning
$dui-color-text-warning
warning / $700
Cautionary text indicating potential risks or actions requiring attention.
Aa
Text / Info
$dui-color-text-info
info / $500
Informational text indicating neutral guidance or helpful context.
Aa
Text / Success
$dui-color-text-success
success / $600
Positive text indicating confirmation of successful or completed actions.
Aa
Contrast
Text / Primary / Contrast
$dui-color-text-primary-contrast
neutral / $50
Primary text used on contrast surfaces.
Aa
Text / Secondary / Contrast
$dui-color-text-secondary-contrast
neutral / $400
Secondary text used on contrast surfaces.
Aa
Text / Tertiary / Contrast
$dui-color-text-disabled-tertiary
neutral / $700
Tertiary/disabled text used on contrast surfaces.
Aa
Iconography
Default
Icon / Primary
$dui-color-icon-primary
neutral / $900
Primary icons used on default surfaces.
Icon / Secondary
$dui-color-icon-secondary
neutral / $600
Secondary icons used on default surfaces.
Icon / Tertiary
$dui-color-icon-tertiary
neutral / $300
Tertiary/disabled icons used on default surfaces.
Status
Icon / Error
$dui-color-icon-error
error / $500
Negative icons indicating errors of destructive outcome.
Icon / Warning
$dui-color-icon-warning
warning / $700
Cautionary icons indicating potential risks or actions requiring attention.
Icon / Info
$dui-color-icon-info
info / $500
Informational icons indicating neutral guidance or helpful context.
Icon / Success
$dui-color-icon-success
success / $600
Positive icons indicating confirmation of successful or completed actions.
Contrast
Icon / Primary / Contrast
$dui-color-icon-primary-contrast
neutral / $50
Primary icons used on contrast surfaces.
Icon / Secondary / Contrast
$dui-color-icon-secondary-contrast
neutral / $400
Secondary icons used on contrast surfaces.
Icon / Tertiray / Contrast
$dui-color-icon-disabled-tertiary
neutral / $700
Tertiary/disabled icons used on contrast surfaces.
Border
Default
Border / On Page
$dui-color-border-on-page
neutral / $100
Border color used on $dui-color-surface-page
Border / On Primary
$dui-color-border-on-primary
neutral / $100
Border color used on $dui-color-surface-primary
Border / On Secondary
$dui-color-border-on-secondary
neutral / $200
Border color used on $dui-color-surface-secondary
Border / On Tertiary
$dui-color-border-on-tertiary
neutral / $300
Border color used on $dui-color-surface-tertiary
Divider
Default
Divider / On Page
$dui-color-divider-on-page
neutral / $100
Divider color used on $dui-color-surface-page
Divider / On Primary
$dui-color-divider-on-primary
neutral / $200
Divider color used on $dui-color-surface-primary
Divider / On Secondary
$dui-color-divider-on-secondary
neutral / $300
Divider color used on $dui-color-surface-secondary
Divider / On Tertiary
$dui-color-divider-on-tertiary
neutral / $400
Divider color used on $dui-color-surface-tertiary
Divider / On Brand
$dui-color-divider-on-brand
brand / $600
Divider color used on $dui-color-surface-tertiary
Surface
Default
Surface / Page
$dui-color-surface-page
$white
Surface color used for the background of pages and large layout areas.
Surface / Primary
$dui-color-surface-primary
neutral / $50
Primary surface color used for core UI components such as cards, containers, and main content blocks.
Surface / Secondary
$dui-color-surface-secondary
neutral / $100
Secondary surface color used for UI elements with varying emphasis based on layered depth.
Surface / Tertiary
$dui-color-surface-tertiary
neutral / $200
Tertiary surface color used for elevated UI elements layered above secondary surfaces.
Overlay
Surface / Overlay / Primary
$dui-color-surface-overlay-primary
neutral / $900 @ 64%
Primary overlay used to hide the background when using Dialogs.
Surface / Overlay / Secondary
$dui-color-surface-overlay-secondary
neutral / $900 @ 40%
Secondary overlay used to hide the background when using Dialogs.
Status
Surface / Error
$dui-color-surface-error
error / $50
Subtle background used to indicate errors of destructive outcome.
Surface / Warning
$dui-color-surface-warning
warning / $50
Subtle background used to indicate potential risks or actions requiring attention.
Surface / Info
$dui-color-surface-info
info / $50
Subtle background used to indicate neutral guidance or helpful context.
Surface / Success
$dui-color-surface-success
success / $50
Subtle background used to indicate confirmation of successful or completed actions.
Gradient
Primary
Gradient / Primary / Top
$dui-color-gradient-primary-top
brand / $900
->
brand / $800
Gradient / Primary / Right
$dui-color-gradient-primary-right
brand / $900
->
brand / $800
Gradient / Primary / Bottom
$dui-color-gradient-primary-bottom
brand / $900
->
brand / $800
Gradient / Primary / Left
$dui-color-gradient-primary-left
brand / $900
->
brand / $800
Secondary
Gradient / Secondary / Top
$dui-color-gradient-secondary-top
brand / $700
->
brand / $500
Gradient / Secondary / Right
$dui-color-gradient-secondary-right
brand / $700
->
brand / $500
Gradient / Secondary / Bottom
$dui-color-gradient-secondary-bottom
brand / $700
->
brand / $500
Gradient / Secondary / Left
$dui-color-gradient-secondary-left
brand / $700
->
brand / $500
002 | CASE STUDY
When products scale, the way teams work needs to scale with them. I build design systems that create shared foundations, reduce friction, and help teams deliver consistent, thoughtful experiences across every platform.
View Case

Client List
Client Name
Meal Plan
Training Plan
Weight (kg)
Target (kg)
Alex
Carb Load
HIIT
113
98
Overdue
Jordan
Veg Plan 1
Muscle Builder
78
92
Overdue
Taylor
Paleo
Zero 2 Hero
67
70
Dispute
Sam
Protein Fix
Calisthenics
81
85
Overdue
Casey
Balanced
Leg Burners
63
65
Pending
003 | CASE STUDY
How I build and sustain team culture at pace, grounded in trust, mentorship, shared pride, fun, and genuine care.
View Case

We believe better decisions start with better data—measured, visible, and trusted.
We build tools that help teams connect the dots between operations, impact, and accountability.
We support real-world momentum—helping organizations move from ambition to measurable change.

With fragmented data and growing reporting pressure, Acme turned to Aetherfield to streamline their ESG workflows. The result? Faster decisions, fewer spreadsheets, and 34% more coverage.
Read case study

How to Build a Climate-Ready Data Stack
Insights
·
4 min

Sustainability Isn’t a Side Project: Making Impact Operational
Strategy
·
7 min

Inside the Aetherfield Model: How We Turn Data Into Action
Insights
·
5 min
View all articles

Elliot Williams
Head of Sustainability, Flux Materials

Client List
Client Name
Meal Plan
Training Plan
Weight (kg)
Target (kg)
Alex
Carb Load
HIIT
113
98
Overdue
Jordan
Veg Plan 1
Muscle Builder
78
92
Overdue
Taylor
Paleo
Zero 2 Hero
67
70
Dispute
Sam
Protein Fix
Calisthenics
81
85
Overdue
Casey
Balanced
Leg Burners
63
65
Pending
001 | CASE STUDY
Coaches want to focus on helping people, not juggling systems. But as their client numbers grow, fragmented workflows make it harder to manage everything effectively. I redesigned the experience to bring their tools and processes together into one unified, efficient workflow.
View Case
Text
Default
Text / Primary
$dui-color-text-primary
neutral / $900
Primary text used on default surfaces.
Aa
Text / Secondary
$dui-color-text-secondary
neutral / $600
Secondary text used on default surfaces.
Aa
Text / Tertiary
$dui-color-text-tertiary
neutral / $300
Tertiary/disabled text used on default surfaces.
Aa
Status
Text / Error
$dui-color-text-error
error / $500
Negative text indicating errors of destructive outcome.
Aa
Text / Warning
$dui-color-text-warning
warning / $700
Cautionary text indicating potential risks or actions requiring attention.
Aa
Text / Info
$dui-color-text-info
info / $500
Informational text indicating neutral guidance or helpful context.
Aa
Text / Success
$dui-color-text-success
success / $600
Positive text indicating confirmation of successful or completed actions.
Aa
Contrast
Text / Primary / Contrast
$dui-color-text-primary-contrast
neutral / $50
Primary text used on contrast surfaces.
Aa
Text / Secondary / Contrast
$dui-color-text-secondary-contrast
neutral / $400
Secondary text used on contrast surfaces.
Aa
Text / Tertiary / Contrast
$dui-color-text-disabled-tertiary
neutral / $700
Tertiary/disabled text used on contrast surfaces.
Aa
Iconography
Default
Icon / Primary
$dui-color-icon-primary
neutral / $900
Primary icons used on default surfaces.
Icon / Secondary
$dui-color-icon-secondary
neutral / $600
Secondary icons used on default surfaces.
Icon / Tertiary
$dui-color-icon-tertiary
neutral / $300
Tertiary/disabled icons used on default surfaces.
Status
Icon / Error
$dui-color-icon-error
error / $500
Negative icons indicating errors of destructive outcome.
Icon / Warning
$dui-color-icon-warning
warning / $700
Cautionary icons indicating potential risks or actions requiring attention.
Icon / Info
$dui-color-icon-info
info / $500
Informational icons indicating neutral guidance or helpful context.
Icon / Success
$dui-color-icon-success
success / $600
Positive icons indicating confirmation of successful or completed actions.
Contrast
Icon / Primary / Contrast
$dui-color-icon-primary-contrast
neutral / $50
Primary icons used on contrast surfaces.
Icon / Secondary / Contrast
$dui-color-icon-secondary-contrast
neutral / $400
Secondary icons used on contrast surfaces.
Icon / Tertiray / Contrast
$dui-color-icon-disabled-tertiary
neutral / $700
Tertiary/disabled icons used on contrast surfaces.
Border
Default
Border / On Page
$dui-color-border-on-page
neutral / $100
Border color used on $dui-color-surface-page
Border / On Primary
$dui-color-border-on-primary
neutral / $100
Border color used on $dui-color-surface-primary
Border / On Secondary
$dui-color-border-on-secondary
neutral / $200
Border color used on $dui-color-surface-secondary
Border / On Tertiary
$dui-color-border-on-tertiary
neutral / $300
Border color used on $dui-color-surface-tertiary
Divider
Default
Divider / On Page
$dui-color-divider-on-page
neutral / $100
Divider color used on $dui-color-surface-page
Divider / On Primary
$dui-color-divider-on-primary
neutral / $200
Divider color used on $dui-color-surface-primary
Divider / On Secondary
$dui-color-divider-on-secondary
neutral / $300
Divider color used on $dui-color-surface-secondary
Divider / On Tertiary
$dui-color-divider-on-tertiary
neutral / $400
Divider color used on $dui-color-surface-tertiary
Divider / On Brand
$dui-color-divider-on-brand
brand / $600
Divider color used on $dui-color-surface-tertiary
Surface
Default
Surface / Page
$dui-color-surface-page
$white
Surface color used for the background of pages and large layout areas.
Surface / Primary
$dui-color-surface-primary
neutral / $50
Primary surface color used for core UI components such as cards, containers, and main content blocks.
Surface / Secondary
$dui-color-surface-secondary
neutral / $100
Secondary surface color used for UI elements with varying emphasis based on layered depth.
Surface / Tertiary
$dui-color-surface-tertiary
neutral / $200
Tertiary surface color used for elevated UI elements layered above secondary surfaces.
Overlay
Surface / Overlay / Primary
$dui-color-surface-overlay-primary
neutral / $900 @ 64%
Primary overlay used to hide the background when using Dialogs.
Surface / Overlay / Secondary
$dui-color-surface-overlay-secondary
neutral / $900 @ 40%
Secondary overlay used to hide the background when using Dialogs.
Status
Surface / Error
$dui-color-surface-error
error / $50
Subtle background used to indicate errors of destructive outcome.
Surface / Warning
$dui-color-surface-warning
warning / $50
Subtle background used to indicate potential risks or actions requiring attention.
Surface / Info
$dui-color-surface-info
info / $50
Subtle background used to indicate neutral guidance or helpful context.
Surface / Success
$dui-color-surface-success
success / $50
Subtle background used to indicate confirmation of successful or completed actions.
Gradient
Primary
Gradient / Primary / Top
$dui-color-gradient-primary-top
brand / $900
->
brand / $800
Gradient / Primary / Right
$dui-color-gradient-primary-right
brand / $900
->
brand / $800
Gradient / Primary / Bottom
$dui-color-gradient-primary-bottom
brand / $900
->
brand / $800
Gradient / Primary / Left
$dui-color-gradient-primary-left
brand / $900
->
brand / $800
Secondary
Gradient / Secondary / Top
$dui-color-gradient-secondary-top
brand / $700
->
brand / $500
Gradient / Secondary / Right
$dui-color-gradient-secondary-right
brand / $700
->
brand / $500
Gradient / Secondary / Bottom
$dui-color-gradient-secondary-bottom
brand / $700
->
brand / $500
Gradient / Secondary / Left
$dui-color-gradient-secondary-left
brand / $700
->
brand / $500
002 | CASE STUDY
When products scale, the way teams work needs to scale with them. I build design systems that create shared foundations, reduce friction, and help teams deliver consistent, thoughtful experiences across every platform.
View Case

Client List
Client Name
Meal Plan
Training Plan
Weight (kg)
Target (kg)
Alex
Carb Load
HIIT
113
98
Overdue
Jordan
Veg Plan 1
Muscle Builder
78
92
Overdue
Taylor
Paleo
Zero 2 Hero
67
70
Dispute
Sam
Protein Fix
Calisthenics
81
85
Overdue
Casey
Balanced
Leg Burners
63
65
Pending
003 | CASE STUDY
How I build and sustain team culture at pace, grounded in trust, mentorship, shared pride, fun, and genuine care.
View Case

We believe better decisions start with better data—measured, visible, and trusted.
We build tools that help teams connect the dots between operations, impact, and accountability.
We support real-world momentum—helping organizations move from ambition to measurable change.

With fragmented data and growing reporting pressure, Acme turned to Aetherfield to streamline their ESG workflows. The result? Faster decisions, fewer spreadsheets, and 34% more coverage.
Read case study

How to Build a Climate-Ready Data Stack
Insights
·
4 min

Sustainability Isn’t a Side Project: Making Impact Operational
Strategy
·
7 min

Inside the Aetherfield Model: How We Turn Data Into Action
Insights
·
5 min
View all articles

Elliot Williams
Head of Sustainability, Flux Materials

Client List
Client Name
Meal Plan
Training Plan
Weight (kg)
Target (kg)
Alex
Carb Load
HIIT
113
98
Overdue
Jordan
Veg Plan 1
Muscle Builder
78
92
Overdue
Taylor
Paleo
Zero 2 Hero
67
70
Dispute
Sam
Protein Fix
Calisthenics
81
85
Overdue
Casey
Balanced
Leg Burners
63
65
Pending
001 | CASE STUDY
Coaches want to focus on helping people, not juggling systems. But as their client numbers grow, fragmented workflows make it harder to manage everything effectively. I redesigned the experience to bring their tools and processes together into one unified, efficient workflow.
View Case
002 | CASE STUDY
When products scale, the way teams work needs to scale with them. I build design systems that create shared foundations, reduce friction, and help teams deliver consistent, thoughtful experiences across every platform.
View Case
Text
Default
Text / Primary
$dui-color-text-primary
neutral / $900
Primary text used on default surfaces.
Aa
Text / Secondary
$dui-color-text-secondary
neutral / $600
Secondary text used on default surfaces.
Aa
Text / Tertiary
$dui-color-text-tertiary
neutral / $300
Tertiary/disabled text used on default surfaces.
Aa
Status
Text / Error
$dui-color-text-error
error / $500
Negative text indicating errors of destructive outcome.
Aa
Text / Warning
$dui-color-text-warning
warning / $700
Cautionary text indicating potential risks or actions requiring attention.
Aa
Text / Info
$dui-color-text-info
info / $500
Informational text indicating neutral guidance or helpful context.
Aa
Text / Success
$dui-color-text-success
success / $600
Positive text indicating confirmation of successful or completed actions.
Aa
Contrast
Text / Primary / Contrast
$dui-color-text-primary-contrast
neutral / $50
Primary text used on contrast surfaces.
Aa
Text / Secondary / Contrast
$dui-color-text-secondary-contrast
neutral / $400
Secondary text used on contrast surfaces.
Aa
Text / Tertiary / Contrast
$dui-color-text-disabled-tertiary
neutral / $700
Tertiary/disabled text used on contrast surfaces.
Aa
Iconography
Default
Icon / Primary
$dui-color-icon-primary
neutral / $900
Primary icons used on default surfaces.
Icon / Secondary
$dui-color-icon-secondary
neutral / $600
Secondary icons used on default surfaces.
Icon / Tertiary
$dui-color-icon-tertiary
neutral / $300
Tertiary/disabled icons used on default surfaces.
Status
Icon / Error
$dui-color-icon-error
error / $500
Negative icons indicating errors of destructive outcome.
Icon / Warning
$dui-color-icon-warning
warning / $700
Cautionary icons indicating potential risks or actions requiring attention.
Icon / Info
$dui-color-icon-info
info / $500
Informational icons indicating neutral guidance or helpful context.
Icon / Success
$dui-color-icon-success
success / $600
Positive icons indicating confirmation of successful or completed actions.
Contrast
Icon / Primary / Contrast
$dui-color-icon-primary-contrast
neutral / $50
Primary icons used on contrast surfaces.
Icon / Secondary / Contrast
$dui-color-icon-secondary-contrast
neutral / $400
Secondary icons used on contrast surfaces.
Icon / Tertiray / Contrast
$dui-color-icon-disabled-tertiary
neutral / $700
Tertiary/disabled icons used on contrast surfaces.
Border
Default
Border / On Page
$dui-color-border-on-page
neutral / $100
Border color used on $dui-color-surface-page
Border / On Primary
$dui-color-border-on-primary
neutral / $100
Border color used on $dui-color-surface-primary
Border / On Secondary
$dui-color-border-on-secondary
neutral / $200
Border color used on $dui-color-surface-secondary
Border / On Tertiary
$dui-color-border-on-tertiary
neutral / $300
Border color used on $dui-color-surface-tertiary
Divider
Default
Divider / On Page
$dui-color-divider-on-page
neutral / $100
Divider color used on $dui-color-surface-page
Divider / On Primary
$dui-color-divider-on-primary
neutral / $200
Divider color used on $dui-color-surface-primary
Divider / On Secondary
$dui-color-divider-on-secondary
neutral / $300
Divider color used on $dui-color-surface-secondary
Divider / On Tertiary
$dui-color-divider-on-tertiary
neutral / $400
Divider color used on $dui-color-surface-tertiary
Divider / On Brand
$dui-color-divider-on-brand
brand / $600
Divider color used on $dui-color-surface-tertiary
Surface
Default
Surface / Page
$dui-color-surface-page
$white
Surface color used for the background of pages and large layout areas.
Surface / Primary
$dui-color-surface-primary
neutral / $50
Primary surface color used for core UI components such as cards, containers, and main content blocks.
Surface / Secondary
$dui-color-surface-secondary
neutral / $100
Secondary surface color used for UI elements with varying emphasis based on layered depth.
Surface / Tertiary
$dui-color-surface-tertiary
neutral / $200
Tertiary surface color used for elevated UI elements layered above secondary surfaces.
Overlay
Surface / Overlay / Primary
$dui-color-surface-overlay-primary
neutral / $900 @ 64%
Primary overlay used to hide the background when using Dialogs.
Surface / Overlay / Secondary
$dui-color-surface-overlay-secondary
neutral / $900 @ 40%
Secondary overlay used to hide the background when using Dialogs.
Status
Surface / Error
$dui-color-surface-error
error / $50
Subtle background used to indicate errors of destructive outcome.
Surface / Warning
$dui-color-surface-warning
warning / $50
Subtle background used to indicate potential risks or actions requiring attention.
Surface / Info
$dui-color-surface-info
info / $50
Subtle background used to indicate neutral guidance or helpful context.
Surface / Success
$dui-color-surface-success
success / $50
Subtle background used to indicate confirmation of successful or completed actions.
Gradient
Primary
Gradient / Primary / Top
$dui-color-gradient-primary-top
brand / $900
->
brand / $800
Gradient / Primary / Right
$dui-color-gradient-primary-right
brand / $900
->
brand / $800
Gradient / Primary / Bottom
$dui-color-gradient-primary-bottom
brand / $900
->
brand / $800
Gradient / Primary / Left
$dui-color-gradient-primary-left
brand / $900
->
brand / $800
Secondary
Gradient / Secondary / Top
$dui-color-gradient-secondary-top
brand / $700
->
brand / $500
Gradient / Secondary / Right
$dui-color-gradient-secondary-right
brand / $700
->
brand / $500
Gradient / Secondary / Bottom
$dui-color-gradient-secondary-bottom
brand / $700
->
brand / $500
Gradient / Secondary / Left
$dui-color-gradient-secondary-left
brand / $700
->
brand / $500

Client List
Client Name
Meal Plan
Training Plan
Weight (kg)
Target (kg)
Alex
Carb Load
HIIT
113
98
Overdue
Jordan
Veg Plan 1
Muscle Builder
78
92
Overdue
Taylor
Paleo
Zero 2 Hero
67
70
Dispute
Sam
Protein Fix
Calisthenics
81
85
Overdue
Casey
Balanced
Leg Burners
63
65
Pending
003 | CASE STUDY
How I build and sustain team culture at pace, grounded in trust, mentorship, shared pride, fun, and genuine care.
View Case

We believe better decisions start with better data—measured, visible, and trusted.
We build tools that help teams connect the dots between operations, impact, and accountability.
We support real-world momentum—helping organizations move from ambition to measurable change.

With fragmented data and growing reporting pressure, Acme turned to Aetherfield to streamline their ESG workflows. The result? Faster decisions, fewer spreadsheets, and 34% more coverage.
Read case study

How to Build a Climate-Ready Data Stack
Insights
·
4 min

Sustainability Isn’t a Side Project: Making Impact Operational
Strategy
·
7 min

Inside the Aetherfield Model: How We Turn Data Into Action
Insights
·
5 min
View all articles

Elliot Williams
Head of Sustainability, Flux Materials