IYU Labs / Design / 00
The IYU Labs field guide.
A working reference for the people who build with this identity. Explore the actual colors and components, then try the details for yourself.
Brand
The approved mark and how to use it.
Color
Two themes, with each color given a job.
Type
The families, the scale, and room to read.
Components
The same interface pieces used on this site.
Motion
A little movement, with a clear purpose.
Find a pattern
Each entry leads to its live specimen or usage reference. Source paths identify the implementation shared with the website.
26 references
- Brand
Approved artwork
Master, monochrome variants and SVG downloads.
src/components/brand/Mark.tsx - Brand
Logo size and clear space
Minimum height, proportions and background rules.
src/components/brand/mark.json - Brand
LABS lockup
Live wordmark and accessible naming.
src/components/brand/Logo.tsx - Brand
Social images and icons
Generic and project cards, downloads and preview crops.
src/app/opengraph-image.tsx - Brand
Stationary mark with orbit
Complete decorative rings on Home and About.
src/components/brand/BrandOrbit.tsx - Color
Semantic themes and contrast
Live color pairs and independent specimen themes.
src/design/tokens.json - Color
Theme persistence and aliases
Pre-paint choice, storage and legacy utility mappings.
src/app/layout.tsx - Type
Editable scale and hierarchy
Responsive headings, body copy and weights.
src/components/design/TypeExplorer.tsx - Type
Layout and spacing
Page widths, chapter composition, spacing and reflow.
src/components/layout/Container.tsx - Type
Fonts and comparison
Self-hosted Manrope, comparison fonts and image-renderer licenses.
src/app/layout.tsx - Components
Buttons and links
Primary, outline, disabled, internal and external actions.
src/components/ui/Button.tsx - Components
Disclosure states
Keyboard toggles, rapid reversal and inert closed content.
src/components/ui/Disclosure.tsx - Components
Fields and contact states
Local validation specimen and real contact delivery conditions.
src/components/ui/Field.tsx - Components
Project status
Live, client, source-available and in-development labels.
src/components/work/StatusBadge.tsx - Components
Project cards
Actual screenshot and text-only cards with one navigation target.
src/components/work/ProjectList.tsx - Components
Image galleries and fallbacks
Proportionate captures, captions and honest missing-image states.
src/components/work/ProjectGallery.tsx - Components
Header, footer and themes
Live page chrome, active location, menu focus and theme choice.
src/components/layout/Header.tsx - Components
Fixed chapter navigator
Live embedded Home viewport with native section links.
src/components/home/ChapterNavigation.tsx - Components
Page compositions and recovery
Centered introductions, service split, work, studio and contact sections.
src/components/home/Hero.tsx - Components
Documentation tools
Preview/Code tabs, isolated themes, copying and chapter navigation.
src/components/design/DemoPanel.tsx - Motion
Before and after reveal
Blue matched-image divider, endpoints, replay and interruption.
src/components/work/BeforeAfter.tsx - Motion
Route and section navigation
Forward top, restored history and snapshot-free fragment scrolling.
src/components/layout/SiteLink.tsx - Motion
Arrival tuning
Timing, easing, comparison, pause, replay and settings transfer.
src/components/design/MotionPlayground.tsx - Motion
Product stage
Opaque image planes, selection, geometry controls and JSON transfer.
src/components/home/Showcase.tsx - Motion
Continuous studio rings
Additive entrance over uninterrupted idle, zero speed and tuning.
src/components/brand/BrandOrbit.tsx - Motion
Reduced motion and lifecycle
Offscreen suspension, hidden tabs and complete still states.
src/app/facelift.css
For developers and agents
Start with the reference, use the exported tokens, and reuse the shared components. Experiments in these pages stay inside their specimens.