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
Icon + Text
Icon Only
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).
Icon Buttons
Section titled “Icon Buttons”Buttons can include icons from the Lucide icon system for visual reinforcement. Two patterns are supported: icon + text and icon only.
Icon + Text
Section titled “Icon + Text”Pair an icon with a text label to reinforce the action. Place the icon on the leading side (left in LTR) for action reinforcement (“Start session” with a play icon), or on the trailing side (right) for directional cues (“Continue” with an arrow).
Icon Only
Section titled “Icon Only”Use icon-only buttons when the icon is universally understood (plus, close, share, edit) and space is constrained. Icon-only buttons use square padding for a balanced shape.
Icon Token Reference
Section titled “Icon Token Reference”| Property | Token | Resolved value |
|---|---|---|
| Icon-text gap | component.button.icon.gap | 8px (spacing.8) |
| Icon size (lg) | component.button.icon.size-lg | 20px (spacing.20) |
| Icon size (md) | component.button.icon.size-md | 16px (spacing.16) |
| Icon size (sm) | component.button.icon.size-sm | 16px (spacing.16) |
| Icon-only padding (lg) | component.button.icon.only-padding-lg | 12px (spacing.12) |
| Icon-only padding (md) | component.button.icon.only-padding-md | 8px (spacing.8) |
| Icon-only padding (sm) | component.button.icon.only-padding-sm | 6px (spacing.6) |
Icon color inherits from currentColor, matching the button text color automatically in both variants and both light/dark modes.
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.
- Icon-only buttons must have
aria-label. The visual icon alone is not sufficient for screen readers. - Prefer icon + text over icon-only for actions that aren’t universally recognizable. When in doubt, add a label.
- Icon color is automatic. Icons use
currentColor— no manual color management needed across variants or dark mode.