design system · reverse-engineered

Дизайн-система TakeProfit

Полная реконструкция: 931 дизайн-токенов вытащены вживую из работающего терминала (resolved-значения в активной теме) + computed-стили реальных компонентов + анимации из CSS. Эстетика: плотный торговый терминал, wide-gamut P3, флэт (тени = 1px hairline), смус-углы.

431цветовых токенов

5шрифтовых семейств

17ступеней размера

.15sдефолт-переход

P3цветовое прост-во

Основы

Тёмная тема — дефолт. Фон — 4-ступенчатая шкала элевации (чем выше слой — тем светлее), плюс полупрозрачный overlay-скрим для модалок. Текст — 4 уровня контраста.

Background elevation 0→3 + overlay

base-0 (canvas)≈#0a0b0d

base-1≈#141619

base-2≈#1f2226

base-3≈#2a2e34

overlay-0 (scrim 72%)≈#0d0e10α.72

Text контраст + семантика

primary≈#f0f3f7

secondary≈#bac1cc

tertiary≈#a2abb8

quaternary≈#828c99

link≈#a7cfff

success≈#59f94a

warning≈#ffa94d

danger≈#ff7b7e

subscription≈#fbda00

buy≈#e2ff8e

sell≈#ffa09e

rise≈#59f94a

fall≈#ff8664

Divider горизонтальные линии

ultra-thin≈#b3c8e0α.04

thin≈#b3c8e0α.08

medium≈#b3c8e0α.12

heavy≈#b3c8e0α.16

accent≈#a7cfff

white≈#f0f3f7

Stroke границы/обводки

thin≈#b3c8e0α.04

medium≈#b3c8e0α.08

heavy≈#b3c8e0α.12

accent≈#a7cfff

white≈#f0f3f7

Цвет — семантика

Интерактивные роли (action) — каждая с состояниями base / hover / active (+ у некоторых translucent и invert). Компоненты ссылаются на роли, не на сырые цвета. Всё в color(display-p3 …).

brand

brand≈#7700ff

brand-hover≈#854dff

brand-active≈#6100d2

primary

primary≈#a7cfff

primary-hover≈#bddbff

primary-active≈#89bfff

secondary

secondary≈#2a2e34

secondary-hover≈#424852

secondary-active≈#1f2226

buy

buy≈#e2ff8e

buy-hover≈#c7ff27

buy-active≈#b8f200

sell

sell≈#ffa09e

sell-hover≈#ff7b7e

sell-active≈#ff5461

rise

rise≈#59f94a

rise-hover≈#79ff6a

rise-active≈#34ed40

fall

fall≈#ff8664

fall-hover≈#ffa98c

fall-active≈#ff6b42

success

success≈#10561b

success-hover≈#0a6b17

success-active≈#0e2c11

warning

warning≈#6b2a00

warning-hover≈#993f00

warning-active≈#461600

danger

danger≈#7b001b

danger-hover≈#a40028

danger-active≈#54001c

subscription

subscription≈#ffe744

subscription-hover≈#fff198

subscription-active≈#fbda00

Opacity dark scrim — ступени прозрачности

dark-2≈#0d0e10α.02

dark-4≈#0d0e10α.04

dark-8≈#0d0e10α.08

dark-12≈#0d0e10α.12

dark-16≈#0d0e10α.16

dark-24≈#0d0e10α.24

dark-32≈#0d0e10α.32

dark-48≈#0d0e10α.48

dark-64≈#0d0e10α.64

dark-72≈#0d0e10α.72

Code / синтаксис Indie® редактор

general≈#f0f3f7

dimmed≈#a2abb8

blue≈#89bfff

purple≈#b3a3ff

lime≈#b0e706

orange≈#ff8664

yellow≈#ffe744

Палитра-рампы

Базовые рампы по 10 ступеней (50→900) — фундамент, из которого выведены семантические токены. 11 интерфейсных + отдельный набор «legends» (102 токенов) для серий на чарте.

Интерфейсные рампы

neutral

100

200

300

400

500

600

700

800

900

lime

100

200

300

400

500

600

700

800

900

aqua

100

200

300

400

500

600

700

800

900

blueberry

100

200

300

400

500

600

700

800

900

cucumber

100

200

300

400

500

600

700

800

900

fuchsia

100

200

300

400

500

600

700

800

900

lemon

100

200

300

400

500

600

700

800

900

orange

100

200

300

400

500

600

700

800

900

peach

100

200

300

400

500

600

700

800

900

raspberry

100

200

300

400

500

600

700

800

900

warm

100

200

300

400

500

600

700

800

900

Legends цвета серий/индикаторов на чарте

aqua

100

200

300

400

500

600

700

800

900

blue

100

200

300

400

500

600

700

800

900

fuchsia

100

200

300

400

500

600

700

800

900

green

100

200

300

400

500

600

700

800

900

lime

100

200

300

400

500

600

700

800

900

neutral

100

200

300

400

500

600

700

800

900

orange

100

