BEEESIGN

Beeesign is a dark, spring-loaded UI kit extracted from the Beeer beer-collecting app: ink-black grounds, pill controls, one rare red accent, a single typeface and one spring that moves everything you can touch. It ships one theme, Dark.

Content fundamentals

• Write interface copy in Russian, short and plain. Sentence case. Labels are nouns ("Полка", "Рейтинг", "Профиль"); actions are verbs ("Добавить", "Сохранить").
• Avoid pronouns where possible; when needed use "вы". No exclamation marks, no emoji.
• A non-alcoholic beer carries the badge text безалк. (or 0,0 % when the ABV is exactly zero). Unknown fields stay empty, never invented.
• Decimals use a comma, with a space before %.

Visual foundations

• Color. Set screens on background, raise content onto surface, nest wells on surface-secondary. Body text is text-primary, captions text-secondary. The primary button is light ink (action-primary with text-on-action-primary), not the accent. The accent is rare: switch track on, selected marks. Accent text is text-accent, never accent (3.7:1 on background).
• Contrast. Text pairs meet 4.5:1; borders, rings and marks 3:1. The focus ring is focus-ring, 2px, offset 2px.
• Type. Medeo Sans only, weights 400, 600 and 700. section-title for screen titles (38/38), headline for rows, body for reading, button for actions, footnote for captions. Group labels are 11px, uppercase, tracked +1.32px.
• Space. Steps 2, 4, 6, 8, 10, 12, 14, 16, 18, 20; gutter screen-x 18, card padding card-pad 18, stack gap stack 10.
• Shape and depth. Cards 22px, controls and rows are pills. Surfaces are separated by tone and 1px separator lines, not shadows. The one place depth is allowed is glass: floating bars use glass-fill, a blur and a specular edge over content (see TabBar).
• Touch. Every target is at least size-touch (44px). Disabled controls drop to opacity-disabled.
• Motion. One spring (spring-mass, spring-stiffness, spring-damping) for press, switch, sliding indicators, glass lens, tickers and entrances; timed curves only for scene transitions. Reduced motion jumps to the end value. See the Motion section.
• Imagery. Beer stickers are cut-outs with a surface-colour outline; camera surfaces use camera-void.

Iconography

24px grid, 1.75 stroke, round caps and joins, single colour from currentColor (size-icon-stroke). The TabBar ships four icons (shelf, rank, me, add); anything else comes from the host app on the same grid and stroke.

Using the components

Load tokens.css, bundle.css, React 18 and bundle.js; everything is on window.Beeesign. Set data-theme="dark" on <html>. Components read tokens as CSS variables and never branch on the theme.

Цвета

Типографика

Medeo Sans, веса 400, 600, 700.

Display

Text

Label

Отступы, формы, размеры

Отступы

Радиусы

Размеры

Тени

Dark separates surfaces with 1px lines, not shadows: the card shadow is none.

Прозрачность

Слои

Motion

Everything that responds to a finger is a spring. Everything that stages a scene is a curve. Spring numbers are tokens (spring-), curves are ease-, durations duration-*; the JS helpers on window.Beeesign.motion implement all of this.

The Beeesign spring

mass 1 · stiffness 350 · damping 30 (Reanimated withSpring). Damping ratio ζ = c / (2√(k·m)) = 0.80, so it starts fast, overshoots 1–3 % and rests in about 300 ms. It is the only spring in the interface: press, switch, indicator, ticker, entrances, layout. Interruptible: a new target starts from the current position and velocity.

Beeesign.motion.spring({ from: 0, to: 1, onUpdate: v => el.style.opacity = v });

Dynamic behaviours

Scene motion (curves, not springs)

Physical springs

Free-moving 3D objects use the physics form x'' = −k(x − target) − c·x', integrated each frame with dt clamped to 1–64 ms.

The cap reveal

A bottle cap is thrown from below, spins an integer number of turns, and lands face-on, then bursts and can be spun by finger.

• Throw. REVEAL = { turns 7, kick 2.6, rise 0.8 s, stop 0.36, burst 1.2, scale 0.85 }. Rise follows y = y0 + (yA − y0)·(1 − (1 − t/rise)^kick); after the apex it falls under gravity g = 2(yA − y0)/rise² until it reaches the stop line capY = hh·(1 − 2·stop). Rotation is ω·t with ω = 2π·round(turns)/T, so it lands on a whole number of turns. A selection haptic ticks on every full revolution; none on landing.
• Burst. On stopping, scale pulses 1 + 0.16·k·e^(−7b)·sin(22b + 0.6) (b = seconds since landing, k = burst). A medium haptic fires on the first frame.
• Drag spin. Finger velocity is smoothed v = 0.6·v + 0.4·(dx·0.012 / dt) and clamped to ±9 rad/s; on release the cap coasts and settles to the nearest face, round(rotY/π)·π.

Haptics

selection (revolution tick), light (button press, release), medium (burst), heavy, success (card saved). A failing haptic motor must never break an animation.

Reduced motion

If the user prefers reduced motion: springs jump to their target, press scale is 1, the reveal shows its end pose, door springs use the reduced pair. Information must never depend on motion.

Do and don't

• Do spring any property that follows a finger; do keep one spring so the app moves with one voice.
• Do let the user interrupt: retarget, keep velocity.
• Don't use linear, ease-in-out or a duration for a pressed, dragged or toggled control.
• Don't add a second spring preset for taste; if a gesture needs more energy, change the distance, not the constants.

Пружина

mass / stiffness / damping as in Reanimated withSpring. Spring-driven properties never use timing curves.

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

Timed animations. Interactive motion uses springs instead (see Motion).

Кривые

Themes

Beeesign has one theme, Dark (data-theme="dark"), the Nothing theme of the Beeer app renamed and moved to Medeo Sans throughout.

Adding a theme

1. Add a theme to color.themes and a value for every colour token (a missing one inherits Dark).
2. Add a [data-theme="<id>"] block to bundle.css for structural overrides (radius, gutter, card border, label style) declaring every variable the Dark block declares.
3. Check every pair named in the usage notes at 4.5:1, and every border, ring and mark at 3:1.
4. Never branch a component on the theme id.

Компоненты

Ассеты

The Beeer app wordmark (beeer-logo-smooth.svg), a single-ink mark drawn in #1B120B (warm near-black). <img> cannot inherit colour, so on Dark grounds place it on a light plate. Keep clear space of one letter height; do not recolour or redraw it.