RideLens --- UI Design SpecificationLegacy format

RideLens is a mobile ride-recording app built around video and ride

telemetry. The launch screen introduces the product and makes the

primary next step unmistakable: Start Ride.

The screen should feel calm, premium, tactile, and easy to understand at

a glance. Keep the composition intentionally sparse. Do not add

decorative illustrations, extra cards, navigation, or secondary actions

unless explicitly requested.

### Primary content

• Brand: RideLens

• Tagline: Your ride, your data, on video.

• Primary action: Start Ride

------------------------------------------------------------------------

Build a single full-height mobile screen using the device's available

safe area.

### Top system status area

• Preserve the native operating-system status bar.

• Use dark status-bar content on the light background.

• Do not draw a fake status bar into the app content.

• Respect top safe-area insets.

### Brand block

• Horizontally centered.

• Positioned around the upper-middle portion of the screen; it should

sit well above the primary button.

• Brand name on one line: RideLens.

• Tagline centered directly beneath it.

• Keep ample negative space around the brand block.

### Primary action

• One large, circular Start Ride button.

• Center horizontally.

• Positioned in the lower portion of the screen, approximately 75% of

the usable screen height from the top, while remaining clear of the

bottom gesture area.

• Button diameter should scale with screen width. At the reference

image's 832 px width, the visible circle is approximately 400 px in

diameter; use this as a proportional reference rather than a fixed

device-independent size.

• Maintain a comfortable bottom safe-area gap.

• The button is the only app-level interactive element on this screen.

### Bottom system area

• Preserve the native home/gesture indicator.

• Do not draw a duplicate gesture bar.

• Respect the bottom safe-area inset.

### Responsive layout rules

• Use a full-screen flex or constraint-based layout, not absolute

pixel positioning for every element.

• Keep the brand block visually centered in the upper half and the

button anchored in the lower section.

• On short screens, reduce vertical gaps before reducing button tap

size.

• On large screens, retain generous whitespace and avoid stretching

the button excessively.

• Prevent overlap with status bars, camera cutouts, and

gesture-navigation areas.

------------------------------------------------------------------------

Treat these values as starting tokens and tune them against the supplied

reference image.

### Colors

------------------------------------------------------------------------

Token Suggested value Usage

------------------------ ----------------------- -----------------------

background #F7F8F7 Main screen background

background-highlight #FFFFFF Soft upper-left light

and surface highlights

text-primary #101820 Brand name and button

label

text-secondary #646B75 Tagline

green-primary #00D875 Button's central green

green-light #8AFFC0 Button highlight

green-mid #28E889 Button body

green-deep #00B95E Button lower edge and

depth

green-outline #00D66D Thin inner rim

white-glass #FFFFFF Translucent outer rim

and reflections

------------------------------------------------------------------------

Use the green button as the dominant accent. The rest of the screen

should remain nearly neutral.

### Typography

Use the platform's modern system sans-serif unless the project already

defines a brand typeface.

• Brand name: Heavy / bold, approximately 56--64 px at the 832 px

reference width. Use a responsive size and avoid clipping.

• Tagline: Medium weight, approximately 26--30 px at the reference

width. Color text-secondary.

• Button label: Bold / semibold, approximately 28--32 px at the

reference width. Color text-primary.

• Use clean kerning and natural line height.

• Keep the tagline on one line when the device width allows. On

narrower devices, allow a graceful two-line wrap rather than

shrinking it too far.

Scale typography proportionally to device density and screen size. Do

not blindly use screenshot pixel values as dp/pt values.

------------------------------------------------------------------------

The background is an off-white, very light gray surface with subtle

diffuse lighting.

• Use a near-white base fill.

• Add a very soft radial light gradient around the center and

upper-middle area.

• Add extremely subtle gray shading near the outer edges to give the

surface depth.

• Add a faint green-tinted ambient glow around and behind the primary

button.

• Keep the effect low contrast. The screen should still read as a

clean light-mode interface.

• Avoid visible grain, patterns, illustrations, strong vignettes, or

obvious gradient bands.

If the target stack supports layered gradients, use them. Otherwise,

approximate the effect with a base color and soft blurred radial layers.

Do not use the screenshot itself as the screen background.

------------------------------------------------------------------------

The Start Ride control is the signature visual element.

### Shape and size

• Perfect circle with a 1:1 aspect ratio.

• No icon; use only the text label Start Ride.

• Keep the label centered horizontally and vertically.

• No rectangular container around the circle.

### Surface

Create a layered, glossy, tactile surface:

1. Ambient shadow: Large, soft green-tinted shadow underneath and

around the button. It should create a gentle lift without making the

button appear to float excessively.

2. Outer halo: A faint, translucent pale-green ring beyond the

button edge.

3. Outer bevel: A light glass-like rim with bright upper highlights

and subtle shaded lower edges.

4. Inner rim: A thin green outline just inside the main edge.

5. Button fill: A vivid green gradient, lighter toward the top and

slightly deeper toward the bottom.

6. Specular reflection: A soft white reflection near the upper-left

quadrant. It should look like reflected light on polished glass, not

a white sticker.

7. Depth shading: Slight dark-green shading along the lower edge to

reinforce curvature.

Suggested CSS-style construction, if using a web-based UI:

