SF Cluster Popup · UI Kit

SemanticForce design system

Визуализация UI Kit page из Figma-файла SF-UI (3x0yiBvUSMMkl15F1UVTtU, page 2405:26773). Все цвета, шрифты, размеры и эффекты вытащены через MCP get_design_context из секций «These styles are contained in the design». Источник правды — shared/sf-tokens.css.

Foundation · Colors

Palette — 14 named colours

Имена и hex-значения — из Figma styles, прикреплённых к компонентам. Альфы (Tone Tag, Active Menu, Outline Hover) — рассчитаны и зафиксированы в --sf-color-tone-* токенах.

White#FFFFFF
Beau Blue#C4D1D9
Roman Silver#88919F
Black Coral#465B68
Background Gray#1B1C21
Black#07080E
Green Light#34C5B5
Green Dark#118570
Green Outline#02AB55
Midnight#712170
Bike Blue *#4B6CFF *guess
Error#FF5A73
Warning#FFB800
Info / OCP#00FFD1
Tone Positive (alpha)rgba(17,133,112,0.5)
Tone Negative (alpha)rgba(206,44,68,0.5)
Foundation · Typography

Ubuntu — единственное семейство (+ Oswald только для Ring)

Имена стилей и параметры — точно как в Figma. Oswald применяется только в декоративном лейбле «STAGE» компонента Circle / Ring.

H3Ubuntu Regular · 24 / 1.3News headers, sections
The quick brown fox · Аналитика · 0123456789
H5Ubuntu Regular · 18 / 1.2Card headlines, table name
The quick brown fox · Карточка · 0123456789
Components / Btn 18Ubuntu Medium · 18 / 1.0Large button label
The quick brown fox · Sign In · 0123456789
Components / Btn 16Ubuntu Medium · 16 / 1.0Medium button label
The quick brown fox · Sign In · 0123456789
Btn 14Ubuntu Medium · 14 / 1.0Small button label
The quick brown fox · Sign In · 0123456789
Body 1Ubuntu Regular · 16 / 1.6Основной body
The quick brown fox jumps over the lazy dog · 0123456789
Body 2Ubuntu Regular · 14 / 1.6Secondary body, text links
The quick brown fox jumps over the lazy dog · 0123456789
Components / Text InputUbuntu Regular · 14 / 1.2Fields, menu items
The quick brown fox · Введите имя · 0123456789
Components / TagsUbuntu Light · 13 / 1.0Tag labels, meta params
The quick brown fox · Украина (96) · 0123456789
Caption BoldUbuntu Bold · 12 / 1.0Badge counter, accents
CAPTION BOLD · 201 · NOTES
Caption Bold MiniUbuntu Bold · 10 / 1.0Small badge counter
CAPTION MINI · 201
Tooltip 10ptUbuntu Medium · 10 / 1.0Tooltips, tech badges
My Tooltip · OLR · OCP
Ring / StageOswald Regular · 16 / 1.3 uppercaseOnly inside Circle / Ring
Stage · Level · Status
Component · Brand

Logo — Full + Sign Only

Figma node 101:7840. Wordmark «SemanticForce» + стрелочка (sign only — только стрелочка).

Component · Form

Buttons — 12 вариантов (Size × Type × Color × State)

Figma frame 74:4566. Иконка «add» (Material Icons 24/20/16) слева, gap 8/4. Радиус — 4. Цвета: Primary #118570 Green Dark, Secondary #712170 Midnight.

Large · 54h

Medium · 40h

Small

Singleton · Button / Ukraine (UA)

Component · Tags & Badges

Tags, Tone Tags, Details Tag, Badge

Tag 26:4504, Tone Tag 317:15486, Details Tag 273:8395, Tag-Icon 273:8412, Badge 340:32946, Tech Badge 447:6485.

Tag (Outline / More-Outline / Filled Medium / Filled Small)

Украина (96) more_horiz Украина (96) Украина (96)

Tone Tag (Positive / Negative)

sentiment_very_satisfied nounou_hfr close sentiment_very_dissatisfied nounou_hfr close

Details Tag + Tag-Icon

toggle_on nounou_hfr toggle_on close toggle_on

Badge + Technology Type Badge

201 201 OLR OCP
Component · Form

Check Box — 8 вариантов (Light/Dark × 16/24 × Default/Hover/Checked Default/Checked Hover)

Figma frame 74:4707. Light = outline на тёмном фоне; Dark = filled-green на тёмном фоне.

Light · 24 · Default
Light · 24 · Hover
Light · 24 · Checked Default
Light · 24 · Checked Hover
Dark · 16 · Default
Dark · 16 · Hover
Dark · 16 · Checked Default
Dark · 16 · Checked Hover
Component · Form

