Inputs

Inputs should feel calm and uncluttered. The user is already under cognitive load from their condition — form fields should reduce friction, not add it. Default styling uses the warm palette with gentle borders; state changes are communicated through border color shifts rather than layout movement.

Token source: tokens/component/input.json

Showcase

Default Session goal

Focus Session goal

Error Email address Enter a valid email address

Success Email address Looks good

Disabled Username

Default State

Property	Token	Resolved value
Background	`primitive.color.white`	`#FFFFFF`
Text color	`semantic.color.text.primary`	`#3D2E2A` (warm-dark)
Placeholder color	`semantic.color.text.muted`	`#B09A90` (dim-brown)
Border color	`semantic.color.border.default`	`#F2C087` (warm-gold)
Border width	—	1px
Border radius	`primitive.radius.md`	8px
Padding Y	`primitive.spacing.10`	10px
Padding X	`primitive.spacing.12`	12px
Font size	`primitive.font-size.15`	15px
Font weight	`primitive.font-weight.regular`	400
Transition	`primitive.transition.fast`	150ms ease

States

Focus

When the input receives focus, the border shifts to the primary action color and gains a focus ring.

Property	Token	Resolved value
Border color	`semantic.color.focus.ring`	`#A55838` (burnt-sienna-deep)
Ring width	—	2px
Ring offset	—	0px

Error

Error state uses the feedback error color. The border and any helper text below the input turn red.

Property	Token	Resolved value
Border color	`semantic.color.feedback.error`	`#DC2626`
Helper text color	`semantic.color.feedback.error`	`#DC2626`

Error messages should be specific and non-alarming. “This field is required” rather than “Error.” For a tinnitus audience, error states should never create a sense of urgency or failure.

Success

Success state uses the feedback success color. Typically used for validated fields (e.g., after entering a valid tinnitus onset date).

Property	Token	Resolved value
Border color	`semantic.color.feedback.success`	`#98D398`

Disabled

Disabled inputs reduce opacity and change the background to a muted tone.

Property	Token	Resolved value
Opacity	`primitive.opacity.disabled`	0.4
Background	`primitive.color.pale-wheat`	`#F9DFAE`

Summary Table

State	Border color	Background	Opacity
Default	`#F2C087` (warm-gold)	`#FFFFFF`	1
Focus	`#A55838` (burnt-sienna-deep) + 2px ring	`#FFFFFF`	1
Error	`#DC2626`	`#FFFFFF`	1
Success	`#98D398` (soft-sage)	`#FFFFFF`	1
Disabled	`#F2C087` (warm-gold)	`#F9DFAE` (pale-wheat)	0.4

Usage Guidelines

Labels above, not inside. Placeholder text disappears on focus, which creates cognitive overhead for users who may already be attention-depleted. Always pair inputs with visible labels.
One field at a time where possible. Multi-field forms should be broken into steps, especially during onboarding. One idea per view.
Generous spacing between fields. Use spacing.24 or spacing.32 between form groups to give the layout breathing room.