200

300

400

500

600

700

800

900

purple

100

200

300

400

500

600

700

800

900

red

100

200

300

400

500

600

700

800

900

yellow

100

200

300

400

500

600

700

800

900

Типографика

Корень 62.5% → 1rem = 10px, поэтому --font-size-N ≈ N px. Цифры/цены — моноширинный IBM Plex Mono (табличные). Текст — IBM Plex Sans. Дисплей/бренд — Nib Pro (serif), аннотации — Atomic Marker (script).

Семейства

Aa Bb 0123 — Trade

--font-family-sansIBM Plex SansТекст интерфейса, основной

Aa Bb 0123 — Trade

--font-family-monoIBM Plex MonoЦифры, цены, код, табличные данные

Aa Bb 0123 — Trade

--font-family-sansCondensedIBM Plex Sans CondensedПлотные таблицы / узкие колонки

Aa Bb 0123 — Trade

--font-family-serifNib ProДисплей / бренд / заголовки (проприетарный)

Aa Bb 0123 — Trade

--font-family-scriptAtomic MarkerРукописные аннотации на чарте (проприетарный)

Шкала размеров 9 → 96

9px--font-size-9 = .9rem

10px--font-size-10 = 1rem

11px--font-size-11 = 1.1rem

12px--font-size-12 = 1.2rem

14px--font-size-14 = 1.4rem

16px--font-size-16 = 1.6rem

18px--font-size-18 = 1.8rem

20px--font-size-20 = 2rem

24px--font-size-24 = 2.4rem

28px--font-size-28 = 2.8rem

32px--font-size-32 = 3.2rem

36px--font-size-36 = 3.6rem

40px--font-size-40 = 4rem

48px--font-size-48 = 4.8rem

56px--font-size-56 = 5.6rem

64px--font-size-64 = 6.4rem

96px--font-size-96 = 9.6rem

Начертания

Aa Trade 123300 · light

Aa Trade 123400 · normal

Aa Trade 123500 · medium

Aa Trade 123600 · semibold

Aa Trade 123700 · bold

Letter-spacing

TAKEPROFITthetightest = -1.5px

TAKEPROFITtightest = -1px

TAKEPROFITtighter = -.5px

TAKEPROFITtight = -.25px

TAKEPROFITnormal = 0px

TAKEPROFITwide = .25px

TAKEPROFITwider = .5px

TAKEPROFITwidest = 1px

Spacing

Шаг сетки на базе 0.4rem (4px): 0·1·2·4·8·12·16·20·24·32·36·48·52·56·64·72·96. Плотные интервалы (4–12px) внутри контролов, крупные (24–96) — между блоками.

--spacing-0 = 0rem (0px)

--spacing-1 = .1rem (1px)

--spacing-2 = .2rem (2px)

--spacing-4 = .4rem (4px)

--spacing-8 = .8rem (8px)

--spacing-12 = 1.2rem (12px)

--spacing-16 = 1.6rem (16px)

--spacing-20 = 2rem (20px)

--spacing-24 = 2.4rem (24px)

--spacing-32 = 3.2rem (32px)

--spacing-36 = 3.6rem (36px)

--spacing-48 = 4.8rem (48px)

--spacing-52 = 5.2rem (52px)

--spacing-56 = 5.6rem (56px)

--spacing-64 = 6.4rem (64px)

--spacing-72 = 7.2rem (72px)

--spacing-96 = 9.6rem (96px)

Радиусы

Контролы — xs 4px (кнопки/инпуты), карточки — base 12px, крупные поверхности — md 24 / lg 36, пилюли — full. Дополнительно — фактор «smooth corners» 0.6 (squircle-сглаживание вместо чистой дуги).

none
0

xs
4px

sm
8px

base
12px

md
24px

lg
36px

full
9999px

Тени и слои

Принципиально флэт: «тени» --shadow-s…2xl — это 1px hairline-кольцо (0 0 0 1px p3(.70 .78 .88 / .12)), а не drop-shadow. Глубина передаётся элевацией фона (base-0→3), а не размытием. Поповеры/модалки — на base-2/3 поверх overlay-скрима.

--shadow (hairline ring)

base-3 (elevation)

Компоненты

Замеры — живые computed-стили из терминала. Характер: компактные (h 20–24px), текст 12–14px веса 400 (без жирного), радиус 4px, паддинг 0–4px, переход all .15s, без теней.

Компонент	Размер	Шрифт px/вес	Текст	Фон (токен)	Радиус	Паддинг	Назначение
Buy	`29×20`	`12/400`	`#000`	`action-buy`	`4px`	`0 2px`	Покупка (lime)
Sell	`28×20`	`12/400`	`#000`	`action-sell`	`4px`	`0 2px`	Продажа (peach)
Start Free Trial	`105×24`	`14/400`	`#fff`	`action-brand`	`4px`	`0 4px`	Бренд / подписка CTA (violet)
Add Widgets	`109×24`	`14/400`	`primary`	`action-secondary-translucent`	`4px`	`0 4px`	Вторичная (translucent 8%)
1h	`36×20`	`14/400`	`primary`	`action-secondary`	`4px`	`0 2px`	Сегмент / селектор

