element-hq / compound Goto Github PK

Mature any scrappy initial documentation with more detail, on developer workflows, e.g.:

• Figma → Style Dictionary
• Style Dictionary → Compound Packages
• Compound Packages
  • → Web (Element Web, Element Call, OIDC, EES)
  • → iOS
  • → Android

Includes:

• Audit
• Research
• Values
• Taxonomy
• Guidelines
• Figma

Status for each item tracked in related board.

TODO: Add link.

It's fair to say we don't need to do this for Android nor iOS as we are going to use system fonts.

However, should we ship Inter and Inconsolate as part of this package? Given that they are not natively available on the Web and using Google fonts is a no-go.
There are specific requirements when defining @font-face regarding unicode ranges. We only want to load special ranges of Inter to avoid clashes with emoji fonts like Twemoji.

Includes:

• Audit
• Research
• Values
• Taxonomy
• Guidelines
• Figma

Status for each item tracked in related board.

TODO: Add link.

Includes:

• Audit
• Research
• Values
• Taxonomy
• Guidelines
• Figma

Status for each item tracked in related board.

TODO: Add link.

Child issue in the compound-ios repo: https://github.com/orgs/vector-im/projects/52/views/16?pane=issue&itemId=18190552

Add initial documentation on any designer workflows covered in C3.

Reference

https://gist.github.com/janogarcia/b9434e5a6a8291b742be6fc08f2fd56c

• Initial commit of spacing/sizing values defined in Token Studio, for shared reference and a single source of truth
• Draft initial guidelines explaining the values in Storybook
• Expect designers to manually follow guidelines and apply them to components, for now

A storybook deployment that contains

• The typography guidelines (view Figma)
• The design tokens

Should be built using the deployment done on https://github.com/vector-im/compound, and we need to repurpose that repo to be the center of all design system info

Add initial documentation on any developer workflows covered in C3.

Sense check how search is performing in Storybook once it's full of rich content. Look for low hanging ways to improve if needed.

Create a Maven package and upload it to Element's maven repo

Initial documentation on everything captured in https://github.com/vector-im/compound/milestone/2

Includes:

• Audit
• Research
• Values
• Taxonomy
• Guidelines
• Figma

Status for each item tracked in related board.

TODO: Add link.

• Getting Started
• What’s new
  • Changelog
  • Roadmap
  • Component status

Includes:

• Audit
• Research
• Values
• Taxonomy
• Guidelines
• Figma

Status for each item tracked in related board.

TODO: Add link.

• Native per platform
• Consistent Mobile IA, for ease of documentation

• #13
• #27
• #32
• #31
• #30
• #29

Existing materials:

Element X — Perceived performance optimization
https://docs.google.com/document/d/1OwC1sIAU2dCbO63yVvRyQxeq1cnys9-PjNGrIC5l4g4/edit

• Product principles
• Core
• Accessibility
• Localisation
• Performance

with @amshakal

• Initial setup of colour system with structure in Token Studio (base + high contrast)
• De-risk multi-brand for the future: Anticipating that other brands would apply sane overrides externally to Compound

Subcategories:

• Borders
• Corners
• Elevation
• Translucency

Includes:

• Audit
• Research
• Values
• Taxonomy
• Guidelines
• Figma

Status for each item tracked in related board.

TODO: Add link.

• Initial setup of typography styles in Token Studio
• Ideally include monospaced fonts

General guidelines on how we design and build products

UX writing. With @americanrefugee.

Mature any scrappy initial documentation with more detail, on designer workflows, e.g.:

• Figma
• Token Studio
• Theming

Implemented in Figma & Style dictionary. Includes:

...

Document our accessibility baseline/guidelines. Related:

• https://github.com/vector-im/compound-internal/issues/1
• https://hackmd.io/U6QKUFH5T4Ogv_Tw9UtzRA#Component-quality-checklist

Figure out boundaries and dependencies between product and marketing domains in the design system.

• Jordan — Branding and Marketing guidelines.
• Jano — What foundations should apply to / be reusable across both domains? Guidelines. Design Tokens.
• How do we ensure that we keep a coherent design language across domains while still allowing marketing to be more expressive?

Foundations

• Accessibility: Cross-domain.
• Internationalization: Cross-domain?
• Performance: Domain-specific.
• Color: Cross-domain? We could tweak/extend the color system as necessary with leonardocolor.io
• Typography: Mostly domain-specific (more typefaces, bolder weights for headings, slightly different scale). Productive vs. expressive.
• Spacing and sizing: Spacing could be made cross-domain, as long as we have more expressive values for Marketing.
• Layout and adaptivity.
• Materials
• Iconography
• Illustration

Notes from Nad in Jan. Design Retro:

• Figure out a plan for how we collaborate across brand evolution & design systems
• When makes sense for both projects? Milestones?
• How to share out in upcoming syncs

Includes:

• Audit
• Research
• Values
• Taxonomy
• Guidelines
• Figma

Status for each item tracked in related board.

TODO: Add link.

Includes:

• Audit
• Research
• Values
• Taxonomy
• Guidelines

We need to review package output to decide what tokens we should filter out.
What are the ones that can be consumed and which one only exist for Figma's eyes.

• iOS: https://github.com/vector-im/compound-design-tokens/tree/develop/assets/ios/swift
• Android: https://github.com/vector-im/compound-design-tokens/tree/develop/assets/android/kotlin
• Web: https://github.com/vector-im/compound-design-tokens/tree/develop/assets/web

with @amshakal @americanrefugee