# Atsly native handoff reference

This kit accompanies the interactive atomic library at /design-system/atsly.

## Component coverage

The library documents 60 component, foundation and motion entries, with 62 populated product screens presented separately. The kit provides platform-specific implementation references, shared tokens, typography and motion guidance.

## Android

AtslyComponents.kt targets Kotlin, Jetpack Compose and Material 3. Add the current stable Compose BOM, Material 3, foundation and material-icons-extended to an Android Studio project. Wrap content in AtslyTheme. Hoist state to your ViewModel and provide real callbacks, translations, repositories and navigation. Example callbacks intentionally do no persistence or network work. Status bars and gesture navigation belong to the OS. Use safeDrawingPadding and test keyboard insets.

## iOS

AtslyComponents.swift targets SwiftUI on iOS 17+. Add it to an Xcode project. Native text styles participate in Dynamic Type. Present sheet content using .sheet and dialogs using a sheet or accessible presentation with focus management and dismissal. State belongs to the host app. Bindings using .constant are preview examples only; replace them with real state.

## Assets and fidelity

Supply the original Atsly wordmark, approved Google and LinkedIn logos, onboarding illustrations (bento-linkedin, bento-manual, bento-upload) and matching icon SVGs in native resource/asset catalogs. Platform icon equivalents are shown in the reference; they are not pixel-identical copies. Android bento rendering deliberately uses an icon fallback until asset resources are connected. Use the interactive library to review component variants. Native files are compositional implementation references, not a finished application or SDK.

## Interaction contract

Default, hover, pressed, focus, disabled, loading and error states are documented where applicable. Hover only applies to pointer devices; never make touch actions depend on it. Native controls own keyboard focus, press feedback and semantics. Keep Android targets at least 48dp and iOS targets at least 44pt, separate from the smaller visual marks. Preserve design fills and add padding to enlarge touch areas. Do not nest interactive children inside another control.

## Responsive and accessibility review

Recommended implementation scale 4/8/12/16/24/32. Use 16 page gutters, a single column under 600 logical units, a centered column at 600–839 and an optional two-pane layout at 840+. Do not fix text-containing heights. Stack actions at large text sizes. Test 320-wide layouts, tablet split-screen, landscape, keyboard, 200% font scaling, VoiceOver, TalkBack, hardware focus, reduced motion and long translations. Score values require text labels and must not imply hiring outcomes. Missing score is distinct from zero.

## Validation status

The web library is checked in the portfolio build and browser. These native reference files have not been compiled or tested in Android Studio or Xcode in this Windows workspace. Do not describe them as a compiled production package. Before release, integrate app state, assets, authentication, export, persistence, accessibility focus and device-specific UI tests.

## Typography contract

See typography.json for all eleven roles, including size, line height, weight, family category, tracking, usage and iOS relative text style. The web preview distinguishes Display, Body and Caption groups. The native reference uses AtslyType TextStyle tokens on Compose and ScaledMetric with relative text styles on SwiftUI. All type tokens are an explicit implementation contract extending the recoverable PDF sizes. Use exact licensed font assets when those are available; do not claim the fallback families are identified source fonts.

## Mobile component fidelity

Product previews use a mobile canvas with a default maximum width of 390 logical pixels and controls for 320/390/430. The desktop documentation shell must not stretch components to desktop widths. Foundation reference boards remain documentation views.

Organisms.pdf page 1 provides a 390-wide resume card with 52-wide score gauges and 33-high action surfaces. Its title, role and metadata use 15/13/12 source sizes. The web preview retains three actions at 360 and above and uses two secondary actions above a full-width primary action below 360. Action labels remain 13 and gauge labels remain 12 for readable interactive previews. iOS hit areas are at least 44pt and Android at least 48dp, independent of the compact painted surface. Native card references include this distinction and adapt to large text.

The preview also preserves the source country-selector hierarchy, standalone job rows without radio controls, horizontal LinkedIn cards and vertical manual/upload cards, compact and expanded bentos, stacked download-warning scores, destructive confirmation data checklist/cancel action, filter descriptions and selected rows, report fixes, profile fields and native sheet widths. Original wordmark and Google symbol vectors are cropped directly from the supplied PDF boards and included with the source assets.

Native SDK compilation and device tests remain required. The new native card/gauge examples are reference implementations, not a claim of an Android Studio or Xcode build.

## Current library structure and motion handoff

The active library contains 60 entries: Foundations, Atoms, Molecules, Organisms and Motion. Templates are removed from navigation and active inventory. Pages still contain the 62 finished screens. The component source view contains the three original component PDFs (28 pages). Older source assets are retained on disk, not presented as an active Templates section.

Typography pairs Lora Medium 500 for expressive headings with Inter 400/500/600 for body and controls. Preserve natural glyph widths and normal tracking. Register licensed Lora assets in native apps; system serif is an explicit fallback, not the target font. 

See motion-guidelines.md, motion-tokens.json and motion-reference-snippets.json for seven proposed behaviors, timing, curves, triggers, interruption, native ownership and reduced-motion requirements. These are new handoff studies for portfolio iteration, not evidence of shipped or research-validated behavior. Snippets are integration fragments and remain SDK-uncompiled.

## Heading and body pairing

Lora Medium 500 is the heading serif, matching the Lora font loaded by the Atsly prototype. Inter remains the body/control sans. This supersedes the earlier single-sans note. Both render at natural widths with normal tracking. Bundle/register licensed Lora font files for native parity: Android heading role examples currently use FontFamily.Serif as an explicit fallback; iOS uses system serif as a fallback and should use the registered Lora-Medium custom font.