search

mimic-sussex / sema

Sema – A Playground for Live Coding Music and Machine Learning
https://sema.codes
MIT License
151 stars 51 forks source link

Design – Brief: Creating a design system for Sema and customizing logo #271

Open frantic0 opened 3 years ago

frantic0 commented 3 years ago

Design brief consists of:

  1. creating a design system (a collection of modular CSS components in a design book and guidelines) comprising:

    • Colour Styles
    • Typography Styles
    • Simple and Complex Buttons (dropdown), button grouping
    • Conditional Inputs (toggles, checkboxes)
    • Modals, Widget framing and controls
    • Spacing and layout

    1.1 The design system should enable us to improve Sema's current design and extend it in the future with the given components and under the given guidelines.

    1.2 Design system should observe Web Accessibility rules (e.g. https://webaim.org/resources/contrastchecker/)

  2. integration and instantiation of the design system with the current Sema pages:

    • landing,
    • playground,
    • tutorial,
    • docs,
    • about,
    • login.

  3. customising Sema's logomark and logotype.

smilo7 commented 2 years ago

Made a quick stab at beginning this here https://github.com/mimic-sussex/sema/wiki/Design-Guide