Ivan Bogachev

или PostCSS

В CSSNext есть такая штука. Синтаксис похож на то, что вы ищете:

:root {
  --danger-theme: {
    color: white;
    background-color: red;
  }
}

.danger {
  @apply --danger-theme;
}

Можно картинкой вставить. Просто. Быстро. Размер шрифта начинает отличаться от остальной страницы при адаптивном уменьшении картинки. Печаль для дизайнера-перфекциониста. А еще буквы могут начать мылиться. Это вообще печаль. Если нужно добавить/убрать стрелки - придется перерисовывать картинку. Это неприемлемо, если к ним привязана какая-то еще логика и они показываются не всегда.

Можно использовать связку SVG+CSS:
- Берется SVG с viewbox='0 0 100 100'.
- Основная картинка вставляется в виде image.
- Стрелки рисуем в векторе (это просто дуги из одной точки в другую с маркером на конце).
- Если нужно сделать их двухцветными, как в вашем примере - делаем маску по картинке и применяем ее к стрелкам.
- Надписи верстаем отдельно (div`ами) и абсолютно позиционируем сверху. Координаты будут соответствовать им же в svg (от 0 до 100). Это нужно для того, чтобы сохранять размер шрифта при адаптивном уменьшении всего этого.

Дальше при необходимости мы можем легко из css или js показывать или скрывать надписи и стрелки.

Masonry

1. Набор элементов с бордерами (блоки-флексы-гриды по вкусу).
2. Сверху абсолютно позиционированный элемент в 200vh/200vw с фоном в виде радиального градиента из прозрачного в цвет фона body или что там еще снизу находится.
3. В вышеупомянутых элементах текстам задаем z-index и они ложатся сверху градиента.
4. На событие mousemove вешаем обработчик, который меняет координаты градиента.

Получаем что-то такое:
codepen

P.S.: И в перспективе вставляйте картинки сюда, а не на левый хостинг.

Путей два:

• Не морочьте себе голову, оставьте только один контур у этих объектов (уберите все, что есть после буквы M в атрибуте d у #rocket-window и #rocket-outline) и поместите #rocket-window после #rocket-outline в коде.
  
• Используйте fill-rule="nonzero" у этих объектов, но убедитесь, что оба контура (внутренний и внешний) нарисованы в одну сторону (по часовой или против).
  

Видел я людей, которые называли себя программистами и при этом до жути боялись открыть консоль и что-то в ней сделать. Думаю вы встречали таких. Их еще обычно издалека можно опознать по стремлению извратиться как угодно и поставить 100500 плагинов в свою ide, только чтобы не запускать консольку. Они как будно боятся мигающего курсора. Обычно это сопровождается боязнью экспериментов и вообще изучения нового. В первую очередь требование уметь работать с linux отсеивает подобных кандидатов.

В моем окружении фраза "навыки работы в Linux-системах" подразумевает, что вы можете настроить свое рабочее окружение, можете управлять зависимостями, запускать сборку, тесты, и при этом не отвлекать коллег тупыми вопросами в духе "я вошел в vim и теперь не знаю, как из него выйти". Какое-то серьезное администрирование наша профессия не предполагает (в компаниях, где оно вообще есть, обычно есть и отдельный админ), а вот все, что связано с повседневными задачами вы должны делать сами.

хотел прикрутить HTML+CSS, но единственный вариант который я нашел - использование встроенного браузера... начинаю склонятся к альтернативным решениям в виде Electron

По вашим словам кажется, что вы придумываете приложение для одного человека работающее в единственном экземпляре. А почему бы не сделать клиент в обычном браузере (html/css/js - полный набор, верстайте, что хотите) и отдельный сервер с БД и логикой? Сервер можете и на Java делать. А можно и на PHP. Приложение по самой своей идее должно быть для нескольких людей, так что такое разделение было бы логичным.

Практически все подобные вопросы про бордеры можно решать с помощью линейных градиентов (пример). Это получается как бы не бордер, а просто нарисованные на фоне линии.