Живая реконструкция (на реальных токенах)

Реальная панель (Indie-редактор): пилюли Docs/Draft, «Add to Chart ⌘D» с kbd-хинтом, иконочные кнопки 20–24px

Анимации

Доминанта — .15s + cubic-bezier(.4,0,.2,1) (Material standard), по 56 использований каждое. Для входа/выхода — decelerate/accelerate; для «живых» элементов — spring/overshoot.

Длительности

50msмикро (toggle)

75msмикро

.1sбыстрый hover

.15s★ дефолт (56× в коде) — hover/focus/color

.2sстандарт

.3sпанели/поповеры

.5sкрупные переходы

2sамбиент (shimmer/breath)

Кривые easing синий = кривая, пунктир = linear

cubic-bezier(.4,0,.2,1)★ standard (56×) — вход+выход

cubic-bezier(0,0,.2,1)decelerate (вход)

cubic-bezier(.4,0,1,1)accelerate (выход)

cubic-bezier(.42,0,.58,1)ease-in-out

cubic-bezier(.34,1.56,.64,1)spring / overshoot

cubic-bezier(.68,-.55,.27,1.55)back-in-out (упругий)

cubic-bezier(.21,1.02,.73,1)soft-out

@keyframes именованные анимации в коде

scaleIn / scaleOutпоявление/исчезновение модалок и поповеров (с opacity)

shine / textShine / sweepбегущий блик по кнопкам/карточкам (CTA, AI-карточки)

spin / shuriken-rotateлоадеры и вращение лого-сюрикена

breathмягкая пульсация (живые/активные элементы)

shakeтряска при ошибке ввода

flashподсветка изменения цены (тик вверх/вниз)

loading-bubbles / circles / wave-dotsварианты индикаторов загрузки

ai-ide-card-clip / fadereveal AI-фич в IDE

btn-gradient-rotateвращение градиента на премиум-кнопке

grow / enterAnimation / exitAnimationрост и вход/выход элементов списков

UX-паттерны

Принципы взаимодействия, отличающие терминал от обычного веб-приложения.

On-demand рендеринг чарта

Pixi autoTicker выключен; кастомный rAF вызывает ticker.update() только если scenes.some(isNeedRedraw). В простое — 0 отрисовок (экономия GPU/батареи), при взаимодействии — до 120 Гц. Один full-viewport WebGL2-canvas вместо Canvas2D (как у TradingView).

Hover-reveal тулбары

Drawing-тулбар и контролы строк легенды/виджетов скрыты до наведения (opacity:0 → 1 за .15s). Максимум данных на экране, контролы появляются по необходимости.

Lumino DockPanel доки

Виджеты в @lumino/widgets: drag-to-dock, split, tabs, maximize. Константы: GOLDEN_RATIO .618 (пропорции сплита), DRAG_THRESHOLD 5px, DETACH_THRESHOLD 20px, дефолтные отступы 12/40/40/40.

Magnet / snap

Удержание ⌘ = магнит к OHLC; Shift = снап трендлайна к 45°/90°. Точное черчение без попадания пиксель-в-пиксель.

Контекстное удаление

Объекты удаляются через мини-тулбар по ховеру (🗑 у строки легенды) или контекст-меню чарта «Remove Drawings / Remove Indicators». Нет глобального «delete» — действия локальны к объекту.

Плотность терминала

Кнопки 20–24px, текст 12–14px вес 400, радиус 4px, паддинг 0–4px, hairline-границы, без теней. Максимум информации, минимум хрома — как проф. торговый терминал.

Цифры = моноширинный

Все цены/значения — IBM Plex Mono (табличные цифры не «прыгают» при изменении). Текст интерфейса — IBM Plex Sans.

Wide-gamut P3

Вся палитра в color(display-p3 …) — насыщеннее sRGB на современных дисплеях (важно для buy/sell/rise/fall сигналов). Параллельно хранятся --colors-var-* (RGB-тройки) для rgba()-композиции.

15 тем

Семантические токены (action/text/divider/background) переопределяются по теме; компоненты не знают конкретных цветов — только роли. Тёмная тема — дефолт.

Keyboard-first

Хоткеи на всё (Hotkeys-панель по категориям): инструменты рисования (⌥T/⌥F/…), таймфреймы, навигация виджетов (Tab), undo/redo. ⌘D — «Add to Chart».

Источник

Токены — getComputedStyle(:root) по всем CSS-переменным активной темы (живой залогиненный терминал, 931 шт.); компоненты — computed-стили реальных элементов; анимации — грэп bundles2/css/*.css (durations/cubic-bezier/@keyframes). Цвета показаны как нативный color(display-p3) (точны на P3-дисплеях) + ≈hex sRGB-приближение для справки. Реконструкция, не офиц. гайдлайн.