Shape & depth
4 px1 px
Borders, surfaces and depth.
Tags use a 4 px radius. Fine borders separate content, images keep their ratio, and dialogs use a backdrop.
Ning Zhou / Portfolio website
The portfolio,
one design system.
A shared design system for this portfolio.
Shared typography, components and navigation for the portfolio’s pages.
Shared / In this library
A library of website components.
Typography, controls, artwork frames, lighting, opening scenes and navigation, collected from the portfolio website.
Project / Within each case study
Product interactions are documented in each case study.
Product screens, task flows, states and iterations are presented within each project, with their own design language.
22Website components
04Component groups
01Shared library
01 / Foundations
Design foundations.
Shared colour, type and spacing. Each project page can have its own accent.
Website accents
Colour variants of the same website systemMoonlit is the default accent; the others identify project pages. App colours and component rules remain within their respective case studies.
Background
#090F10Surface
#111919Primary text
#EEE9DFSecondary text
#AAB3B0Typography
Typography for
comfortable reading.
Headings pair Newsreader with Source Han Serif at a regular weight. Chinese headings use natural character spacing. Body copy and navigation use Hanken Grotesk and Source Han Sans. These OFL fonts are hosted with the site. Artwork, logos and product screens retain each project’s original typography.
Project overview.
Display · 32–53 / 1.18Clear headings and readable body text.
Body · 17 / 1.8Project notes and information hierarchy
Secondary · 15 / 1.75Explore the project ↗
UI · 14 / 1.501 / Image caption
Caption · 13 / 1.65THE PROJECT
Label · 12 / 1.5Space
4 px base unit · Body width up to 640 px4
8
12
16
24
32
48
64
96
Icon & ornament
Icons guide actions; ornaments add detail.
Arrows indicate direction, and close and expand icons identify actions. Decorative frames and butterflies sit alongside clearly labeled controls.
Type in context
Sensing the invisible.
Body text explains the design; captions add context. Use full paragraphs to check reading rhythm at 17 px on desktop and 16 px on mobile.
01 / A wearable and companion app.02 / Website components
The shared library.
Shared website components, grouped by purpose. Each comes with usage notes and a working preview.
显示 22 个组件
No matching components. Try “button”, “image”, or clear your search.
04 / Page patterns
A project page example.
FellouAI demonstrates a project-page composition: heading, body, brand image and project facts.
01 / FellouAI · Brand & launch
A clear
launch presence.
Logo studies, launch visuals, communication materials and website recommendations for an AI product.
Explore FellouAI
- Context
- AI product · Brand & launch
- Focus
- Logo · Launch visuals · Digital touchpoints
01Section heading02Body copy03Image / Caption04Project facts
Covers and framesFrames follow image proportions. Keep subjects intact and captions outside, allowing long captions to wrap.
Website structure and project contentKeep website type and spacing consistent. This example uses FellouAI’s lavender accent while the brand image retains its own colours.
05 / Motion & feedback
Interaction details.
Try the site’s hover effects, image previews and messages. Each demo explains how it starts, responds and ends.
Hover me
Hover or focus with Tab; click to replay the fade.
1.025×Subtle text scaling
No layout shift
No layout shift
320 msEnter and leave
Ease in and out
Ease in and out
180 msKeyword emphasis
Surrounding words soften
Surrounding words soften
44 pxMinimum target height
Visible keyboard focus
Visible keyboard focus
Motion respects the system’s reduced-motion preference. With animation off, colour and focus feedback remain.
Study 01 / Text action
Text hover and focus.
- Use
- Project entries, reading links and clearly labelled text actions.
- Trigger
- Hover scales text to 1.025× with the project accent; leaving restores it.
- Keyboard & touch
- Tab shows a focus outline. Touch activates directly; motion never carries essential information.
- Boundaries
- Disabled actions do not respond. Text scaling preserves the surrounding layout.
Study 02 / Image dialog
Image preview and return.
- Open
- Click the image to reveal a large preview and backdrop. Focus moves inside.
- Closed
- Close or press Escape to return. Focus goes back to the image trigger.
- Boundaries
- The background stays inactive while the dialog is open. Tall images scroll within it.
Ready to open the preview.
Study 03 / Toast feedback
Share a project.
Copy the project link to share it in a message or email.
Try copying the link below.
More states
SCENARIO / SHARE A PROJECTTry it live
NExO
Wearable & companion app
Action → resultSuccess confirms the copy. If automatic copying is unavailable, select the link and copy manually.
Time to readMessages dismiss after 5.5 seconds; hover or focus pauses the timer. The card retains the result after the toast disappears.
Compare other statesSimulate success, error, loading and stacking, or change position. These state demos do not copy anything.
The copy button uses the current site URL shown above. This independent JavaScript component is inspired by Sonner; it does not use the React package.
06 / Signature interactions
How the interactions work.
Each interaction includes its purpose, structure, states and usage notes. Try individual components, then view them together on the homepage.
Reference study / Kaiwen Tang
A highlight that follows the active label.
A shared outline glides between labels and resizes to their width. The text grows gently; the outline stays behind it.
01 / Selected work
Selected design projects.
Brand identities, digital products and interactive experiences.
Purpose
Sliding highlight
A shared outline follows hover and keyboard focus. Clicking a tab changes its content; hovering only previews the target.
Anatomy / What it is made of
- 01 · Target
- A stable hit area; the label scales without changing its neighbours.
- 02 · Shared indicator
- One absolutely positioned element follows the target bounds. It does not cover the text.
- 03 · Content panel
- The selected tab owns the panel. Hovering alone does not replace the content.
| State | Trigger | Response |
|---|---|---|
| Rest | Pointer outside | Outline returns to the selected label. |
| Preview | Hover or keyboard focus | Move and resize the outline; enlarge the label slightly. |
| Selected | Click, or arrow-key selection | Update the panel and the selected state together. |
1.025× · Label scale420 ms · Shared outline48 px · Target height
Use it well
Use for a small set of related tabs. Keep the outline behind the labels and leave enough space between targets.
Keyboard, touch & reduced motion
Arrow keys, Home and End work without a mouse. Reduced motion removes travel; selection and content remain available.
Implementation reference
library-signatures.js / initSlidingHighlight · reference studyWebsite pattern / Work
One frame, six project covers.
Move between projects. The images slide inside one frame, which changes size with the cover. Switch the lamp off, or focus a row to redirect its light.
Interactive specimen
NExO
Purpose
Frame shell & ratio
Display project covers in a shared frame that adjusts to each image’s proportions.
Anatomy / What it is made of
- 01 · Ornament
- The same border-image element remains mounted across every selection.
- 02 · Mat & aperture
- A dark mat separates the decorative edge from the artwork. The aperture clips only the image track.
- 03 · Ratio constraint
- Natural width and height set the ratio; available stage space limits the final size.
| State | Trigger | Response |
|---|---|---|
| Loading | Cover dimensions unavailable | Use a provisional ratio, then measure the loaded image. |
| Resizing | Select a differently shaped cover | Animate width and height on the existing frame. |
| Constrained | Small screen or tall image | Reduce the whole frame to fit the stage; keep the image ratio. |
520 ms · Width + height1 · Persistent frame20 px · Specimen border
Use it well
Use for the portfolio’s curated Work list. The Stone Roses uses its existing art-directed crop; other covers retain their intrinsic ratio.
Keyboard, touch & reduced motion
On narrow screens, the frame moves below the list. Titles and captions remain outside the clipped artwork.
Implementation reference
work-hover.js / sizeFor · work-hover.css · library-signatures.js / layoutPurpose
Inner image track
Slide between project covers while keeping the same frame on screen.
Anatomy / What it is made of
- 01 · Viewport
- Overflow is clipped at the aperture, not at the ornament or caption.
- 02 · Track
- One vertical flex track contains all six images.
- 03 · Active index
- The selected index controls the track position and caption together.
| State | Trigger | Response |
|---|---|---|
| Ready | First image available | Show one cover; keep other slides outside the aperture. |
| Moving | A different row becomes active | Translate the existing track; never fade the whole frame out. |
| Interrupted | Another row activates mid-transition | Retarget from the current visual position. The latest selection wins. |
520 ms · Track travel6 · Slides in one tracktranslateY · Position
Use it well
Try moving directly from the first to the last project. The frame, mat and caption location stay stable while the selected artwork changes.
Keyboard, touch & reduced motion
With reduced motion, switch directly to the chosen cover. On touch screens, tap a row; the next-artwork button is also available.
Implementation reference
work-hover.js / track · library-signatures.css / .sig-art-trackPurpose
Lamp & beam
Point the reading light toward the active project. The title and selection marker also identify the current work.
Anatomy / What it is made of
- 01 · Switch
- A labelled button exposes its on/off state with aria-pressed.
- 02 · Beam origin
- The beam begins at the lamp shade, rather than at a fixed screen coordinate.
- 03 · Focus target
- The active row supplies the destination; interpolation softens changes in direction.
| State | Trigger | Response |
|---|---|---|
| On | Switch enabled | Draw a soft gradient from the lamp to the active row. |
| Aiming | Hover, click or keyboard focus | Ease toward the new row, preserving the lamp position. |
| Off | Switch disabled | Hide the beam; preserve the title, marker and selected artwork. |
280 ms · Beam fade0.20 · Specimen interpolationSVG · Directional gradient
Use it well
Use one light source for one list. A beam should support the reading hierarchy without washing out the lettering.
Keyboard, touch & reduced motion
Keyboard focus aims the light too. When motion is reduced, the beam changes direction immediately. Selection remains readable with lighting off.
Implementation reference
work-light.js / aim · library-signatures.js / paintBeamPurpose
Focus & return
Open a larger image, then return to the same selected project and reading position.
Anatomy / What it is made of
- 01 · Trigger
- The frame is a named button with a zoom affordance.
- 02 · Modal layer
- A native dialog separates the large image from the page and contains keyboard focus.
- 03 · Return point
- The same selected index and frame are retained after closing.
| State | Trigger | Response |
|---|---|---|
| Preview | Work selected | Keep a clear route to the larger image. |
| Focused | Click the frame | Open the dialog and move keyboard focus into it. |
| Returned | Close button, backdrop or Escape | Close and restore focus to the frame, with the same work selected. |
Native dialog · Focus containmentEscape · CloseSame index · Return
Use it well
This specimen isolates image inspection. The homepage combines the frame with its full project-entry transition; inspect that composition in the context preview.
Keyboard, touch & reduced motion
Provide a visible close button and project link. Large images scroll within the dialog; closing never resets the Work list.
Implementation reference
library-signatures.js / dialog · work-hover.js / work-zoomComponent studies / Homepage
Components of the opening scene.
Try the entrance, scroll movement, flowers, reading panel and navigation separately. The full homepage preview below shows how they fit together.
Isolated behavior study
Purpose
Curtain trigger
Open the curtain to enter the portfolio. The entry button remains separate from the decorative cloth.
Anatomy / What it is made of
- 01 · Entry action
- One visible action starts the opening; the decoration is not an unlabeled target.
- 02 · Two cloth layers
- Left and right panels move away from the centre together.
- 03 · Interaction gate
- Controls behind the curtain become available once entry is released.
| State | Trigger | Response |
|---|---|---|
| Closed | Initial visit | Offer the entry action; avoid activating hidden controls. |
| Opening | Click or entry gesture | Run one opening sequence; repeated input does not stack animations. |
| Open | Sequence completes | Release reading and navigation. Reset is available in this study. |
1800 ms · Cloth opening2 · Moving panels1 · Entry sequence
Use it well
The specimen isolates the trigger and two moving layers. The real homepage adds cloth physics, the river and the camera sequence.
Keyboard, touch & reduced motion
Provide keyboard activation and respect reduced motion. Direct chapter links should not force readers through the entrance again.
Implementation reference
curtain-journey.js + curtain-cloth.jsPurpose
Scroll camera
Connect the river and window scenes to the same scroll progress, so the transition works in both directions.
Anatomy / What it is made of
- 01 · Progress
- Normalise the scroll distance into a value from zero to one.
- 02 · Layer transforms
- The water recedes while the window and flowers enter at different stages.
- 03 · Availability gate
- Flower targets activate after 82% of the opening movement.
| State | Trigger | Response |
|---|---|---|
| River | Early progress | Prioritise the outside scene and first introduction. |
| Transition | Middle progress | Blend transforms from the same progress value. |
| Window | Late progress | Settle the composition and reveal the flower interactions. |
0–100% · Reversible progress82% · Flower activationTransform + opacity
Use it well
Drag the progress control in either direction. The layer diagram exposes the relationship; the context preview retains the full visual sequence.
Keyboard, touch & reduced motion
With reduced motion, present the settled window composition and retain navigation. Information must not depend on finishing an animation.
Implementation reference
moon-opening.js / render · --opening-motionPurpose
Petal target & glow
Use each flower as an entry to a profile topic. A label and glow identify it on hover or keyboard focus.
Anatomy / What it is made of
- 01 · Visible blossom
- The original flower asset carries colour and material.
- 02 · Hit area
- The interactive area is larger than a thin petal edge. Enable the anatomy overlay to inspect it.
- 03 · Label & glint
- A number anchors orientation; the name and glow appear on hover or focus.
| State | Trigger | Response |
|---|---|---|
| Available | Window settled | Show an identifying number at the flower. |
| Highlighted | Hover or focus | Reveal the topic name and a soft inner glint. |
| Expanded | Select flower | Mark the active flower and open its profile panel. |
250 ms · Glint fade6 · Profile targets44 px+ · Hit area
Use it well
The numbered target must stay distinguishable from the artwork. Use a short, meaningful accessible name for every flower.
Keyboard, touch & reduced motion
Touch selects directly. Keyboard focus reveals the same name and glow; do not rely on hover alone to communicate the topic.
Implementation reference
moon-opening.css / .flower-hit · nacre-depth.jsPurpose
Profile disclosure
Reveal a short introduction near its origin, then return the reader to the same flower and scroll position.
Anatomy / What it is made of
- 01 · Topic header
- A topic label and close action remain visible at the top.
- 02 · Reading body
- Text uses the website’s reading type scale, not a miniature tooltip size.
- 03 · Local navigation
- Previous and next controls move through topics while the panel stays open.
| State | Trigger | Response |
|---|---|---|
| Closed | No active flower | Keep the page clear for exploring. |
| Reading | Select a flower | Show its topic and keep the origin marked. |
| Swapping | Previous or next topic | Update the body and counter without rebuilding the whole scene. |
6 · TopicsEscape · Return to origin44 px · Close target
Use it well
Keep the first paragraph concise. Pause distracting ambient movement while a reader is inside the panel.
Keyboard, touch & reduced motion
On small screens, use a full-width panel with bounded height and internal scrolling. Closing restores focus to the opening flower.
Implementation reference
moon-opening.js / openPreview + closePreview · flower-profile.cssPurpose
Chapter index
Show the current chapter and provide direct links to the other sections.
Anatomy / What it is made of
- 01 · Toggle
- The trigger exposes aria-expanded and the panel it controls.
- 02 · Chapter links
- Numbered targets provide direct access to the main reading sections.
- 03 · Current marker
- A separate marker follows the active chapter, even after the menu closes.
| State | Trigger | Response |
|---|---|---|
| Collapsed | Menu closed | Keep a recognisable trigger in the page gutter. |
| Expanded | Activate the toggle | Show named chapter targets and the current item. |
| Current | Scroll or select a chapter | Update the marker and aria-current from the actual position. |
4 · Main chapters44 px · Specimen targetsaria-current · Location
Use it well
Keep the directory clear of the butterfly and project content. The isolated preview lets you select chapters without scrolling the documentation.
Keyboard, touch & reduced motion
Retain visible names when the menu is expanded on touch screens. Closing the menu never resets the current chapter.
Implementation reference
moon-opening.js / index toggle · motion.js / chapter-railPurpose
Butterfly guide
The butterfly links to the next chapter and moves along the page as the reader scrolls.
Anatomy / What it is made of
- 01 · Wing layers
- Left and right wings move around a stable body.
- 02 · Reserved route
- Movement stays in a gutter away from text and directory targets.
- 03 · Destination label
- The accessible label names the next chapter; the last chapter leads back to the start.
| State | Trigger | Response |
|---|---|---|
| Perched | Scroll settles | Settle into a quieter wing pose. |
| Travelling | Progress changes | Move toward the next position and turn slightly with the travel. |
| Activated | Click or keyboard activation | Continue to the next chapter and update the destination label. |
4 · Chapter positionsTransform · RouteNext → start · Loop
Use it well
Use the butterfly as a secondary route; the directory remains available for direct navigation. Keep explanatory copy outside its flight path.
Keyboard, touch & reduced motion
Reduced motion fixes the guide in a stable position and stops wing movement. The next-chapter action remains usable.
Implementation reference
motion.js / pathAt + butterfly · motion.cssPurpose
Ambient response
Use light, ripples and subtle movement to add detail to the scene. Essential information remains in the page content.
Anatomy / What it is made of
- 01 · Base material
- Water and surface imagery remain visible when effects are disabled.
- 02 · Local response
- A glint or ripple responds near the pointer rather than across the whole page.
- 03 · Motion preference
- One setting controls animation; decorative layers do not intercept clicks.
| State | Trigger | Response |
|---|---|---|
| Idle | No interaction | Keep the scene calm. |
| Responding | Pointer movement or explicit action | Play a bounded response and remove its temporary layer afterwards. |
| Reduced | System or user preference | Keep the material image and functional controls. |
350 ms · Ripple rate limitpointer-events: noneBounded lifetime · Cleanup
Use it well
The specimen isolates a short ripple. The homepage combines water, cloth, petals, boat movement and lighting; inspect the full composition only after its parts.
Keyboard, touch & reduced motion
Stop optional motion when requested. Sound requires a user gesture; it is never required for understanding or navigation.
Implementation reference
motion.js / water-ring · petal-fall.js · window-storm.js · boat-motion.jsSee the components together / Original homepage
The full composition combines the components above. Load it only when you want to compare the complete experience.
Curtain entrance
Click the curtain or scroll down to enter. The scene opens into the river before moving back toward the window.
Starts only when you choose to explore.
The preview is ready to load.
Interaction design / Reading preferences
Appearance and language
Choose light or dark mode, and switch between English and Chinese.
04 / Reading preferencesInteractive demo
Appearance
Change your display mode
The page colors change gradually with the watch’s movement, keeping your reading position.
Dark mode01 / Watch enters02 / Colors transition03 / Resume reading
Change languageEnglish ↔ 简体中文
The portfolio opens in dark mode and remembers your choice. Reset preferences restores dark mode and the browser’s preferred language.
Purpose
Floral pocket-watch transition
The watch’s movement connects light and dark modes through a gradual color change. Its floral cover and gold case echo the homepage garden and artwork frames.
Anatomy / What it is made of
- 01 · Appearance control
- The demo button and appearance menus across the portfolio use the same transition, including the homepage and project pages.
- 02 · Watch and movement
- The watch asset was adapted from the reference photograph using AI. It swings closer, gradually slows down, and fades out.
- 03 · Color transition
- A soft boundary follows the watch’s first swing. The new palette continues to spread as the watch swings back, with text and images visible throughout.
| State | Trigger | Response |
|---|---|---|
| Ready | Before activation | The appearance control is available; the watch is hidden. |
| Swinging | Click, Enter or Space | The watch swings closer as the page colors change, then fades out. |
| Finished or skipped | End of motion, Escape or Skip | The selected appearance stays in place. The watch disappears and focus returns to the control. |
3.4 s · Animation duration94 vh · Desktop heightFirst sweep · Synchronized colors
Use it well
The animation plays when a visitor changes appearance. The first visit uses dark mode; later visits keep the saved choice, independently of system appearance.
Keyboard, touch & reduced motion
Select Skip animation or press Escape to finish immediately. Reduced motion disables the animation. If the browser cannot show the transition, it uses a color fade or changes appearance directly.
Implementation reference
reading-objects.js / change · reading-objects.css / .reading-clock-overlay · assets/reading-objects/floral-pocket-watch-v1.pngPurpose
Language plaque
The plaque switches between English and Chinese. Its turn confirms the change while keeping the current appearance.
Anatomy / What it is made of
- 01 · Brass plate
- The brass finish and rivets match the watch’s metal details.
- 02 · Language labels
- EN and 中 show the current language. Screen readers announce the language the button will switch to.
- 03 · Reading position
- The text updates in place, keeping the reader near the same content.
| State | Trigger | Response |
|---|---|---|
| English | English resolved | EN faces forward. Select it to switch to Chinese. |
| Chinese | Chinese resolved | 中 faces forward. Select it to switch to English. |
| Turning | Select the plaque | The plaque turns 180° and the page text updates. |
180° · Two-sided turn520 ms · Turn duration82 × 48 px · Button
Use it well
Keep the language labels visible. Follow system uses the browser’s preferred language.
Keyboard, touch & reduced motion
Use Enter or Space to activate the button. Reduced motion changes the language without a turn. Text wraps to fit the selected language.
Implementation reference
reading-objects.js / plaque · reading-objects.css / .reading-plaque · site-preferences.js / readingAnchor07 / Website playground
Try the components.
Switch website width, component state and accent colour. Settings affect only the preview; mobile shows the website’s narrow layout.
Project introduction · Moonlit · Desktop website
08 / In use & guidelines
Using the components.
Portfolio websiteProject entries and reading pathsView selected work ↗02 / NExOColor, typography, materials and applicationsView project design guidelines ↗01 / FellouAIIdentity, release visuals and campaign rulesView project design guidelines ↗06 / The Stone RosesConfiguration, surfaces and task viewsView project design guidelines ↗03 / Solitude FrogIllustration, printed guide and mobile rulesView project design guidelines ↗05 / Ms. TomatoCharacter, lighting and interaction statesView project design guidelines ↗04 / Mood TrackerColor meanings, typography and application rulesView project design guidelines ↗
01 / Load the foundations
Load design tokens and component styles. Wrap the page content in .nz-scope. Moonlit is the default accent.
<link rel="stylesheet" href="portfolio-tokens.css?v=850109dd80e3">
<link rel="stylesheet" href="portfolio-components.css?v=e1ba7cdd7cf4">
<main class="nz-scope" data-nz-theme="default">
<!-- 粘贴组件代码 -->
</main>02 / Composition and interaction
Shared controls include copyable HTML. Signature studies link to their source files and live scenes. Image dialogs use the initializer; disclosures use native browser behavior.
<script type="module">
import { initPortfolioComponents }
from './portfolio-components.js';
initPortfolioComponents();
</script>03 / Add toast feedback
The kit includes toast styles, a standalone module and a working example. Load the tokens and these files, then connect the trigger to a real action.
<link rel="stylesheet" href="portfolio-toast.css?v=991953e2c449">
<script type="module">
import { createToastRegion } from './portfolio-toast.js';
const feedback = createToastRegion();
// 在实际操作完成后调用：
feedback.show({ type: 'success', title: '代码已复制' });
// 异步操作：show({ type: 'loading', ... }) 返回 id，
// 完成后调用 feedback.update(id, { type: 'success', ... })。
</script>Where the library is used
The homepage links to this library. Typography is shared across the site, and the copy-link demo uses the toast component included in the kit. Project pages also use their own layouts and scripts. The kit contains web components; native Figma components are not included.
Reference notes
Arbor ↗: a progression from foundations to components and page patterns.
Radix Themes ↗: theme switching and side-by-side states.
Sonner ↗: working demos and clear behaviour notes. The visuals and examples follow this portfolio.