Buttons
Buttons are the primary call-to-action elements. Naluma uses two variants — primary (filled) and secondary (outlined) — kept deliberately simple. The brand personality leans 65% toward Companion, which means CTAs should suggest rather than demand. Button copy should be specific and forward-looking (“Start tonight’s session” not “Get started”).
Token source: tokens/component/button.json
Showcase
Section titled “Showcase”Primary
Secondary
Sizes — web platform
Variants
Section titled “Variants”Primary
Section titled “Primary”The primary button is the main action on any screen. It uses the burnt-sienna-deep color family — the warm earth tone that carries forward-motion energy within the calm palette.
| Property | Token | Resolved value |
|---|---|---|
| Background | semantic.color.action.primary | #A55838 |
| Background (hover) | semantic.color.action.primary-hover | #914D31 |
| Background (active) | semantic.color.action.primary-active | #80442B |
| Text | primitive.color.white | #FFFFFF |
| Border radius | primitive.radius.md | 8px |
| Font weight | primitive.font-weight.semibold | 600 |
| Transition | primitive.transition.fast | 150ms ease |
Secondary
Section titled “Secondary”The secondary button is for supporting actions. It is transparent with a 2px border and uses the dark-burgundy color family in light mode.
| Property | Token | Resolved value |
|---|---|---|
| Background | — | transparent |
| Background (hover) | — | rgba(134, 59, 61, 0.08) |
| Background (active) | — | rgba(134, 59, 61, 0.15) |
| Text | semantic.color.action.secondary | #863B3D |
| Border color | semantic.color.action.secondary | #863B3D |
| Border width | — | 2px |
| Border radius | primitive.radius.md | 8px |
| Font weight | primitive.font-weight.semibold | 600 |
| Transition | primitive.transition.fast | 150ms ease |
Secondary — Dark Mode
Section titled “Secondary — Dark Mode”In dark mode, the secondary button flips its color reference for contrast:
| Property | Dark mode token | Resolved value |
|---|---|---|
| Text | semantic.color-dark.action.secondary | #F9DFAE (pale-wheat) |
| Border color | semantic.color-dark.action.secondary | #F9DFAE |
| Text (hover) | semantic.color-dark.action.secondary-hover | #F2C087 (warm-gold) |
Size Chart
Section titled “Size Chart”Buttons have three sizes, each with separate specs for app (Flutter) and web (WordPress). App sizes enforce a 44px minimum touch target per accessibility requirements.
| Property | App | Web |
|---|---|---|
| Padding Y | 12px (spacing.12) | 16px (spacing.16) |
| Padding X | 24px (spacing.24) | 32px (spacing.32) |
| Font size | 16px (font-size.16) | 16px (font-size.16) |
| Min height | 44px | — |
Medium
Section titled “Medium”| Property | App | Web |
|---|---|---|
| Padding Y | 8px (spacing.8) | 12px (spacing.12) |
| Padding X | 16px (spacing.16) | 24px (spacing.24) |
| Font size | 14px (font-size.14) | 14px (font-size.14) |
| Min height | 44px | — |
| Property | App | Web |
|---|---|---|
| Padding Y | 6px (spacing.6) | 8px (spacing.8) |
| Padding X | 12px (spacing.12) | 16px (spacing.16) |
| Font size | 12px (font-size.12) | 13px (font-size.13) |
| Min height | 44px | — |
Note that even the small app button maintains a 44px minimum height. The smaller padding and font size provide visual hierarchy without sacrificing touch target size.
States
Section titled “States”Disabled
Section titled “Disabled”Disabled buttons reduce opacity to primitive.opacity.disabled (0.4) and suppress all interaction feedback. They should be used sparingly — the companion personality favors guiding users away from unavailable actions rather than showing greyed-out options.
Active / Pressed
Section titled “Active / Pressed”On press, the button scales to 0.98 (the active-scale token). This is a subtle physical feedback that reinforces the “settling” motion language — a gentle compression rather than a bounce.
Focus is indicated by a ring around the button:
| Property | Value |
|---|---|
| Ring color | semantic.color.focus.ring (#A55838) |
| Ring width | 2px |
| Ring offset | 2px |
The focus ring uses the primary action color to maintain warmth. In dark mode, it shifts to semantic.color-dark.focus.ring (#F2C087, warm-gold).
Usage Guidelines
Section titled “Usage Guidelines”- One primary button per screen. Multiple primary buttons create competing urgency, which conflicts with the Still personality position.
- Button copy should be specific. “Begin sleep session” not “Continue.” “Learn what’s happening” not “Read more.”
- Avoid disabled buttons where possible. Guide the user toward available actions instead.
- Never use buttons for navigation-only actions. Use text links or navigation patterns instead — buttons imply that something will happen, not that you will go somewhere.