Check
Selected value; not identity verification.
People MarketsReference 1.4 · 24 September 2026
Design system
The visual rules, language and screen patterns for People Markets. Start with a screen, or inspect the rule behind it.
Bricolage Grotesque
Headlines and names
Instrument Sans
Interface and explanations
1,084.20
Plex Mono / values
00
Using the reference
The approved type and palette remain. This revision finishes the smaller controls and documents how the screens actually rearrange.
In this revision
Compact selection controls, thin native scrollbars without arrow buttons where supported, and a documented Lucide icon system. The approved typography, colors and responsive examples remain in place.
- Keep
- Bricolage Grotesque, Instrument Sans and Plex Mono; warm paper, ink and cobalt; still cards; descriptive section titles.
- Changed
- Shared controls in the reference and product examples; clearer annotations; tested page and component resizing.
- Examples
- All market values and charts are illustrative. No account, balance, payment or order service is connected.
- Outstanding
- The approved logo asset, production imagery, market availability and financial-field mapping still need verification.
Messaging guide Introduction, complete page copy, terminology and state messages.Experience guide First-visit teaching, trading tasks, responsive behavior and release tests.
Use the side navigation to read one section at a time. “Read all sections” restores the continuous document. The two Markdown links work when the files are saved together.
01
Identity & imagery
The people and their markets provide the character. The interface should identify them accurately without borrowing the visual language of collectibles.
People MarketsText placeholder · Original asset required
This text is a reserved layout position, not a new wordmark. No replacement symbol is proposed. Use the original approved vector asset and its verified clear-space rules before production.
One portrait treatment
Use a controlled crop, consistent head scale and a dedicated nameplate. Keep important features inside the crop at every size.
Names remain legible when a photograph fails. Initials are a fallback beside the full name, never the only identification.
Reference photographs are hosted here and credited below. They do not establish endorsement, partnership or a confirmed listing.
Rivalry composition
Both people share one frame with equal visual weight. The relationship belongs in the title and explanation.
Never assign someone a permanent gain or loss color. A person’s identity is separate from the price movement of a contract.
Long leg · Example
Kendrick
Lamar
Short leg · Example
Drake
Kendrick over Drake
A relative view through a defined long / short pair. Sizing, execution and costs affect the outcome.
Pair preview · Not enabled02
Color
Paper, white and ink carry the structure. Cobalt identifies actions. Butter is an occasional editorial surface. Financial colors retain their specific meaning.
Paper
Ink
Cobalt
White
Butter
Use color by role rather than scattering accents across cards. A decorative separator can be subtle; an input boundary needs the stronger control token. On butter, use dark editorial ink in both themes.
Semantic tokens
| Token | Light | Dark | Use |
|---|---|---|---|
--canvas | #F7F5EF | #14171D | Page canvas |
--surface | #FFFFFF | #1D222A | Cards, forms and overlays |
--surface-alt | #F0EEE8 | #252B35 | Secondary grouping |
--ink | #181A20 | #F4F3EF | Primary text |
--muted | #60646F | #ADB5C2 | Supporting text |
--line | #DEDCD5 | #343D49 | Decorative separators only |
--control | #777C86 | #8D99AA | Required control boundaries |
--action | #2452FF | #A1B5FF | Primary action and focus |
--on-action | #FFFFFF | #111722 | Text on primary action |
--action-soft | #E9EEFF | #27314D | Selected background |
--gain | #087452 | #68D5AC | Positive price change |
--loss | #BF3545 | #FF9BAC | Negative price change |
--warning | #795000 | #EFCB80 | Caution text |
--warning-soft | #FFF3D2 | #3A3121 | Caution surface |
--butter | #F3E5AB | #F3E5AB | Editorial plane; pair with dark ink in both themes |
Contrast checks
These pairs are calculated from the tokens. They do not constitute an accessibility audit of the complete interface. Pass/fail uses the unrounded ratio.
Value labels
Show +4.12% over 24 hours, not “4.12%”. Name the series and keep its period visible.
For funding, state who pays whom. A positive signed number is not automatically a benefit to the reader.
03
Typography
Three fonts with separate jobs. The interface stays readable while Bricolage has room to be expressive.
Bricolage Grotesque / 650 / optical sizing
A market for the people you follow.
Instrument Sans / 400 / 18 px
People Markets lets you trade on the changing public influence of artists, athletes and creators. Each listed person has a market with a price. You can trade on that price rising or falling.
IBM Plex Mono / 400 / tabular figures
1,084.20 +4.12%
| Role | Font / weight | Size / line height |
|---|---|---|
| Marketing headline | Bricolage / 650–750 | 40–88 px / 1.00–1.08 |
| Page / section heading | Bricolage / 600–700 | 28–48 px / 1.10–1.18 |
| Person name | Bricolage / 650 | 24–40 px / 1.12 |
| Body / input | Instrument / 400–500 | 16 px / 1.60 |
| Control / important detail | Instrument / 500–600 | 14–16 px / 1.40–1.60 |
| Secondary metadata | Instrument / 400 | 13 px / 1.55 |
| Primary value | Plex Mono / 400–500 | 24–40 px / 1.30 |
Keep names intact
Allow wrapping before reducing the type size. Never ellipsize the principal market identity. Keep the full name available in compact views.
Keep values stable
Align numeric columns and reserve room for signs and units. Do not animate intermediate values or condense digits to force a fit.
04
Icons
Lucide is the interface library. Use a small, named set consistently across the website, product and operational tools. The People Markets logo and partner marks remain separate assets.
Size and placement
Keep a 6–8 px gap beside a label. Center a standalone 20 px icon inside a 44 × 44 px button. On phones, keep the icon size; increase the surrounding hit area rather than the drawing. Do not change stroke weight for hover or selection.
Stroke calculation
The ordinary SVG stroke scales with the icon: 2 source units render at about 1.33 px at 16 px, 1.67 px at 20 px, and 2 px at 24 px. The small checkbox tick is an explicit exception: a 14 px glyph with a 2.5-unit stroke for legibility.
Different shapes for different jobs
Selected
Expand
Partially selected
Completed
The Check has a short downstroke and a longer rising stroke. A chevron has equal arms. Do not rotate a border into a V, replace a check with a chevron, or put a checkbox-outline icon inside another checkbox.
Applied examples
Watch uses the same star in both states. The selected star may be filled; the pressed state and text identify the change. A copied value is confirmed in feedback, not by changing unrelated status icons.
Control labels
Use “Close order review”, “Copy order reference” and “Explain mark price”. Label the button, not the decorative SVG. Do not rely on a hover tooltip as the only name.
Financial labels
An upward arrow may accompany an observed positive change with its period. It is not a forecast. A check is not identity verification, and a lock is not evidence that funds are safe.
Approved interface set
Search by action, library name or semantic key. Copy the semantic key to use in the shared component. This reference embeds the SVGs, so the icons do not depend on a CDN.
30 icons
Adding an icon
24 × 24 source canvas. Keep at least 1 px from the outside edge of the stroke to the canvas edge. Use 2-unit centered strokes with round caps and joins. Preserve at least 2 px between distinct details.
Check the drawing at 16, 20 and 24 px, in both themes. Match the visual weight of Lucide’s Circle and Square. Document any optical adjustment rather than stretching the SVG in a page.
Search the approved set first, then the Lucide library. A new custom drawing requires a repeated, specific need that the library cannot represent clearly. Register the meaning, owner, source SVG, accessibility label and review date. Do not invent a pictogram for a price type that already has a short, clear label.
Brand assets
Do not use a Lucide person, chart or star as the People Markets logo. Source-platform and payment logos belong in the approved brand-asset folder, retain their own proportions and attribution, and do not inherit the interface stroke rules.
Vue / Nuxt implementation
Use explicit named imports through a small typed registry. The current official Vue package is @lucide/vue. Existing lucide-vue-next installations need the documented migration; do not mix packages in a single app. Pin the reviewed version in the lockfile.
import { Search, Check, ChevronDown, Star } from '@lucide/vue';
export const icons = {
search: Search,
check: Check,
'chevron-down': ChevronDown,
star: Star,
} as const;
export type IconName = keyof typeof icons;
// The PmIcon component renders only the selected component.
// Its SVG is decorative. Put the accessible name on the button.05
Space & layout
Use spacing to group information. A container is useful when its contents act as one unit, not merely because the page has an empty area.
4
8
12
16
20
24
32
48
64
96
Spacing scale in pixels at the default root size. Prefer the matching rem token in implementation.
Geometry
10 px
16 px
20 px
Control / normal panel / editorial frame. Small status tags use 5 px. Do not turn every control into a pill.
Reading widths
Keep prose around 60–70 characters per line. Cap marketing content at 1,280 px. A trading workspace can be wider when the additional space carries useful data.
White space should separate tasks. It should not push important explanations below a large decorative region.
| Width | Gutter | Product behavior |
|---|---|---|
| 320–639 | 16 px below 360; 20 px otherwise | Single reading column; compact market cards; order area below chart. |
| 640–959 | 24 px | Two market columns; hero can remain stacked; order area below. |
| 960–1279 | 32 px | Three market columns; two-column hero and chart / order layout when content fits. |
| 1280+ | 48 px | Four market columns; capped content widths; additional space serves data or breathing room. |
06
Components
Examples include their purpose, state and interaction. They should remain useful without photography, animation or a pointer.
Actions
Primary action, secondary action, saved-state action and consequential action. The cancel example explains the confirmation state; it does not cancel anything.
Labels and errors
Keep the unit and amount basis visible. An error belongs next to the field and remains until corrected.
Try submitting an empty amount, a negative amount or more than two decimal places. The example validates the format only.
Person markets
Open the name to inspect the anatomy. The watch control is a separate action, not nested inside a card link.
Mark · points1,084.20
24h change+4.12%
Mark · points972.40
24h change−1.07%
- Full person identity, category and ticker.
- Instrument type and illustrative/production status.
- A named value with units and a matching change period.
- An independent watch control with a pressed state.
At small product widths, portrait-led cards become compact cards. The identity, value and action remain present. Hover only changes the border, immediately.
No lift, tilt, image zoom, hover recoloring, animated counters or entrance effects.
Financial values
Value type, unit and timestamp are part of the component. Do not turn an unknown value into zero.
The financial guide distinguishes the protected mark price from the external reference and last trade. See Sources for the internal reference.
- Mark price · points
- 1,084.20
- Last trade · points
- 1,085.00
- External reference · points
- 1,068.10
- Executable quote
- Not connected
Illustrative values. No execution estimate is derived from these display fields.
07
Controls
Dropdowns, checkboxes, radio groups and scroll regions use the same visual language as the rest of the product. These examples work with a keyboard as well as a pointer.
16 px
16 px
Selection
Expand
01 / Single selection
Dropdowns
Use a dropdown when the choices would take up too much room as a visible group. Keep a persistent field label. The saved value uses the Lucide Check. The option being explored has a pale background, without a left border or inset highlight. The saved choice keeps its checkmark. A chevron only opens or closes the list.
Arrow keys explore without changing the saved value. Enter, Space or Tab commits the highlighted option. Escape cancels. Typing jumps to a matching label. Disabled options remain readable but cannot be chosen.
↑↓HomeEndEnterEsc
The popup stays inside the viewport and opens above the control when there is more room. It is a list of values, not an action menu. Implementation references
The asset cannot be changed in this example.
Selected category: All categories.
02 / Multiple selection
Checkboxes
Checkboxes allow independent choices. A short horizontal mark means only some items in the group are selected. The square is 16 px, with a 3 px corner radius. The clickable label is at least 44 px high.
Try clearing one item, then selecting the group again. Space toggles the focused checkbox. Do not preselect consent, or use a checkmark as proof that someone understands trading risk.
2 of 3 categories selected.
Error example: choose at least one category. The message, not the border alone, explains the issue.
03 / One choice from a short list
Radio groups and selection cards
Use 16 px circles for one choice and 16 px squares for independent choices. A selected radio has a centered 6 px dot. The label and card remain the larger click target.
Tab enters or leaves the group; arrow keys move between its choices. Here the default is a display preference. A consequential trade direction starts unselected in the order example.
Default view: Cards. This changes only the specimen.
04 / Immediate settings
Switches
A switch changes a reversible setting immediately. State the effect in its label and keep that label stable when the setting changes.
Use a checkbox for choices saved together by a form. Do not use a switch to place an order, grant consent, or make an irreversible account change.
External reference · points · sample
1,068.10
External reference shown.
05 / Native scrolling, custom finish
Scrollbars
Use a 4 px neutral line inside a 6 px lane, with rounded ends and no painted track. Scrollbar arrow buttons are removed where the browser exposes them. The line does not widen on hover.
The browser still owns scrolling. Wheel, trackpad, touch, keyboard and native thumb dragging remain available. Firefox uses its native thin variant; operating-system settings can change the exact width and visibility.
Tab into the first region and try Page Down, Home or End. On tablet and smaller screens, the data below reflows into labeled cards. A wider-screen table can scroll within its own region; the page does not.
Example activity
Market rules opened12:00
Tems saved to watchlist12:01
Reference series shown12:02
Chart period changed12:03
Price definition opened12:04
Sport filter selected12:05
Table view selected12:06
Review example opened12:07
Review example closed12:08
Market list restored12:09
Fabricated interface activity for scrolling. No orders or account changes.
4 px line / 6 px laneNative scrolling. No arrow buttons.| Person | Mark | 24h change | Reference | Snapshot |
|---|---|---|---|---|
| Tems | 1,084.20 | +4.12% | 1,068.10 | 12:00 UTC |
| Eliud Kipchoge | 972.40 | −1.07% | 977.80 | 12:00 UTC |
06 / Input details
Text, amounts and increments
Put a unit beside the value, not inside a disappearing placeholder. The boundary and focus ring belong to the whole input group.
Use a stepper only when fixed increments make sense. Keep the field directly editable. The example changes rows per page, not a trade amount or leverage.
Text selection uses cobalt with contrasting text. The character counter supports the field; it is not a stream of screen-reader announcements.
USDC
Example only. Not stored.0 / 180
07 / Related content
Tabs and disclosures
Tabs switch between related panels. Their active underline is stable. Arrow keys move focus; Enter or Space opens the panel. A disclosure opens supporting detail in the page.
Do not hide an amount, fee, restriction or unresolved order state in a tooltip. Help must work by touch and keyboard, not only on hover.
A person market is a financial contract linked to changing public relevance. It does not give ownership of the person or a share of their income.
Mark price and external reference are separate values. Name the series, its units and its update time.
The actual market rules define contract units, costs, margin and settlement. This reference does not supply production terms.
Why are prices shown in points?
Points are the quoted units in these examples, not dollars. The actual contract determines how a point change affects profit or loss.
Delivery
Without JavaScript, selects, checkboxes and radios remain native controls. With enhancement, native inputs still own the value and keyboard behavior; adjacent decorative SVGs supply the small marks. Test both paths with the supported browsers and assistive technology.
08
Notes & quotations
Use ordinary copy for guidance, a clear notice for an operational problem, and a quotation only when someone actually said it. These treatments should not look interchangeable.
01 / Supporting information
Reference notes
A small label identifies the topic. The copy provides the rule and a concrete example. No oversized quotation mark, colored side rail or slogan-style heading.
The example shows what belongs beside a number: its sign, period and, for funding, the payer. A designer can apply the rule without interpreting a slogan.
Price change
Show +4.12% over 24 hours, not “4.12%”. Use the same series for the value and its change.
Illustrative display. The sign and period remain visible at every width.
24h price change
+4.12%
Sign + value + period
Funding direction · example
Long positions pay short positions
State the payer. A positive sign alone is not enough.
02 / An operational condition
Notices
Name what happened, explain what the user can still do, then give the next step. Amber is reserved for a condition that needs attention, not for general design advice.
A timeout does not prove that an order failed. Keep the status and reference visible rather than relying on a brief toast.
Order status is not confirmed
Check the existing request before placing another order. This example is not connected to an order service.
Request reference: EXAMPLE-014
Operational-state specimen. Nothing has been submitted.
03 / Quoted material
Quotations
Use Instrument Sans at a modest reading size, followed by the speaker or source, date and context. The content earns the emphasis; an oversized quote symbol does not help.
This question is invented to demonstrate the layout. It is not a testimonial or research finding. Replace it with approved, attributed material before using this pattern as evidence.
Quotation layout specimen
“I recognise the person. What does the number mean?”
Written for this reference. No real speaker or research session is implied.
| Content | Treatment | Example label |
|---|---|---|
| Design rule or explanation | Ruled reference note, or ordinary paragraph | Price change |
| Current state affecting an action | Persistent inline notice with the available next step | Order status is not confirmed |
| A sourced speaker’s exact words | Blockquote and attribution | Speaker, source and date |
| A short reversible-action result | Status message; keep the result visible on the control | Added to watchlist |
09
Data & order states
Market lifecycle, data freshness and user permission are separate. The screen should explain the condition without guessing what the backend permits.
Retain what is useful
Keep the identity, existing positions, published rules and last known state where appropriate. Preserve a draft after a connection failure.
Do not promise an outcome
A timeout does not prove that an order failed. A cancel request does not prove the order cannot fill. Reconcile the existing reference before another submission.
10
Introducing the concept
Assume the visitor knows the people, but has never heard of a market linked to their public influence. Explain the idea before asking for a market view.
Proposed first-visit opening
A market for the people you follow.
People Markets lets you trade on the changing public influence of artists, athletes and creators. Each listed person has a market with a price. You can trade on that price rising or falling.
See how it worksExplore markets
You trade a financial contract, not ownership of the person or a share of their income.
Trading can lose money. Costs and the market’s rules affect the result.
First visit
The opening defines the product before asking someone to judge a price. “Think the market has them wrong?” can appear later, once the reader understands what a person market is.
The order of explanation
- Start with something familiar.People follow artists, athletes and creators. Begin with that recognition.
- Explain the new thing.A listed person has a market with a price; the trade concerns a financial contract linked to changing public influence.
- Show a trade.Use one hypothetical artist and show both outcomes of a rising-price trade. Then introduce a falling-price trade.
- Separate data from price.More attention does not guarantee a higher price. Reference data and trading activity serve different purposes.
- Offer a useful next step.Let the visitor explore a person, save a market or read its rules without first placing an order.
Explain the phrase before using it
| First explanation | Term introduced beside it |
|---|---|
| A trade that benefits if the price rises, and loses if it falls, before costs. | Long |
| A trade that benefits if the price falls, and loses if it rises, before costs. | Short |
| Money assigned to back the trade. | Collateral |
| A number used to value open trades and check their financial backing. It is not necessarily the execution price. | Mark price |
| A benchmark built from approved outside data under published rules. | External reference |
Public influence is the introductory wording for the product’s governed measure of changing public relevance. It is not a claim to measure a person’s total worth or to treat every mention as positive. Definitions and financial labels must still match the implemented contract.
What the opening must not do
Do not begin with mispricing, oracle formulas, leverage or a rivalry poll. Do not tell people their taste is an investment advantage. Keep the no-ownership explanation and a plain risk statement beside the first invitation to explore.
The messaging guide contains the full homepage sequence, a short spoken explanation, before-and-after copy and a comprehension test. The screen examples use this same introduction rather than a different campaign headline.
11
Screen examples
Resize an actual product viewport, inspect its measured layout, then compare the rules below. A scaled preview changes how large the screen looks, not the layout it uses.
1,024 CSS px · calculating display scaleLayout fixture, not a live exchange
Viewport presets
“Fit to view” scales the preview only. Turn it off for 1:1 interaction. “Open at full size” uses your new browser window’s dimensions, not the selected preset. The frame has its own scrollbars.
What changes at each width
These rules describe the product examples in this file. Widths are CSS pixels. Rotate a device or resize a window to change the layout; the person using it has not become more or less experienced.
320–639 px
The website introduction stacks. Discover and Markets default to compact person cards with the same identity, price and watch action. Search and the view selector move onto separate rows. The optional compact view also uses labeled cards, not a horizontally scrolling table. Market detail places the order form after the chart and context.
At 320–359 px the page gutter is 16 px; at 360–639 px it is 20 px. Full-screen review dialogs keep their close control in a sticky header. Important labels wrap rather than disappearing.
640–959 px
Discover and Markets default to two card columns. The website opening and market-detail workspace remain stacked. The order form is at most 600 px wide; it does not stretch across an empty wide column.
The gutter is 24 px. At short landscape heights there is no sticky order form. Use the order-example anchor to reach it without covering the chart with a floating button.
960–1279 px
Discover uses three columns. At 960–1,024 px, Markets also opens cards by default; tables remain a larger-screen presentation. The website places its introduction beside the feature. Market detail uses a flexible chart column and a 320 px order column, with a 24 px gap.
The gutter is 32 px. The order panel sticks only when the viewport is at least 720 px tall and the panel fits with 24 px clearance above and below. The review stays centered and scrolls internally when necessary.
1280 px and wider
Discover uses four columns. Main content stops at 1,280 px rather than stretching names, prose and forms across the display. The order column remains 320 px.
The minimum outer gutter is 48 px. Additional width becomes outside margin. More screen space does not add promotional panels or change financial permissions.
Check the transition, not only the preset
Use adjacent widths to see the exact moment a layout changes. All six buttons keep the same Discover data.
A component responds to its own space
The card below has its own width control. Changing it does not resize the page. Below 420 px, the values move underneath the identity; at 420 px and above, the image and type gain room. This is a CSS container query, not a device check.
Tems
Mark · points1,084.20
24h change+4.12%
Measuring component width.
On a small screen, the available space may cap the requested width. The readout reports the measured width, not just the slider value.
View the layout rule
.person-card-host { container: person-card / inline-size; }
.person-card { display: grid; grid-template-columns: 48px minmax(0, 1fr) 44px; }
.person-card__values { grid-column: 1 / -1; }
@container person-card (min-width: 420px) {
.person-card { grid-template-columns: 72px minmax(0, 1fr) 44px; }
.person-card__values { grid-column: 2 / -1; }
}Test the awkward cases
Long names and larger text
Use the long-name option above the viewport. The same market identity must survive in a card, table and detail header. Test real 200% text enlargement separately; a scaled-down preview is not a zoom test.
Short landscape windows
Open 844 × 390, then inspect an order review. The close action and the last line must remain reachable. Do not infer a desktop interface from width alone.
Popups near an edge
Open the view dropdown near the lower edge. Its list must open into available space rather than being clipped by a card or preview frame. An iframe cannot draw outside its own viewport.
Card-first records
Open Markets at 390, 768 and 1,024 px: cards are the default. Select Compact cards to compare labeled values without scrolling sideways. All values and actions remain available. Above 1,024 px, the Table option remains.
On-screen keyboard
On an actual phone, focus the collateral field. Check visible labels, error text and the review button with the keyboard open. A resized desktop frame cannot reproduce the phone keyboard.
Focus and touch
Move through the page without a mouse. Focus must remain visible when notes expand or a dialog opens. Use the full label area to select a radio or checkbox.
12
Accessibility
Build toward WCAG 2.2 AA, then test the actual product. A token table or a simulated phone view cannot establish conformance.
| Area | Rule and evidence |
|---|---|
| Text | At least 4.5:1 for normal text; 3:1 for qualifying large text. Use the unrounded contrast ratio. W3C contrast |
| Controls | Necessary graphical boundaries need appropriate 3:1 contrast. Our recommended hit area is 44 px; WCAG AA’s 24×24 px criterion has specific exceptions. W3C targets |
| Reflow | Ordinary content remains usable at 320 CSS px. Record tables reflow into labeled cards at 1,024 px and below; only genuinely two-dimensional content may retain a local scroll region. Also test 200% text sizing. W3C reflow |
| Focus | Visible focus, meaningful order and return after a dialog. Sticky controls must not completely hide the focused element. W3C focus |
| Feedback | Use accessible status feedback for results and saved states. Keep important order outcomes in a persistent record. W3C status |
| Charts | Use labeled series, line-style differences, a plain summary and accessible data. Color and hover are insufficient on their own. |
Manual testing
Test the keyboard path, screen-reader output, text enlargement, high-contrast mode and touch interaction on the devices you support. This reference’s automated checks are listed in Release checks.
13
Engineering
Share the tokens and component semantics across marketing and product. Keep financial state and execution authority outside the visual layer.
Separate fixtures
Keep demo values, fee examples and execution stubs out of production configuration. Never use an illustrative leverage setting as a default.
Type the values
Each field needs its kind, unit, precision, source timestamp and state. A null value is not a zero. Authorization comes from the appropriate service.
Shared CSS tokens
:root {
--canvas: #F7F5EF;
--surface: #FFFFFF;
--surface-alt: #F0EEE8;
--ink: #181A20;
--muted: #60646F;
--line: #DEDCD5;
--control: #777C86;
--action: #2452FF;
--on-action: #FFFFFF;
--action-soft: #E9EEFF;
--gain: #087452;
--loss: #BF3545;
--warning: #795000;
--warning-soft: #FFF3D2;
--butter: #F3E5AB;
--font-display: "Bricolage Grotesque", Arial, sans-serif;
--font-ui: "Instrument Sans", Arial, sans-serif;
--font-data: "IBM Plex Mono", Consolas, monospace;
--selection-size: 16px;
--selection-radius: 3px;
--selection-gap: 10px;
--scroll-lane: 6px;
--icon-sm: 16px;
--icon-md: 20px;
--icon-lg: 24px;
--icon-stroke: 2;
--radius-control: 0.625rem;
--radius-panel: 1rem;
--radius-feature: 1.25rem;
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.25rem;
--space-6: 1.5rem;
--space-8: 2rem;
--space-12: 3rem;
--space-16: 4rem;
--space-24: 6rem;
}
[data-theme="dark"] {
--canvas: #14171D;
--surface: #1D222A;
--surface-alt: #252B35;
--ink: #F4F3EF;
--muted: #ADB5C2;
--line: #343D49;
--control: #8D99AA;
--action: #A1B5FF;
--on-action: #111722;
--action-soft: #27314D;
--gain: #68D5AC;
--loss: #FF9BAC;
--warning: #EFCB80;
--warning-soft: #3A3121;
}
.market-value { font-family: var(--font-data); font-variant-numeric: tabular-nums; }
.market-card { transition: none; }
.market-card:hover { border-color: var(--control); }
:focus-visible { outline: 3px solid var(--action); outline-offset: 4px; }
Recommended component contracts
PersonIdentity · MarketValue · WatchControl · MarketCard · PairHeader · ContextItem · PriceChart · OrderTicket · OrderReview · OrderStatus. The UX guide defines their inputs, states and behavior.
Use native elements first. Preserve source routes and browser navigation when porting these standalone examples. Do not mistake a local modal and sample arithmetic for an integrated trading flow.
Control styling
These are the actual shared styles used by the reference and its product examples. The card-first boundary is 1,024 CSS px. Use semantic labels in each record; the optional people-markets-responsive-v1.4.js helper enhances simple tables. An explicit compact view preserves sorting and watch actions without horizontal scrolling. The dropdown also needs its interaction code; styling alone does not provide keyboard behavior.
Shared control CSS
/* People Markets 1.4. Requires the approved People Markets palette tokens.
Selection mark CSS expects the native-input + decorative-sibling markup
documented in the HTML; native inputs remain usable without enhancement. */
/* 1.3 — native scrolling, a 4px visible line in a 6px lane. */
:root{--scroll-lane:6px;--scroll-thumb:#858A95;--scroll-thumb-hover:#60646F;--selection-size:16px;--selection-radius:3px;--selection-gap:10px;--icon-sm:16px;--icon-md:20px;--icon-lg:24px;--icon-stroke:2}
[data-theme=dark]{--scroll-thumb:#7E8999;--scroll-thumb-hover:#ABB5C4}
html{scrollbar-gutter:stable}
*{scrollbar-width:thin;scrollbar-color:var(--scroll-thumb) transparent}
/* A non-auto standards value overrides WebKit parts in current Blink. Reset it
only where those parts are supported, so arrow buttons can be removed. */
@supports selector(::-webkit-scrollbar){
*{scrollbar-width:auto;scrollbar-color:auto}
::-webkit-scrollbar{width:var(--scroll-lane);height:var(--scroll-lane);background:transparent}
::-webkit-scrollbar-track,::-webkit-scrollbar-track-piece,::-webkit-scrollbar-corner{background:transparent;border:0}
::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border:1px solid transparent;background-clip:padding-box;border-radius:999px;min-height:32px;min-width:32px}
::-webkit-scrollbar-thumb:hover{background-color:var(--scroll-thumb-hover)}
::-webkit-scrollbar-button,::-webkit-scrollbar-button:single-button,::-webkit-scrollbar-button:double-button,::-webkit-scrollbar-button:start:decrement,::-webkit-scrollbar-button:end:increment{display:none;width:0;height:0;min-width:0;min-height:0;border:0;background:none}
}
:root[data-scrollbars=system] *,:root[data-scrollbars=system]{scrollbar-width:auto!important;scrollbar-color:auto!important}
:root[data-scrollbars=system] ::-webkit-scrollbar,:root[data-scrollbars=system] ::-webkit-scrollbar-track,:root[data-scrollbars=system] ::-webkit-scrollbar-track-piece,:root[data-scrollbars=system] ::-webkit-scrollbar-corner,:root[data-scrollbars=system] ::-webkit-scrollbar-thumb,:root[data-scrollbars=system] ::-webkit-scrollbar-thumb:hover,:root[data-scrollbars=system] ::-webkit-scrollbar-button{all:revert!important}
@media(forced-colors:active){
*,html{scrollbar-width:auto!important;scrollbar-color:auto!important}
::-webkit-scrollbar,::-webkit-scrollbar-track,::-webkit-scrollbar-track-piece,::-webkit-scrollbar-corner,::-webkit-scrollbar-thumb,::-webkit-scrollbar-thumb:hover,::-webkit-scrollbar-button{all:revert!important}
}
/* A native input owns the value. The small adjacent SVG owns its appearance.
The input's label supplies a 44px target without enlarging the visual mark. */
input[type=checkbox]:not(.pm-switch),input[type=radio]{appearance:auto;-webkit-appearance:auto;width:16px!important;height:16px!important;min-height:16px!important;flex:0 0 16px;margin:0;padding:0!important;accent-color:var(--action)}
input[type=checkbox]:not(.pm-switch)::before,input[type=radio]::before{content:none!important;display:none!important}
.pm-selection{position:relative;display:inline-flex;flex:0 0 var(--selection-size);width:var(--selection-size);height:var(--selection-size);align-items:center;justify-content:center;vertical-align:middle;isolation:isolate}
.pm-selection input[type=checkbox],.pm-selection input[type=radio]{position:absolute;inset:0;width:100%!important;height:100%!important;min-height:0!important;padding:0!important;margin:0!important;opacity:0;z-index:2;cursor:pointer}
.pm-selection-mark{width:100%;height:100%;border:1.5px solid var(--control);border-radius:var(--selection-radius);background:var(--surface);display:grid;place-items:center;color:var(--on-action);pointer-events:none}
.pm-selection .pm-tick{width:14px;height:14px;max-width:none;stroke-width:2.5;display:none}
.pm-selection .pm-mixed{display:none;width:8px;height:1.5px;border-radius:1px;background:currentColor}
.pm-selection input:checked+.pm-selection-mark,.pm-selection input:indeterminate+.pm-selection-mark{background:var(--action);border-color:var(--action)}
.pm-selection input:checked:not(:indeterminate)+.pm-selection-mark .pm-tick{display:block}
.pm-selection input:indeterminate+.pm-selection-mark .pm-mixed{display:block}
.pm-selection input[type=radio]+.pm-selection-mark{border-radius:50%;background:var(--surface)}
.pm-selection input[type=radio]:checked+.pm-selection-mark{border-color:var(--action)}
.pm-selection input[type=radio]:checked+.pm-selection-mark::after{content:'';display:block;width:6px;height:6px;background:var(--action);border-radius:50%}
.pm-selection input:focus-visible+.pm-selection-mark{outline:2px solid var(--action);outline-offset:3px}
.pm-selection input[aria-invalid=true]+.pm-selection-mark{border-color:var(--loss)}
.pm-selection input:disabled{cursor:not-allowed}
.pm-selection input:disabled+.pm-selection-mark{background:var(--surface-alt);border-color:var(--control);color:var(--muted);opacity:.6}
.pm-selection input[type=radio]:checked:disabled+.pm-selection-mark::after{background:var(--muted)}
.pm-choice{gap:var(--selection-gap);font-size:14px;min-height:44px;padding:8px 0}
.pm-choice-card{padding:12px 14px;gap:10px}
.pm-choice-card .pm-selection{margin-top:3px}
.pm-choice-card input{margin:0}
.pm-choice-card strong{font-size:14px}
.pm-choice-card small{font-size:13px;margin-top:3px;line-height:1.55}
.pm-choice-card:has(:focus-visible) .pm-selection-mark{outline:none}
.check-label{gap:10px;min-height:44px}
.pm-choice-grid{gap:10px}
/* Selection is a tick. Expansion is a chevron. They never share a path. */
.pm-option[data-committed]::after{content:none!important;display:none!important}
.pm-option .pm-option-check{position:absolute;right:10px;top:50%;margin-top:-8px;width:16px;height:16px;display:none}
.pm-option[data-committed] .pm-option-check{display:block}
.pm-option[data-active]{border-color:transparent;background:var(--action-soft);color:var(--ink);box-shadow:none}
.pm-option[data-committed] .pm-option-check{color:var(--action)}
.pm-option[aria-disabled=true] .pm-option-check{display:none}
input.pm-switch{width:34px!important;height:20px!important;min-height:20px!important;flex:0 0 34px;border-radius:999px;appearance:none;background:var(--surface-alt);position:relative;padding:0!important;margin:0}
input.pm-switch::before,input.pm-switch:checked::before{content:'';width:12px;height:12px;left:3px;top:2.5px;border:0;position:absolute;border-radius:50%;background:var(--muted);transform:none}
input.pm-switch:checked{background:var(--action);border-color:var(--action)}
input.pm-switch:checked::before{left:17px;background:var(--on-action)}
@media(forced-colors:active){
.pm-selection input[type=checkbox],.pm-selection input[type=radio]{opacity:1;appearance:auto;-webkit-appearance:auto}
.pm-selection-mark{visibility:hidden}
.pm-selection input:focus-visible{outline:2px solid Highlight;outline-offset:3px}
input.pm-switch{appearance:auto!important;-webkit-appearance:auto!important;width:16px!important;height:16px!important;flex-basis:16px}
input.pm-switch::before{display:none!important}
.pm-option[data-committed] .pm-option-check{color:CanvasText}
.pm-option[data-active]{outline:2px solid Highlight;box-shadow:none}
}
/* 1.4 — card-first records at tablet widths and below (<= 1024 CSS px).
Keep table semantics and every value; do not conceal page overflow.
.pm-cell-label is real, decorative text duplicating a semantic column header.
The optional responsive helper creates these wrappers for simple tables. */
.pm-cell-label{display:none}
.pm-cell-value{display:contents}
.pm-only-small{display:none}
@media screen and (max-width:1024px){
.pm-only-small{display:inline}
.pm-only-large{display:none}
.table-wrap:has(>.pm-data-table){overflow:visible;border:0;border-radius:0;background:transparent}
.pm-scroll-box:has(>.pm-data-table){overflow:auto;background:transparent}
.pm-data-table{display:block;width:100%;min-width:0!important;max-width:100%;border-collapse:separate;background:transparent}
.pm-data-table caption{display:block;text-align:left;padding:0 0 12px;white-space:normal;overflow-wrap:anywhere}
.pm-scroll-box>.pm-data-table caption{padding:12px}
.pm-data-table thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.pm-data-table thead:has(button){position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;white-space:normal;display:block;padding:0 0 12px}
.pm-data-table thead:has(button) tr{display:flex;flex-wrap:wrap;gap:8px 16px}
.pm-data-table thead:has(button) th{width:auto!important;max-width:100%;padding:0;border:0;background:transparent;text-align:left;position:static;box-shadow:none}
.pm-data-table thead:has(button) th:not(:has(button)){position:absolute;width:1px!important;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.pm-data-table thead button{white-space:normal;min-height:44px}
.pm-data-table tbody{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:12px}
.pm-scroll-box>.pm-data-table tbody{padding:0 8px 8px}
.pm-data-table tbody tr{display:block;min-width:0;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.pm-data-table tbody tr>td,.pm-data-table tbody tr>th{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:start;gap:12px;min-width:0;width:auto!important;padding:12px 14px;border:0;border-bottom:1px solid var(--line);text-align:left;position:static;box-shadow:none;background:transparent;white-space:normal}
.pm-data-table tbody tr>:last-child{border-bottom:0}
.pm-data-table .pm-cell-label{display:block;min-width:0;font:500 12px/1.5 var(--font-ui);letter-spacing:normal;color:var(--muted);text-align:left;white-space:normal;overflow-wrap:anywhere}
.pm-data-table .pm-cell-value{display:block;min-width:0;max-width:100%;overflow-wrap:anywhere;white-space:normal}
.pm-data-table code{white-space:normal;overflow-wrap:anywhere}
.pm-data-table.app-table th:first-child,.pm-data-table.app-table td:first-child{position:static;left:auto;box-shadow:none;background:transparent}
.pm-data-table.app-table .person-link{min-width:0;align-items:flex-start;gap:10px}
.pm-data-table.app-table tbody tr>td:first-child{grid-template-columns:1fr}
.pm-data-table.app-table td:first-child .pm-cell-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.pm-data-table.app-table .avatar{flex:0 0 40px}
}
Dropdown enhancement contract
The native select remains the form-value source. A select-only combobox exposes the value and expanded state. List options are addressed through aria-activedescendant; arrows explore, Escape restores the previous value, and Enter, Space or Tab commits. No-JavaScript mode retains a styled native select. Disabled and invalid states mirror the source field. Never reuse this popup for an action menu without changing its interaction contract.
The embedded script exposes PMControls.sync() for programmatic value changes. In a component framework, bind the equivalent value and event handlers to one source of state.
Companion implementation: control CSS and icon specification. The handoff ZIP includes the typed Vue registry and PmIcon example.
14
Release checks
The reference is ready to guide implementation. Production release depends on assets, connected behavior, evidence and testing that a standalone HTML file cannot supply.
- Original approved logo and its variants are integrated.
- Reference photographs are replaced or approved, with credits and relevant rights review.
- Labels, units, contract multipliers, permissions and quote freshness match the actual services.
- No real-order action is enabled with missing essential data.
- Order retries, partial fills, cancellation races and unknown responses reconcile correctly.
- 320 px reflow, 200% text enlargement, keyboard use and real-device layouts pass review.
- Dark theme, forced colors, image failure and remote-font failure preserve usability.
- Production claims, data sources, dates and product availability are verified.
- Newcomers can explain the contract, costs and risk; experienced users can reach their tasks efficiently.
Reference-file test record
Revision 1.4 checks
268 targeted automated checks passed in Chromium 144.0.7559.96. The current revision was checked on 24 September 2026. Coverage includes all 16 reference sections, all three product screens, light and dark themes, long names, 320–1,440 px layouts, 844 × 390 landscape, and the 1,024/1,025 px card-first boundary. Markets opens cards on small screens; its compact view, chart data and reference records reflow without horizontal scrolling.
Additional interaction checks cover sorting, watch actions, search and view preferences across resizing, focus restoration, dropdown commitment and cancellation, removal of the left highlight, forced-colors focus, the embedded preview, script syntax and pre-rendered record labels without JavaScript. No uncaught JavaScript errors were recorded. These checks used the existing fallback fonts and images; the online font rendering, other browsers, real devices and assistive technologies still need production review.
Supplied revision 1.3 baseline
Earlier checks reported in the supplied 1.3 handoff. The 16 reference sections and three product screens were checked in light and dark at 320, 390, 639, 640, 768, 959, 960, 1024, 1279, 1280 and 1440 CSS pixels. The three product screens also received 844 × 390 landscape checks in both themes. That revision reported 424 layout cases within the page width; its earlier small-screen horizontal-table behavior is superseded by the card-first rules above.
56 structural and interaction checks passed. These covered script syntax, unique IDs, 16 px control geometry, 44 px label rows, the distinct check and chevron paths, mixed checkbox groups, label and Space-key selection, radio arrow keys, disabled controls, dropdown cancellation and commitment, type-ahead, mobile popup placement, icon search and sizing, watch states, clipboard fallback, dialogs and focus return.
Scrollbar behavior was checked with native scrollbars visible. The Chromium test configuration disabled its normal screenshot scrollbar-hiding flag. The 6 px lane, 1 px transparent thumb borders, transparent track and removed arrow buttons were checked. Page Down still scrolls the named region. System-size preference reaches the document, embedded preview and full-size example; forced colors restore native controls and scrollbar sizing. The line, checkbox, radio, dropdown and icon treatments were visually reviewed in the reference and mobile examples.
Fallbacks. Native checkboxes and selects remain available without JavaScript. The embedded market checkbox receives the same compact treatment and continues to control the reference series. No uncaught JavaScript errors were recorded in these runs.
Limits. Those original checks used fallback assets when remote requests were blocked. The deployed reference now hosts photographs locally; Bricolage and Instrument rendering still depend on font loading. Firefox, Safari, physical devices, assistive technologies, full zoom testing and production services were not tested. The Vue icon starter is an implementation pattern, not a compiled application or a pinned package snapshot. No accessibility or production-readiness certification is implied; the original logo remains outstanding.
The test record applies only to this reference file. Live API behavior, financial calculations, real devices, assistive technology and the original logo still require implementation-stage testing.
15
Sources & credits
Product definitions come from the existing financial guide. Control and responsive behavior was checked against the references below. Design choices and code examples are implementation proposals.
Internal product reference. People Markets – Financial, Trading and Quant Design.docx, project-accessible Library. Sections used: What People Markets Is; The Four Product Types; Pricing Strategy; Information Sources; Funding; Key Concepts; and launch controls. This is a working design source, not evidence of deployed functionality.
Contrast. W3C: text contrast and non-text contrast.
Target size. W3C: minimum target size and exceptions. Our 44 px hit-area rule is a product recommendation, not a restatement of the AA minimum.
Responsive reading. W3C: reflow and text resizing.
Focus and dialogs. W3C: focus not obscured and modal dialog pattern.
Labels and feedback. W3C: labels and instructions, status messages, and use of color.
Typography. Bricolage Grotesque · Instrument Sans · IBM Plex. Fonts are linked from Google Fonts. No font files are included in this handoff.
Control behavior. W3C: select-only combobox, checkboxes, and radio groups. The custom dropdown needs browser and assistive-technology testing before production use.
Native scrolling and component layout. MDN: scrollbar styling, scrollbar gutters, and container queries. Reviewed for revision 1.3 on 24 September 2026.
Icons. Lucide specification, Vue package, v1 migration, accessibility, and license notices. Reviewed 24 September 2026. Inline SVGs in this reference are a curated preview subset; production components come from the reviewed package.
Scrollbar overrides. MDN: scrollbar parts and standard-property precedence. The non-standard parts are used only as a supported-browser enhancement. Standards-only engines use native thin scrollbars; system preference and forced-colors mode restore platform defaults.
Reference photography
The photographs are remote references. CSS crops and grayscale are applied without hover changes. The images do not imply endorsement or confirmed listings. Any image adaptation must retain its applicable license; production suitability remains a separate review.
Tems. Maryland GovPics. Original source and attribution · CC BY 4.0.
Kendrick Lamar. Fuzheado (Andrew Lih); crop by Wcamp9. Original source and attribution · CC BY-SA 4.0.
Eliud Kipchoge. Desitlicheresguruweil; crop and rotation by Bagumba. Original source and attribution · CC BY-SA 4.0.
Drake. The Come Up Show; crop by Wabbuh. Original source and attribution · CC BY 2.0.
The Tems source page flags deletion of its source file. Do not carry that reference into production without reviewing the issue. When a remote image is unavailable, the name-led fallback remains visible.
Checking linked fonts.