💄 Tina Docs - Review and redesign embeds

[bettybondoc]

🩸 Pain

The current embeds in Tina Docs feel inconsistent, outdated, and sometimes hard to use. These are what users get out of the box in the Tina Docs package. If they're not polished, users will either tweak them manually or end up with a poor-looking docs site.

🎯 Goal

Make the default embeds in Tina Docs clean, consistent, responsive, and visually polished — so users can use them as-is without needing design or dev tweaks.

💡 Suggested Solution

Redesign each embed component with updated Figma mockups. Follow Tina’s design system and treat these as final, ready-to-ship components. Add notes for edge cases and mobile behaviour where needed.

💼 Tasks

• Review each embed and document issues
• Redesign in Figma
  • Scroll Showcase → https://tina.io/docs
  • Card Grid → https://tina.io/docs/setup-overview
  • YouTube with Caption → https://tina.io/docs/using-tina-editor
  • Recipe Embed → (old design – with Aman)
  • API Reference Table → https://tina.io/docs/reference/collections
  • Accordion → https://tina.io/docs/reference/toolkit/fields/built-in-plugins
  • Callouts + Blockquotes → https://tina.io/docs/beginner-tutorials/linking-to-model
  • Query-Response Code Block → https://tina.io/docs/graphql/queries/query-documents
• Mobile Behaviour
• Add notes for devs (spacing, behaviour, usage)
• Organise final designs in a dev-ready Figma page

✅ Acceptance Criteria

1. Each embed has a redesigned Figma mockup
2. Design is easy used by a range of brands
3. Works well on desktop and mobile
4. Notes provided for devs
5. All designs grouped and clearly labelled in Figma

📸 Screenshots

Figure: Scroll Showcase

Figure: Card Grid

Figure: Youtube Component

Figure: Recipe

Figure: API Reference

Figure: Accordion

Figure: Callouts/Blockquote

Figure: Query-response Block

Cc: @isaaclombardssw @amankumarrr @Marxoz

[bettybondoc]

@isaaclombardssw @Marxoz

Card Grid

Old

card.grid.-.old.mov

New

card.grid.mov

[bettybondoc]

@isaaclombardssw @Marxoz

Scroll Component (there's a PBI I YakShaved but YakShaver is down 🥲)

Old

New - Desktop

New - Mobile

[bettybondoc]

@isaaclombardssw @Marxoz

Youtube Caption
(Very tiny - just make it less prominent and adjust spacing)

Old

New

[bettybondoc]

@isaaclombardssw @Marxoz

API Reference Table

Old -

Screen.Recording.2025-04-17.at.4.20.10.pm.mov

New -

Screen.Recording.2025-04-17.at.4.15.05.pm.mov

[bettybondoc]

Accordion

Note:

• Overlay colour not final (I'm not yet happy with the open state of the accordion
• Expected behaviour: Only open 1 accordion item at a time (open for discussion)

Old -

Screen.Recording.2025-04-17.at.4.22.45.pm.mov

New -

Screen.Recording.2025-04-17.at.4.15.50.pm.mov

[bettybondoc]

@isaaclombardssw @Marxoz

Callouts

Note: Need to play around shadows and define elevation for different components.

Old -

New -

[bettybondoc]

Query-Response Blocks

Note:

• I made the query response code block stacked with preview instead of tabbed so that we can always see the query in relation to the response and also, the long response makes the query have a long unused space at the bottom
• We can just use the tabbed code component for a different use case (e.g. code snippets in different programming languages)

Old -

Screen.Recording.2025-04-17.at.4.29.23.pm.mov

New -

Screen.Recording.2025-04-17.at.4.16.43.pm.mov

[bettybondoc]

WIP (Test passed by JD)

Figma File -
https://www.figma.com/design/qFedRo7Xsc9oexI2IoPbFG/Tina.io-Design-Library?node-id=313-5553&t=nRNBAlXDaT8ELYvJ-1

Figma Preview -
https://www.figma.com/proto/qFedRo7Xsc9oexI2IoPbFG/Tina.io-Design-Library?node-id=678-523&p=f&t=ko11wmHm0XnoMJGU-1&scaling=min-zoom&content-scaling=fixed&page-id=313%3A5553&starting-point-node-id=678%3A523&show-proto-sidebar=1