``` css

.start-ride-button {

border-radius: 50%;

aspect-ratio: 1;

border: 1px solid rgba(255, 255, 255, 0.9);

background:

radial-gradient(ellipse at 28% 20%,

rgba(255,255,255,0.78) 0%,

rgba(255,255,255,0.15) 12%,

transparent 27%),

linear-gradient(155deg,

#8affc0 0%,

#35ed91 42%,

#00c967 78%,

#00b95e 100%);

box-shadow:

0 0 0 5px rgba(255,255,255,0.55),

0 0 0 9px rgba(95,255,174,0.16),

0 18px 32px rgba(0,160,82,0.20),

0 34px 54px rgba(0,190,95,0.17),

inset 0 2px 4px rgba(255,255,255,0.9),

inset 0 -5px 9px rgba(0,105,55,0.22);

}

```

This is a visual starting point, not a requirement to use CSS. Adapt the

implementation to the app's actual framework and rendering capabilities.

Keep shadows soft and avoid jagged edges.

### Button interaction states

• Default: Glossy green appearance as described above.

• Pressed: Slightly reduce scale (approximately 0.98), reduce the

outer glow, and increase the inset/depth shading to imply physical

depression.

• Disabled: Only if required by an actual app state. Reduce

saturation and contrast, and provide a clear reason elsewhere in the

flow; do not show a disabled button on the default launch screen.

• Loading: If starting a ride requires setup, show a restrained

progress state and prevent duplicate taps. Do not invent an

arbitrary long loading animation.

• Accessibility: Maintain a sufficiently large touch target. The

visible circular button itself should be comfortably tappable.

Use a short, responsive transition for press feedback. Respect

reduced-motion preferences.

------------------------------------------------------------------------

### Start Ride

On tap:

1. Provide immediate pressed-state feedback.

2. Begin the app's ride-start flow.

3. Request camera, location, and motion/fitness permissions only when

needed, using the operating system's permission APIs and explanatory

copy.

4. If permissions are denied, show a clear, accessible explanation and

a route to the relevant settings where supported.

5. Do not claim recording has started until the app confirms it.

6. Prevent repeated taps from starting duplicate ride sessions.

The exact recording, telemetry, and permission flow should be

implemented in the appropriate feature screen or service. Keep the

launch screen focused.

------------------------------------------------------------------------

• Maintain strong contrast for the dark brand and button label against

their backgrounds.

• The tagline may be lower contrast than the brand, but it must remain

comfortably readable.

• Expose the primary action with an accessible name: Start Ride.

• Ensure the control is reachable by assistive technologies and has a

logical focus order.

• Support system font scaling where practical without clipping or

overlap.

• Do not communicate state through color alone.

• Respect reduced-motion settings.

• Do not rely on the glossy highlights to define the button boundary;

its shape must remain clear against the background.

------------------------------------------------------------------------

Before writing code:

1. Inspect the repository and identify the existing framework, routing,

design system, and app entry point.

2. Reuse the existing architecture and dependencies where practical.

3. Build this screen as a reusable, well-named component, for example

RideLensLaunchScreen.

4. Keep visual tokens centralized instead of scattering color and

spacing literals.

5. Use native layout and safe-area APIs for the target platform.

6. Do not add dependencies solely to reproduce a gradient or shadow if

the current stack can do it.

7. Do not replace unrelated screens, rewrite project configuration, or

change established navigation behavior.

8. If the repository already contains a RideLens splash or launch

screen, update that implementation rather than creating a competing

duplicate.

9. If the repository is empty, establish only the minimum structure

needed for the detected or requested stack. Do not assume a

framework without inspecting the project.

### Suggested component structure

• RideLensLaunchScreen

• BrandBlock

• BrandTitle

• Tagline

• StartRideButton

The structure may be simplified if the framework or existing codebase

favors a different approach.

### Code quality

• Keep the layout responsive.

• Avoid hard-coded screen coordinates.

• Avoid using a raster screenshot as the complete UI.

• Keep text selectable only where it makes sense for the platform.

• Add a brief comment for any non-obvious layered shadow or gradient.

• Run the available formatter, linter, and relevant tests after

implementation.

------------------------------------------------------------------------

The implementation is ready for review when all of the following are

true:

• [ ] The screen uses a clean, light off-white background.

• [ ] The native status bar and bottom system navigation area remain

visible and unobstructed.

• [ ] RideLens is bold, centered, and visually dominant.

• [ ] Your ride, your data, on video. appears centered beneath the

title in muted gray.

• [ ] One large circular glossy green Start Ride button occupies the

lower portion of the screen.

• [ ] The button has a subtle glass rim, upper-left reflection, inner

edge, and soft green ambient shadow.

• [ ] The layout adapts to different phone sizes and safe areas.

• [ ] The button provides clear press feedback and starts the real

ride flow without duplicate sessions.

• [ ] Text and controls remain accessible with system text scaling and

assistive technologies.

• [ ] No unrequested illustrations, cards, extra buttons, or

navigation have been added.

• [ ] Existing unrelated app functionality remains unchanged.

------------------------------------------------------------------------

Treat the supplied RideLens Minimal Launch Screen.png as the visual

source of truth for this screen.

Preserve these defining characteristics:

• Extremely minimal composition.

• Light, softly illuminated background.

• Large, dark RideLens wordmark in the upper-middle area.

• Muted gray tagline immediately below the wordmark.

• Oversized glossy green circular Start Ride button in the lower area.

• Generous negative space.

• No decorative background illustration.

The goal is to reproduce the design's visual character while building a

real, responsive, accessible interface---not to embed the screenshot as

a static image.