Cinematicamber / teal · filmic grade
Active
Product design system
Build the
frame. Own
the signal.
A practical interface language for the visionstyle Studio, documentation, and GitHub presence.
01 / 09
01 / Foundations
One product.
Two intentional atmospheres.
Light / paper instrumentDefault docs
surface.canvas
#FAF7F0surface.panel
#FFFDF8content.primary
#111111border.default
#D2CBBFaction.primary
#FF382ADark / night viewportStudio default
surface.canvas
#121212surface.panel
#1C1C1Acontent.primary
#FFFDF7border.default
#45433Eaction.emphasis
#FFD514Spacing scale / 4 px base
04
08
12
16
24
32
40
48
Product type
VSSans handles UI, controls and readable values. VSMono handles metadata, code, measurement and control labels. The display serif is reserved for marketing and documentation headings—never dense Studio settings.
Motion. Default transition: 160 ms ease-out. Panels use 220 ms. Never animate a detection result or a numerical value in a way that obscures the result.
02 / 09
02 / Shell
Studio is a creative
instrument panel.
night.jpg / yolo11n.pt / 0.50 confidencePERSON 0.93 · ID 14
CAR 0.88
Top bar / 56 px
Source image, model, confidence, run state and the primary action live here. Keep it calm.
Left rail / 304 px
Preset exploration and accordion controls. Numbers make a deep tool feel navigable.
Inspector / 336 px
Selection-specific edits and output. Collapse below 1180 px, do not squeeze the canvas.
03 / 09
03 / Controls
Every adjustment
has a clear state.
Buttons / lightInput, select, segmented control
Chroma Press
Custom chroma
RectangleCornersRounded
GlowSame components / darkDefault rules
Top left
Auto
SolidDashedDotted
TrailPrimary action. Tomato red means a committed production action: Detect, Export, Save preset. One primary action per view.
Emphasis action. On a dark canvas, Saffron is allowed for a context-changing active state—never for destructive work.
Focus. Use a 2 px cobalt ring with 2 px offset. Focus is always visible, never color-only.
04 / 09
04 / Modules
Browse widely.
Adjust precisely.
Preset cards / visual choice
Chroma Pressbold rails · tracking path
New
Cards are visual shortcuts. Their descriptions must explain the result, not implementation details.
Context menu / always anchored
Menus open from a clear trigger, align to that trigger, and close on Escape. Destructive options are last.
Accordion sections
03 Label ⌃
Use sequential numbers and a one-line state summary. Only one panel should be open on compact screens.
Chips / components
Name ×Confidence ×+ Track ID
Chips show composition and ordering. They are not used as generic tags.
Feedback
Rendered / 84 ms3 selected
Use a small status token near the relevant control, not a disruptive global alert.
05 / 09
05 / Canvas
The preview is the
hero, not a widget.
PERSON 0.93 · ID 14
CAR 0.88
Let users understand the style in context before they choose it.
Previews are dark by default so detection color is stable. Image content fills the space; tool controls must never visually outweigh the scene.
Legend system
Person
Class color and label chip share a hue.
ID 14
Tracking trail uses the identity’s green signal.
0.93 confidence
Confidence is supporting data, not the loudest color.
Selected
Pink is reserved for selection and direct manipulation.
Canvas rules. Maintain 24 px outer padding. Use a maximum 2 px overlay stroke at 1080p reference size.
Legends. Keep legends inside the preview’s safe zone, never cover an object tag, and allow collapse on mobile.
Empty state. Use the transparent V mark, a single sentence, and one action: “Choose an image”.
06 / 09
06 / Play
Tune the signal.
Touch the scene.
● live preview · click the person to select
Try it: click either detection frame, change the theme, alter the stroke, and switch the trail or glow on and off. This is the interaction model for the Studio: immediate, visible, and always tied to the image.
07 / 09
07 / Icons
Drafted, not
decorated.
detect
track
layers
target
export
save
Construction. Draw at 24 × 24 with 1.75 px stroke, square caps and minimal rounded corners. The icon should feel like a detection overlay, not a generic app glyph.
Color. Default icons use current text color. Red marks direct action; green confirms success; never use more than one accent icon in a local control cluster.
Favicon / app icon
163248180Brand asset placement
Use transparent lockups in top bars and documentation. Use the full-color V for presets, onboarding and social cards. Use the simplified watermark V for favicon, app icon and video watermark. Do not place the raster logo on a second white rectangle.
08 / 09
08 / GitHub
The repository
is part of the product.
⌘baselhusam / visionstylemain · README.md
Beautiful, fully configurable bounding boxes for object detection.
Open-source documentation should have the same contrast, care and visual confidence as the Studio. Lead with the theme-aware banner, then make the first action obvious.
Python 3.10+MITOpenCVPydantic
import visionstyle as vs
out = vs.annotate(frame, dets,
style="cinematic")
out = vs.annotate(frame, dets,
style="cinematic")
Theme-aware light / dark bannerOne-sentence value propositionFast copyable first exampleGallery before the full API matrixAlt text for every image
README hierarchy. Banner → one-line promise → installation → 10-line success case → preset gallery → Studio → API reference. Do not make users hunt for the first payoff.
Theme behavior. Use the existing
<picture> pattern and GitHub’s prefers-color-scheme source rules. The dark banner is not optional decoration; it protects contrast in GitHub dark mode.Contrast
Text: 4.5:1 minimum. Control labels: 4.5:1. Detection overlays may use color, but must include a label, stroke or pattern distinction.
Keyboard
Every input, accordion, menu and icon-only action is reachable in order. Escape closes menus. Enter triggers the visible primary action.
Responsive
Below 1180 px hide the inspector. Below 860 px transform the left rail into a drawer. The preview never becomes smaller than its controls.
09 / 09