redvault-ai/llama_forge_rs/DESIGN_SYSTEM.org

• Haptic Design System
  • Basic Philosphy
  • Ideas
    • 3d components
    • specific purpose:
      • chat?
      • casette deck front, with disk in/out
        • ASCII:
        • Blinkenlights
    • "Controls" (Write/Input)
      • TextInput ?????
      • Button Variants
        • Kippschalter
        • Drehschalter
        • Schiebeschalter
    • Visualization (Read/Output)
      • Lamp/Light
      • Glass Gauge
      • Segment Display: http://www.3quarks.com/en/SegmentDisplay/
      • Glass Display effect ?

Haptic Design System

Basic Philosphy

Simple, Clean, Haptic

You just wanna touch it ! Borrow design metaphors from real life appliances, before the age of touchscreens. (Ironic isn't it ?)

Ideas

3d components

specific purpose:

chat?

• receipt printer ?????????????????????????

  • how to keep minimal
  • endless paper ? textured ?

  • which animations are needed ?

    • grow "paper" from bottom line-by-line
• how to animate editing past msgs ?

casette deck front, with disk in/out

ASCII:

``` o=blinkenlights O=eject? _

————————————— ooo O

```

Blinkenlights

• 1 light per model?

  • red=error
  • blue=ready
  • green=loaded
  • blinking=busy

"Controls" (Write/Input)

TextInput ?????

• full paper seems to noisy visual wise ???

  • try "light" paper texture ? (if that exists?)
• segment display might have bad ux/accesibility, expecially for textareas, could be ok for small/short textinput

Button Variants

Kippschalter

ref: https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fasset.conrad.com%2Fmedia10%2Fisa%2F160267%2Fc3%2F-%2Fde%2Fae5b0377843744940beabc4c1cd5fd514%3Fx%3D360&f=1&nofb=1&ipt=3cce10e16c763da58c31abb0b2c4888906fa9e312cf746696fa3b6573bcd1e16&ipo=images

Drehschalter

ref: https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.elektrogrosshandel.ch%2Fthumbor%2FOauclzeS99hWVZgbRjx6of7sEwY%3D%2Ffit-in%2F3600x2700%2Ffilters%3Acachevalid(2020-07-08T19%3A45%3A43)%3Astrip_icc()%3Astrip_exif()%2Feldas%2Fmyassets%2F0251%2F0157_P_0251553.jpg&f=1&nofb=1&ipt=6482091a4de692c0c6fdeebdc5339bd755a810dc6c6488d21cfc8de03f8fa2b8&ipo=images

Schiebeschalter

Visualization (Read/Output)

Lamp/Light

• svg foreground for "lens", simple "ribbed glass" lookalike ?
• svg glühdrat?

• embedded in 3d structure/detent, with fake reflection spread via colored shadow ?

  • cutaway side view:

  ```

  . =lens X = lamp _ _

  \__…__/

  X ```

Glass Gauge

Segment Display: http://www.3quarks.com/en/SegmentDisplay/

Glass Display effect ?

• lens distortion
• light reflection from outside
• for info-dense ui's that might "break" "tactileness" e.g. graphs