Skip to main content

Get Started: For Content Designers

Welcome to Teardrop Design System! This guide will help you understand how to write content that works seamlessly with Teardrop components and follows Hardwater's voice and tone.

Overview​

Content is a crucial part of the user experience. Teardrop provides guidelines and patterns to help you write clear, consistent, and effective content for Hardwater products.

Voice and Tone​

Hardwater Voice​

Hardwater's voice is:

  • Clear and direct - Get to the point without unnecessary words
  • Professional yet approachable - Maintain expertise while being friendly
  • Action-oriented - Focus on what users can do and achieve
  • Empathetic - Understand and acknowledge user needs

Hardwater Studios Voice​

Hardwater Studios maintains the core Hardwater voice while adding:

  • Creative flair - More expressive language where appropriate
  • Artistic references - Can incorporate creative terminology
  • Studio-specific terminology - Uses industry-specific language

Content Standards​

Writing Guidelines​

  1. Be concise - Use the fewest words to convey your message
  2. Use active voice - "Click Save" not "Save should be clicked"
  3. Write for scanning - Use headings, lists, and short paragraphs
  4. Be consistent - Use the same terms for the same concepts
  5. Write for accessibility - Use clear, simple language

Terminology​

Maintain consistent terminology across all Hardwater products:

  • Actions - Use consistent button labels (Save, Cancel, Delete, etc.)
  • Status messages - Standardize success, error, and warning messages
  • Navigation - Consistent navigation labels
  • Forms - Standard form field labels and help text

View terminology guide →

Component-Specific Content​

Buttons​

Button text should be:

  • Action verbs (Save, Delete, Submit)
  • Short (1-3 words)
  • Clear about what will happen

Good:

  • "Save changes"
  • "Delete account"
  • "Submit form"

Avoid:

  • "Click here to save your changes"
  • "Are you sure you want to delete?"

Form Labels​

Form labels should:

  • Be clear and descriptive
  • Indicate required fields
  • Provide context when needed

Good:

  • "Email address" (required)
  • "Phone number (optional)"
  • "Password (must be at least 8 characters)"

Error Messages​

Error messages should:

  • Explain what went wrong
  • Suggest how to fix it
  • Use plain language

Good:

  • "Email address is required"
  • "Password must be at least 8 characters"
  • "Invalid email format"

Success Messages​

Success messages should:

  • Confirm what happened
  • Be brief and positive
  • Provide next steps if needed

Good:

  • "Changes saved successfully"
  • "Account created"
  • "Email sent. Check your inbox."

Content Patterns​

Empty States​

When there's no content to display:

  1. Clear heading - Explain what's missing
  2. Helpful description - Why it's empty and what to do
  3. Action - Button or link to take action

Example:

No projects yet
Create your first project to get started.
[Create Project]

Loading States​

Loading messages should:

  • Be brief
  • Explain what's happening
  • Use consistent language

Examples:

  • "Loading..."
  • "Saving changes..."
  • "Uploading file..."

Confirmation Dialogs​

Confirmation dialogs should:

  • Clearly state what will happen
  • Use action verbs in buttons
  • Make the destructive action obvious

Good:

Delete project?
This action cannot be undone. All project data will be permanently deleted.

[Cancel] [Delete Project]

Brand-Specific Content​

Hardwater​

Content for Hardwater products should:

  • Use professional, business-focused language
  • Emphasize efficiency and productivity
  • Focus on outcomes and results

Hardwater Studios​

Content for Hardwater Studios can:

  • Incorporate creative terminology
  • Use more expressive language
  • Reference artistic concepts when appropriate

Accessibility in Content​

Writing for Screen Readers​

  • Use descriptive link text ("Learn more about pricing" not "Click here")
  • Provide alt text for images
  • Use headings to structure content

Plain Language​

  • Use simple, everyday words
  • Avoid jargon and technical terms when possible
  • Explain technical terms when necessary

Content Resources​

Getting Help​

  • Content Design Team - Reach out for content reviews
  • Design System Team - Questions about content patterns
  • Documentation - Full content guidelines

Next Steps​

  1. Review voice and tone guidelines
  2. Learn component-specific content patterns
  3. Explore brand-specific guidelines
  4. Check accessibility requirements