Дизайн-система цифровых сервисов Оренбургской области
Дизайн-система представляет собой набор типовых компонентов для интерфейсов и онлайн-публикаций.
Основная единица измерения — em. Все размеры можно перевести в px, принимая 1 em за 20 px (по умолчанию) или произвольное значение от 14 px до 24 px.
Цветовые палитры
Есть несколько цветовых схем для разных проектов, подразделений и контекстов. Каждая схема — это самостоятельная палитра фирменных цветов, которые используются в интерфейсах и на любых других носителях.
Базовая палитра
Интерфейсная
В интерфейсной палитре каждый цвет привязан к определённому функциональному назначению и назван соответственно:
- background — цвет фона
- text — цвет текста
- link — цвет гиперссылки
- accent — цвет для кнопок и других элементов, которые должны быть заметными
- hover — цвет для подсветки активных элементов при наведении курсора
- error — цвет для сообщений об ошибках; нужно использовать какой-то оттенок красного
- mark — цвет для смыслового выделения отдельных слов в тексте, обязательно светлый
- surface — цвет для плашек, обязательно светлый; для более точной дифференциации интерфейсных слоёв можно использовать градации прозрачности этого цвета — 0.25, 0.5, 0.75, 1
Типографика
В дизайне сайтов Орегбургской области используется семейство шрифтов Golos. Это универсальные закрытые гротески, разработанные в студии Паратайп по инициативе компании Смена специально для сайтов государственных и социальных сервисов.
Дизайн-система использует шрифт Golos Text в начертаниях Regular, Demibold, Bold и шрифт Golos UI в начертанииях Regular, Medium, Bold.
Абзац текста, <p>
«Программа реализуется в целях ускорения технологического развития Российской Федерации, увеличения количества организаций, осуществляющих технологические инновации, создания сквозных цифровых технологий на основе отечественных разработок, внедрения цифровых технологий и платформенных решений, имеющих значительный потенциал коммерциализации»
Лидер-абзац, p.orb__text-L
«Программа реализуется в целях ускорения технологического развития Российской Федерации, увеличения количества организаций, осуществляющих технологические инновации, создания сквозных цифровых технологий на основе отечественных разработок, внедрения цифровых технологий и платформенных решений, имеющих значительный потенциал коммерциализации»
Мелкий текст, p.orb__text-S
«Программа реализуется в целях ускорения технологического развития Российской Федерации, увеличения количества организаций, осуществляющих технологические инновации, создания сквозных цифровых технологий на основе отечественных разработок, внедрения цифровых технологий и платформенных решений, имеющих значительный потенциал коммерциализации»
Заголовки
<h1>
Главный заголовок страницы
<h2>
Заголовок второго уровня
<h3>
Заголовок третьего уровня
<h4>
Заголовок четвёртого уровня
<h5>
Заголовок пятого уровня
<h6>
Заголовок шестого уровня
Фрагмент кода в тексте, <code>
Вы можете подключить файл со стилями из репозитория, создать в проекте контейнер с классом .orb и внутри него использовать описанные компоненты.
Базовые интерфейсные компоненты
Кнопка, <button>
Радиогруппа, .orb__radiogroup-line
Используется для выбора единственного варианта из множества, а также для переключения состояний интерфейса.
Раскрывающийся список, .orb__select
Текстовое поле, input[type=text]
Сообщение об ошибке, .orb__error
Публикация не сохранилась
Ошибка сервера: 505
Составные интерфейсные компоненты
Горизонтальное меню, .orb__nav
Редакционные форматы
Плашка, <aside>
Нумерованный список, <ol> <li>
Документы, предъявляемые гражданином РФ при оформлении заявления на выпуск карты:
- Один из документов, удостоверяющих личность гражданина РФ: паспорт гражданина РФ, военный билет или удостоверение личности военнослужащего РФ;
- Страховое свидетельство обязательного пенсионного страхования (СНИЛС);
- Полис обязательного медицинского страхования (за исключением военнослужащих).
Ненумерованный список, <ul> <li>
На Универсальной карте оренбуржца размещаются данные о держателе в электронном и графическом виде:
- фамилия, имя, отчество;
- дата рождения;
- паспортные данные;
- СНИЛС владельца карты;
- номер полиса ОМС ;
- фотография владельца карты;
- прочие идентификационные данные.
Маркер, <mark>
Документы, предъявляемые гражданином РФ при оформлении заявления на выпуск карты: паспорт гражданина РФ, СНИЛС и полис ОМС.