Text Field — 5 состояний

Figma 43:8195. Высота 40, padding 8×12, радиус 4, border 1 (Default Beau Blue / Hover Black Coral / Error 2px Error).

Default
mailYour Namearrow_drop_down
Hover
mailYour Namearrow_drop_down
Filled · Default
mailYour Namearrow_drop_down
Filled · Hover
mailYour Namearrow_drop_down
Error
lockYour Namearrow_drop_down
Please complete this required field

Search Field — Default + Filled (486:7974)

search Поиск или фильтрация по слову, автору, источнику, языку и т. п. tune
search Lorem ipsum dolor sit closetune

Select (276:14092)

arrow_drop_down Сообщение: Дата arrow_downward arrow_drop_down
Component · Overlay

Tooltip — None / Up / Down / Left / Right

Figma 340:36778. Background Black #07080E, padding 6×8, текст Tooltip 10pt (Ubuntu Medium 10).

My Tooltip My Tooltip My Tooltip My Tooltip My Tooltip
Component · Links

Text Link / Color Text Link / Show-More pattern

Figma 74:4630, 74:4665. Color Text Link — Green Dark #118570 при default, переходит в Green Light #34C5B5 при hover. «Show More» в реальных экранах подчёркнут пунктиром и teal-цвета.

Privacy Policy Privacy Policy (hover) or login with SSO or login with SSO (hover) Показать больше
Component · Content

Image (Default / Hover) + News Header (Default / Hover)

Image 454:13750 — 140×104, радиус 4. Hover: border 1 White + shadow 0px 1px 2px 0px #07080E, 0px 2px 4px 0px #07080E. News Header 454:16367 — H3 White → Green Light при hover.

OLR
OLR
Lorem ipsum dolor sit amet pellentesque Lorem ipsum dolor sit amet pellentesque · hover
Component · Data

Table Row — Default + v02

Figma 542:17938. Аватар 56px round, имя Body 1 White, описание Tags Roman Silver. Default: одна строка имя+tag; v02: tag под именем.

Steven Bray Competitor
Director Of Business Development at 911 Restoration — The Fresh Start Company
4 4
Steven Bray
Competitor
4 4
Component · Data viz

Circle / Ring — 5 уровней заполнения (= термометр схожести)

Figma 69:5182. Контур 1px White, размер 100×100, радиус full. Hover (100%) показывает иконку + Oswald label «STAGE». Заполнение — teal Green Light.

filter_altStage
100 70 50 30 10
Component · Navigation

Main Menu Items — 10 вариантов (Level 1/2 × Type Minimized/Expanded/Active × State Default/Hover)

Figma 87:9440. Sidebar w=256 expand, w=88 mini. Item width 224×40 (level 1) / 224×32 (level 2). Active bg = rgba(17,133,112,0.25), hover bg = rgba(255,255,255,0.1).

Expand · 256w
insert_emoticonAналитика 201chevron_right insert_emoticonAналитика 201chevron_right insert_emoticonAналитика 201expand_more Authors Geography Communities
Mini · 88w
insert_emoticon Настройки… 201 chevron_right insert_emoticon Настройки… 201 chevron_right

Secondary Menu Item (87:10457)

insert_emoticonПомощь insert_emoticonПомощь

App Menu (451:9173)

apps apps
Component · Brand

Social Media Icons — репрезентативная подборка

Figma frame 804:20885 содержит 25 platform-иконок. Здесь показана подборка как реальные цвета бренда.

f X IG YT in WA TT TG
Foundation · Spacing

Spacing — 4px base

Извлечено из реальных padding/gap значений компонентов: 4 · 8 · 12 · 16 · 24 · 32 · 40 · 54.

--sf-space-1 · 4
--sf-space-2 · 8
--sf-space-3 · 12
--sf-space-4 · 16
--sf-space-6 · 24
--sf-space-8 · 32
--sf-space-10 · 40
--sf-space-14 · 54
Foundation · Radii

Corner radius

4 (универсальный для кнопок, инпутов, бэйджей, тегов), 8, 14, 51 (pill — Tone Tag), full (Circle/Ring/Avatar).

--sf-radius-sm · 4
--sf-radius-md · 8
--sf-radius-lg · 14
--sf-radius-pill · 51
--sf-radius-full
Foundation · Effects

Elevation — Image hover shadow

Из библиотеки систематично указан только один effect — у Image Hover. 0px 1px 2px 0px #07080E, 0px 2px 4px 0px #07080E. Token: --sf-shadow-image-hover.

--sf-shadow-image-hover
Foundation · Misc

Separator line (273:8581)

1px белая линия фиксированной длины — используется внутри логотипа / divider-ов.