Clarity earns attention.
Make the purpose obvious before adding personality. Hierarchy, labels and actions must remain understandable.
POZAN / DESIGN LANGUAGE
A system for ideas
made real.
A shared language for designing and building POZAN experiences—across portfolio stories, interfaces, motion and code.
- VERSION
- 02.0
- FOUNDATIONS
- 07
- COMPONENTS
- 07
- PATTERNS
- 04
Principles before pixels.
Four principles guide every decision. They are practical filters for what belongs in the system and what does not.
Motion explains change.
Movement should reveal hierarchy, continuity or spatial relationships. Every animation needs a reason.
Craft serves the work.
Visual character supports the project story. The portfolio evidence remains the main subject.
Build for real use.
Responsive behavior, keyboard access and implementation constraints are part of the design from the start.
From atom to experience.
The system is layered so a decision made once can travel consistently from a token to a complete story.
Foundations
Color, type, space, shape, motion and access.
Components
Reusable controls and content structures.
Patterns
Components combined to solve recurring needs.
Experiences
Portfolio, case studies and visual narratives.
Color carries hierarchy.
Neutral surfaces create focus. Signal lime marks action and system state. Blue and violet are controlled accents, never simultaneous decoration.
TokenValueRolePreview
--pozan-black#0B0B0DPage background
--pozan-surface#111114Raised regions
--pozan-surface-2#18181CInteractive hover
--pozan-white#FAFAFAPrimary content
--pozan-gray-300#B8B8BFSupporting content
--pozan-gray-700#34343AStructure
--pozan-lime#C7FF3DPrimary action
--pozan-blue#5B7CFFInformation
--pozan-violet#9B7BFFVisual Lab only
Use signal color with purpose
Reserve lime for selected state, focus, progress and the primary action.
Avoid accent competition
Do not place lime, blue and violet in the same composition.
color: var(--pozan-white);
background: var(--pozan-black);
border-color: var(--pozan-gray-700);
accent-color: var(--pozan-lime);Type tells the story.
Manrope carries expressive narrative and readable body copy. DM Mono exposes the system underneath through labels, data and controls.
DISPLAY / MANROPE 800Make ideas
tangible.64–144px / 0.95 line height
tangible.64–144px / 0.95 line height
BODY / MANROPE 400
Design makes the solution clear. Engineering makes it work. Motion gives it character.
16–20px / 1.8 line heightMETA / DM MONO 400
DESIGN / CODE / MOTION / SYSTEMS11–13px / uppercase optionalCreate decisive hierarchy
Use one dominant statement per viewport and let supporting text stay quiet.
Avoid decorative metadata
Mono labels must provide context, status or navigation—not visual noise.
A grid with room to breathe.
The grid creates alignment without making every composition symmetrical. Editorial tension comes from deliberate column spans and whitespace.
010203040506070809101112
12 / 8 / 4Desktop / tablet / mobile columns
24PXConsistent column gap
1360PXMaximum content width
20–80PXResponsive page gutter
Spacing scale
4
8
12
16
24
32
48
64
96
128
160
Precision over softness.
Small radii keep the interface exact. Depth comes from borders, contrast and spatial layering rather than heavy glass effects.
Elevation rule
Prefer a one-pixel border and surface contrast. Add shadow only when an overlay must clearly separate from the page.
Motion makes continuity visible.
Use motion to connect cause and effect, establish depth and preserve context. Scroll choreography keeps its authored timing; interface motion uses shared tokens.
--motion-fast160msHover and pressed feedback
--motion-base280msState changes and small reveals
--motion-slow480msLayout and object movement
--motion-reveal700msLarge editorial entrances
Animate compositor properties
Prefer transform and opacity to preserve scroll performance.
No motion without meaning
Avoid bounce, perpetual ornament and pinned scenes that add no narrative value.
transition: transform var(--motion-base) var(--ease-out);
@media (prefers-reduced-motion: reduce) {
transition: none;
}Access is a system property.
Accessibility is designed into tokens, states, motion and component behavior—not applied as a final audit.
Contrast
Primary body copy maintains clear contrast on dark surfaces. Gray 500 is reserved for nonessential metadata.
Focus
Every interactive element receives a visible two-pixel signal ring with offset.
Targets
Controls use a minimum 44px target on touch surfaces.
Motion
Reduced motion removes the intro, 3D canvas and nonessential transitions.
Icons clarify, never decorate.
Lucide provides the shared icon language. Consistent stroke, optical size and accessible labeling keep symbols readable across editorial and product contexts.
Pair unfamiliar icons with labels
A symbol may support a label, but must not force visitors to guess an important action.
Avoid mixed icon styles
Do not combine filled, outlined and hand-drawn icon families in one interface.
<ArrowUpRight aria-hidden="true" />
<span>Open project</span>Tag
Tags classify content. They are compact, neutral and readable without interaction.
UI/UX DESIGNDEVELOPMENTCREATIVE TECHNOLOGY2026
<Tag>Creative Technology</Tag>Meta link
Meta links move between destinations while keeping a quiet place in the hierarchy.
<MetaLink href="/#contact">Let's talk</MetaLink>Project card
The project card is the core evidence component. Image leads; title, role and direct actions make the work easy to assess.
05 / FINTECH LANDING PAGE2026UI/UX + Creative Dev / 2026
Orbits DeFi
Cánh cửa trực quan bước vào tài chính phi tập trung.
- Phạm vi
- Fintech landing page
- Đầu ra
- UI · Motion · Responsive build
- Trọng tâm
- Narrative · Tin cậy · Chuyển đổi
VAI TRÒ
Thiết kế UI, motion direction và phát triển landing page.
KẾT QUẢ
Landing page đậm chất công nghệ với hệ màu tối, ánh sáng và nhịp chuyển động tập trung vào chuyển đổi.
UI/UXCREATIVE DEVFRAMERMOTION SYSTEMRESPONSIVE UI
01 PROJECT IMAGE02 CATEGORY + YEAR03 ROLE04 LIVE + CASE ACTIONS
Case dialog
A focused reading surface for deeper project context without losing the collection position.
PROJECT TYPE / YEAR
Project title
Problem → Role → Process → Outcome
Preserve focus
Trap focus while open and restore it to the trigger on close.
Support familiar dismissal
Escape and an explicit Close control are both required.
Form controls
Fields make the expected input, current state and recovery path visible. Labels remain present after a value is entered.
01 PERSISTENT LABEL02 INPUT03 HELP OR ERROR04 VISIBLE FOCUS
<label>
<span>Project email</span>
<input type="email" aria-describedby="email-help" />
<small id="email-help">Used only to reply.</small>
</label>Feedback messages
Feedback identifies what happened, what it affects and what the visitor can do next. Color reinforces meaning but never carries it alone.
Project saved
Your latest changes are ready to review.
Preview mode
These changes are visible only to you.
Motion reduced
Nonessential animation follows your device setting.
Upload failed
Check the file type and try again.
Announce state changes
Use an appropriate live region for asynchronous feedback, without repeating messages already connected to a field.
Scroll storytelling
Build a sequence of clear chapters. Each scroll scene advances the argument instead of simply adding spectacle.
Narrative rule
Every pinned or scrubbed sequence must answer: what does the viewer understand after this movement that they did not understand before?
Case study structure
Every project uses the same evidence model so recruiters and clients can compare work without decoding a new layout.
Problem
What needed to change?
Role
What did Pozan own?
Process
How was the solution shaped?
Outcome
What exists now?
Localization
Vietnamese and English express the same intent while allowing natural phrasing in each language.
VI
Từ ý tưởng đến trải nghiệm số chạy thật.
EN
From idea to a digital experience that works.
Avoid literal word-by-word translation
Translate meaning, rhythm and user intent. Recheck layout after every language change.
Responsive behavior
Layouts adapt by priority. Content order stays meaningful even when composition changes.
DESKTOP / 12≥ 1025px
TABLET / 8701–1024px
MOBILE / 4≤ 700px
Confident, precise, human.
The voice shows technical ability without hiding behind jargon. It is direct enough for a recruiter and expressive enough for a creative collaborator.
Lead with what was made and why it matters.
Name the role, process and implemented outcome.
Show exploration without overstating expertise.
One idea per sentence. Remove filler before removing personality.
Interface copy moves people.
Labels should predict the result of an action and remain understandable outside the surrounding visual.
View selected work
Names the content the visitor will reach.
Click here
Requires context and says nothing about the destination.
The system, ready to use.
Portable source files turn guidance into a practical starting point. Each resource mirrors the documented production values.
TOKENS / WEB
CSS custom properties
Color, type, spacing, radius and motion variables for implementation.
CSS / DOWNLOAD TOKENS / PORTABLEDesign token source
A tool-neutral JSON token set following the Design Tokens format.
JSON / DOWNLOAD QUALITY / ACCESSAccessibility checklist
Keyboard, structure, media, visual and responsive verification.
MD / DOWNLOAD@import url('/design-system/pozan-tokens.css');
.component {
color: var(--pozan-white);
background: var(--pozan-surface);
}Templates for consistent decisions.
Start from a shared structure, then adapt it to the evidence and constraints of the work. Templates are prompts, not mandatory filler.
DOCUMENTATION
Component spec
Purpose, anatomy, states, behavior, content rules and acceptance criteria.
MD / DOWNLOAD STORYTELLINGCase study outline
A concise evidence-led structure from context through learning.
MD / DOWNLOADKeep empty sections out
A template creates consistency, but unsupported sections should be removed rather than filled with vague copy.
A living system, with rules.
Components move through visible maturity states. A new pattern earns system status only after it solves a recurring need and passes quality checks.
ComponentStatusPurpose
Primary and secondary actions
Discipline and metadata labels
Navigation and external links
Featured work and archive variants
Accessible project detail overlay
Label, help, validation and disabled states
Info, success, warning and error communication
Scroll-linked narrative composition
01PROPOSE
02TEST
03DOCUMENT
04ADOPT
05REVIEW
Ready means verified.
A component is ready when design intent, code behavior and accessibility agree across supported viewports.
Uses shared tokens instead of one-off values
Includes default, hover, focus, active and disabled states
Works with keyboard and screen reader semantics
Respects reduced motion
Verified at 375, 768, 1024 and 1440px
Documented with purpose, anatomy and usage guidance