Study One UI’s viewing and interaction structure, 24dp margin guidance and 200% text-scaling requirement through a complete original reading-preferences preview with dark appearance and explicit reset recovery.
Complete original HTML/CSS/JavaScript; native browser controls and dialog, not Samsung platform components. · Implementation reference
02
Samsung One UI Design System Design Reference
Samsung’s public layout and accessibility guidance, with original CSS-study choices labeled separately. No unpublished palette, font or component API is invented.
Samsung One UI Design System One UI Design Guidance and Browser Scope
Treat One UI as platform guidance
One UI describes interaction across Samsung devices, including phones, larger screens and foldables. It is not a generic web component package. The supplied example is an original browser study of reading preferences. It demonstrates a viewing region, a lower interaction region and explicit recovery, while making no claim to run Samsung components or change a device setting.
Keep implementation values honest
The reference separates published requirements from authored browser values. A 24dp native margin is recorded in its original unit; the preview’s 24px inset is a deliberate web interpretation. The blue, gray surfaces and 24px card radius are original study values. This distinction prevents an agent from treating a visually plausible CSS variable as a verified Samsung token.
Keep dp and CSS px distinct.
Label original palette and radius choices as original.
Do not describe a browser preview as a Samsung system setting.
Samsung One UI Design System Viewing Area and Reachable Actions
Give the opening area a useful role
The upper region names Reading preferences and provides a short context line. Below it, grouped settings and a reading sample carry the task. Apply and reset appear after those groups. The structure makes the title easy to read while keeping the meaningful actions together, rather than distributing unrelated controls around a decorative device frame.
Adapt the structure instead of faking a device
The browser study has no operating-system status bar, camera cutout or device permissions. Its narrow layout keeps all settings available and allows the action row to stack. Native implementations still need to account for real safe areas, cutouts, orientation and foldable changes. A responsive browser screenshot cannot verify those device-specific behaviors.
Samsung One UI Design System Quiet Surfaces and Explicit Appearance
Use background blocks to group related content
Each setting and the reading sample sit on a quiet card surface. The action color identifies interactive choices, while the descriptive text uses a separate muted role. The dark appearance changes the same roles instead of placing a dark overlay on a light interface. All of these CSS colors are authored interpretation values, and the downloadable source labels them accordingly.
Preserve settings when appearance changes
The appearance checkbox affects only the preview’s theme. It does not clear the selected reading size or imply that a Samsung system preference has changed. The application clears any earlier applied confirmation when a choice changes, so the status message cannot describe a state that is no longer current.
Samsung One UI Design System Reading Scale and Reflow
Demonstrate the 200 percent case explicitly
The reading-size control provides 100, 150 and 200 percent options. It changes the sample paragraph’s font size and lets its card grow naturally. The text does not truncate, overlap adjacent controls or require a second fixed-height region. The control is specifically a reading sample, not a claim to change every browser or operating-system font setting.
Keep the complete words available
Samsung One UI Design System Apply, Reset and Dialog Focus
Use confirmation language that matches the action
Apply to this preview reports the chosen appearance and reading percentage. The message explicitly says nothing was sent to a device. It is a persistent status message instead of a quickly disappearing toast, giving a reader time to inspect the result. Changing either setting clears that previous confirmation.
Make resetting an explicit choice
Reset opens a native browser dialog with Keep preferences and Reset actions. Cancel and Escape retain both current choices. Confirming reset restores the light appearance and standard size, then returns focus to the action that opened the dialog. The complete state transition is provided in source rather than described as an unspecified handler.
Samsung One UI Design System Complete Browser Study and Native Next Steps
Run without an invented One UI dependency
The complete HTML document includes all styles, content and JavaScript. Save it as index.html and serve it locally. It makes no external font or runtime request and requires no Samsung SDK. When moving to a native app, use the official One UI and Android resources for actual platform controls, density units, accessibility services and configuration changes.
Save the supplied self-contained HTML document.
Serve its directory locally and open the preview.
Test 200 percent reading size and both appearance modes.
Verify cancel, Escape and confirmed reset separately.
Test the sequence that exposes mistakes
Choose dark appearance and 200 percent reading size, apply them and inspect the confirmation. Open reset, cancel and verify both choices remain. Repeat with Escape, then confirm reset and verify the values and focus return. Review the enlarged paragraph at desktop and phone widths, checking that no words or controls are clipped.
Samsung One UI Design System Component Examples
index.html — complete reading-preferences study
The complete layout, light/dark roles, text-scale control and cancel-safe reset dialog.
html
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Reading preferences study</title><style>
/* Original web-study values, not exported Samsung design tokens. */
:root{--study-background:#f3f3f6;--study-card:#fff;--study-text:#17171c;--study-muted:#5b5b66;--study-action:#2557c8;--study-border:#d9d9e1;--study-text-scale:1}*{box-sizing:border-box}body{margin:0;background:var(--study-background);font-family:Arial,sans-serif;color:var(--study-text)}body.dark{--study-background:#101014;--study-card:#222228;--study-text:#f7f7fb;--study-muted:#bbbbc8;--study-action:#9bbaff;--study-border:#41414c}main{max-width:980px;padding:32px;margin:auto}.context{font-size:13px;line-height:1.6;color:var(--study-muted);max-width:74ch}.phone{max-width:560px;margin:32px auto;background:var(--study-background)}.viewing{padding:40px 24px 32px;min-height:230px;display:flex;flex-direction:column;justify-content:flex-end}.viewing p{font-size:14px;margin:0 0 16px;color:var(--study-muted)}h1{font-size:40px;line-height:1.15;margin:0;letter-spacing:-.025em}h2,.setting-title{font-size:20px;line-height:1.4;margin:0}section.settings{padding:0 24px}.card{border-radius:24px;background:var(--study-card);padding:24px;margin-bottom:16px}.setting{display:flex;gap:24px;justify-content:space-between;align-items:center}.setting p{font-size:14px;line-height:1.5;color:var(--study-muted);margin:8px 0 0}input[type=checkbox]{width:28px;height:28px;accent-color:var(--study-action);flex-shrink:0}label{cursor:pointer}.field{display:grid;gap:12px}select,button{font:inherit}select{width:100%;border:1px solid var(--study-border);border-radius:12px;padding:12px;background:var(--study-card);color:var(--study-text);min-height:48px}.sample{font-size:calc(16px * var(--study-text-scale));line-height:1.55;overflow-wrap:anywhere;margin:16px 0 0}.actions{padding:16px 24px 24px;display:grid;grid-template-columns:1fr 1fr;gap:16px}button{border:0;border-radius:999px;min-height:48px;padding:12px 16px;color:var(--study-action);background:var(--study-card);font-weight:700;cursor:pointer}.primary{background:var(--study-action);color:var(--study-background)}:focus-visible{outline:3px solid var(--study-action);outline-offset:4px}dialog{width:min(440px,calc(100% - 32px));border:0;border-radius:24px;padding:24px;background:var(--study-card);color:var(--study-text)}dialog::backdrop{background:#0008}dialog p{line-height:1.6}dialog .dialog-actions{display:flex;gap:12px;justify-content:flex-end;flex-wrap:wrap}#confirmation{font-size:14px;line-height:1.5;padding:0 24px 16px;color:var(--study-muted)}#confirmation:empty{display:none}@media(max-width:600px){main{padding:16px}.phone{margin:16px auto}.viewing{padding:32px 24px}.card{padding:20px}.actions{grid-template-columns:1fr}.setting{gap:16px}h1{font-size:34px}h2,.setting-title{font-size:18px}}
</style></head><body><main><p class="context">OpenDesign original One UI-inspired web study. This demonstrates viewing and interaction areas, readable settings and explicit recovery. It does not control a Samsung device or run native One UI components.</p><div class="phone"><header class="viewing"><p>Make space to read</p><h1>Reading preferences</h1></header><section class="settings" aria-label="Reading preferences"><div class="card"><label class="setting"><span><strong class="setting-title">Dark appearance</strong><p>Use a darker surface in this preview.</p></span><input type="checkbox" id="dark" aria-label="Dark appearance"></label></div><div class="card"><label class="field" for="size"><strong class="setting-title">Reading size</strong><select id="size"><option value="1">Standard · 100%</option><option value="1.5">Large · 150%</option><option value="2">Extra large · 200%</option></select></label></div><div class="card"><h2>A moment to pause</h2><p class="sample">A clear page gives each idea room to breathe. Keep the words that help the reader decide what to do next.</p></div></section><div class="actions"><button id="reset">Reset preferences</button><button class="primary" id="apply">Apply to this preview</button></div><p id="confirmation" role="status"></p></div><dialog aria-labelledby="reset-title"><h2 id="reset-title">Reset reading preferences?</h2><p>This returns the preview to its light appearance and standard reading size.</p><div class="dialog-actions"><button id="cancel">Keep preferences</button><button id="confirm-reset" class="primary">Reset</button></div></dialog><p class="context">Published references include the 24dp side-margin guidance and text scaling up to 200%. CSS pixels here are an original browser interpretation of the layout; app colors and radii are explicitly original. Reading-size changes affect the sample paragraph so its reflow can be inspected. No preference is saved beyond this page.</p></main><script>
const dark=document.querySelector('#dark'),size=document.querySelector('#size'),confirmation=document.querySelector('#confirmation'),dialog=document.querySelector('dialog');function refresh(){document.body.classList.toggle('dark',dark.checked);document.documentElement.style.setProperty('--study-text-scale',size.value);confirmation.textContent='';}dark.onchange=refresh;size.onchange=refresh;document.querySelector('#apply').onclick=()=>{confirmation.textContent=`Applied to this preview: ${dark.checked?'dark':'light'} appearance, ${Math.round(Number(size.value)*100)}% reading size. Nothing was sent to a device.`};document.querySelector('#reset').onclick=()=>dialog.showModal();document.querySelector('#cancel').onclick=()=>dialog.close();document.querySelector('#confirm-reset').onclick=()=>{dark.checked=false;size.value='1';refresh();dialog.close();confirmation.textContent='Light appearance and standard reading size restored.';};dialog.addEventListener('close',()=>document.querySelector('#reset').focus());
</script></body></html>
Study-prefixed colors and dimensions are original web choices.
Reading scale changes the sample paragraph; no browser or device preference is modified.
04
Samsung One UI Design System Agent Setup
Implementation Starting Point
This runs the original browser study. There is no One UI npm package or native Samsung runtime in this example.
sh
# Save the supplied complete example as index.html.
python3 -m http.server 8000
# Open http://localhost:8000/
A Prompt for Your Project
Agent Prompt
Build the supplied One UI-inspired reading study as an explicitly original browser interpretation. Preserve viewing and interaction areas, responsive text reflow at 200%, explicit appearance state, local-only confirmation, cancel-safe reset and focus return. Keep native dp requirements separate from original CSS pixel decisions.
05
Samsung One UI Design System Sources and Scope
An original OpenDesign browser interpretation of One UI principles. It is not a native One UI runtime and does not change device settings. Published requirements and original web values are separated in the reference.
