Guidance
From research to a useful interface
How principles become choices about hierarchy, reading, navigation and feedback.
Starlit Digital · Interface transparency
Starlit
Open UI Library
See the thinking. Try the interface.
A public notebook and working library of Starlit’s approach to user interfaces. Explore the research, decisions and code behind more usable, adaptable experiences.
A window into the work
Good interfaces deserve an explanation.
We research established patterns, learn from other projects and test our own interpretations. Here we share what informed a choice, how we implemented it, what it helps, and where its limits remain.
This is Starlit’s take on interface design. Sources stay visible. Examples stay inspectable. Accessibility is part of the underlying work, with optional reading tools on top.
From the studio notebook
Accessibility
The thinking behind our reading tools
One shared foundation, twelve focused controls, and a clear boundary between preferences and accessible content.
Transparency
What our checks can tell you
Scope, verification methods, known gaps and what still requires real user testing.
Explore the library
Patterns with a purpose.
Every reference includes the thought process, usage, impact, accessibility, and HTML, CSS, JavaScript and PHP integration code.
27 components
01 / Accessibility
Accessibility center
A complete gear panel with reading, appearance, motion and focus preferences.
Reasoning · Usage · Code · Accessibility02 / Accessibility
Reading toolbar
Keep size, spacing, appearance and fullscreen controls close to the text.
Reasoning · Usage · Code · Accessibility03 / Accessibility
Typography studio
Independent control over text size, type, spacing, alignment and line length.
Reasoning · Usage · Code · Accessibility04 / Accessibility
Appearance and contrast
Four appearance choices, 32 page shades and measured contrast at every step.
Reasoning · Usage · Code · Accessibility05 / Accessibility
Motion and media
Respect device motion preferences, pause media and show authored captions.
Reasoning · Usage · Code · Accessibility06 / Accessibility
Reading focus tools
A reading line, focus strip, larger pointer and visible keyboard focus.
Reasoning · Usage · Code · Accessibility07 / Accessibility
Keyboard guide
A focused help dialog with clear navigation instructions and no global shortcut collisions.
Reasoning · Usage · Code · Accessibility08 / Accessibility
Page navigator
A searchable outline with real heading destinations and reliable focus transfer.
Reasoning · Usage · Code · Accessibility09 / Accessibility
Read aloud
An optional local voice player with paragraph navigation, rate and volume controls.
Reasoning · Usage · Code · Accessibility10 / Accessibility
Image descriptions
Find the descriptions already authored for images and keep informative media in view.
Reasoning · Usage · Code · Accessibility11 / Accessibility
Reading presets
Choose practical combinations, compare active settings and move preferences between devices.
Reasoning · Usage · Code · Accessibility12 / Accessibility
Accessibility help
Create a local issue report with linked field errors and optional preference diagnostics.
Reasoning · Usage · Code · Accessibility13 / Content and forms
Bento feature grid
Give one lead idea visual priority while keeping supporting ideas connected.
Reasoning · Usage · Code · Accessibility14 / Content and forms
Email invitation form
Make the next step and its outcome understandable before collecting an address.
Reasoning · Usage · Code · Accessibility15 / Motion
Logo marquee
Show a collection with optional motion while preserving a readable still version.
Reasoning · Usage · Code · Accessibility16 / Motion
Magnetic action button
Add a small pointer response without making the action harder to reach.
Reasoning · Usage · Code · Accessibility17 / Content and forms
Masonry gallery
Let images retain their character while making the collection easy to scan.
Reasoning · Usage · Code · Accessibility18 / Navigation
Grouped footer
Help people recover a destination after reaching the end of a page.
Reasoning · Usage · Code · Accessibility19 / Motion
Canvas story player
Explore a timed visual story without making its canvas the only source of meaning.
Reasoning · Usage · Code · Accessibility20 / Motion
Scroll reveal
Use a brief reveal to reinforce sequence while keeping the content available.
Reasoning · Usage · Code · Accessibility21 / Navigation
Command search
Give people a fast way to find a known destination in a growing library.
Reasoning · Usage · Code · Accessibility22 / Content and forms
Statistics card
Present a useful signal with its context and a clear distinction between loading and loaded data.
Reasoning · Usage · Code · Accessibility23 / Navigation
Sticky navigation
Keep important destinations reachable as a page grows.
Reasoning · Usage · Code · Accessibility24 / Content and forms
Testimonial cards
Let a reader understand an attributed experience without confusing it with proof.
Reasoning · Usage · Code · Accessibility25 / Content and forms
Pricing comparison
Make the differences between options easy to compare before asking for a decision.
Reasoning · Usage · Code · Accessibility26 / Navigation
Sidebar navigation
Organize a workspace around stable destinations without competing with the main task.
Reasoning · Usage · Code · Accessibility27 / Motion
Text moments
Let a small text accent reinforce meaning without delaying access to the words.
Reasoning · Usage · Code · AccessibilityNo matching components. Clear the search or choose another category.
Learning in public.
Open means visible thinking and inspectable examples. It does not mean every experiment is ready for production, or that any preference panel certifies a website.