CSS block preview sample

Primary Action
Input Surface
Subtle Surface

Token and spacing effects appear here.

:root {
  /* Primary - trust, authority */
  --brand-primary:   #C4640A;
  --brand-primary-2: #A35208;

  /* Secondary — balance and support */
  --brand-secondary:   #2A5A6A;
  --brand-secondary-2: #1A3A4A;

  /* Accent - attention */
  --brand-accent: #8A3A6A;

  /* Neutral surface */
  --brand-bg:      #F8F7F4;
  --brand-surface: #FFFFFF;
  --brand-border:  #E4E0D8;
}