App design system

This design system follows the current Flutter theme and device captures. It packages light and dark color roles, typography, dimensions, components, and motion for product design, engineering, and AI-assisted work.

FLUTTER · MATERIAL 3 · LIGHT / DARK

GuppyCubed App

A clear native interface for work in the field. Brand red is reserved for primary actions and selection, while neutral surfaces, visible borders, and touch-safe dimensions keep the product dependable.

Best fit: Sign-in, assistant, knowledge, recording, collaboration, and settings.
Watch out: Do not flood backgrounds with brand red or import web-hero typography into native hierarchy.

Token snapshot

The identity-bearing decisions, rendered.

#C3102Eapp.color.primaryPrimary action

#F5F6F8app.color.backgroundPage background

#FFFFFFapp.color.surfaceCards and controls

14pxapp.radius.controlInputs and buttons

52pxapp.control.primaryPrimary-button height

100–280msapp.motion.rangeControls and overlays

Color roles

Keep each color inside its documented product role.

Light semantic colors

Gray-white backgrounds and white surfaces establish hierarchy; brand red is reserved for action and selection.

Primary#C3102EPrimary buttons, focus, selection

Primary deep#A20D27Text actions and active states

Background#F5F6F8Scaffold background

Surface#FFFFFFCards, fields, and overlays

Surface alt#EFF1F4Secondary sections and selected fills

Text#202124Primary text

Muted text#626975Supporting information

Border#E5E7EBDividers and component boundaries

Dark semantic colors

Dark mode preserves the same roles instead of applying a simple inversion.

Background#101216Scaffold background

Surface#191C22Cards and controls

Surface alt#242831Secondary sections

Text#F3F4F6Primary text

Muted text#B0B6C1Supporting information

Border#373E4ADividers and component boundaries

Danger#FF7A8EDark-mode errors and risk

Typography

Type roles follow product density instead of decoration.

Display / headline28 / 36 · 700

Page and major-state headings

Title large22 / 30 · 600

App bars and dialogs

Title medium17 / 24 · 600

Cards and list titles

Body16 / 24–25 · 400

Primary reading and form content

Metadata13 / 18–19 · 400–500

Time, source, and supporting copy

Layout, shape, and motion

A compact foundation for consistent implementation.

Spacing4 / 8 / 12 / 16 / 24 / 32 / 48 / 64

All padding, gaps, and section spacing.

Accessibility4.5:1 · 44 × 44

Normal-text contrast and minimum touch target.

Focus3px visible ring

Keyboard focus never relies on color alone.

Radius12 / 14 / 16 / 24

Text actions, controls, cards, dialogs and sheets.

ElevationBorder first

Ordinary surfaces stay flat; floating layers establish depth.

Motion100–280ms

Transition transform, opacity, and color only.

Components worth studying

The patterns that make the system recognizable in use.

01
Top app bar: zero elevation and a quiet surface after scrolling.
02
Filled button: 52px high, 14px radius, brand-red fill with white text.
03
Input: 16px padding, 14px radius, brand-red focus border.
04
Card: 16px radius and 1px border; ordinary hierarchy does not rely on shadow.
05
Dialog and sheet: 24px radius with focus returned to the invoking control.

Product previews

Real captures show how tokens behave in context.

Sign in

Assistant

Knowledge

Collaboration

Dark mode

The file, before you copy it

Copy this platform design.md into an AI coding tool as styling context.

---
system: GuppyCubed App
owner: GuppyCubed
platform: app
verified_at: 2026-09-22
method: restated-from-current-product-theme-and-captures
---

# GuppyCubed App — Design Style Reference

## Summary

A clear native interface for work in the field. Brand red is reserved for primary actions and selection, while neutral surfaces, visible borders, and touch-safe dimensions keep the product dependable.

## Color tokens

### Light semantic colors

| Token | Value | Role |
| --- | --- | --- |
| Primary | `#C3102E` | Primary buttons, focus, selection |
| Primary deep | `#A20D27` | Text actions and active states |
| Background | `#F5F6F8` | Scaffold background |
| Surface | `#FFFFFF` | Cards, fields, and overlays |
| Surface alt | `#EFF1F4` | Secondary sections and selected fills |
| Text | `#202124` | Primary text |
| Muted text | `#626975` | Supporting information |
| Border | `#E5E7EB` | Dividers and component boundaries |

### Dark semantic colors

| Token | Value | Role |
| --- | --- | --- |
| Background | `#101216` | Scaffold background |
| Surface | `#191C22` | Cards and controls |
| Surface alt | `#242831` | Secondary sections |
| Text | `#F3F4F6` | Primary text |
| Muted text | `#B0B6C1` | Supporting information |
| Border | `#373E4A` | Dividers and component boundaries |
| Danger | `#FF7A8E` | Dark-mode errors and risk |

## Typography

| Role | Size / line / weight | Use |
| --- | --- | --- |
| Display / headline | `28 / 36 · 700` | Page and major-state headings |
| Title large | `22 / 30 · 600` | App bars and dialogs |
| Title medium | `17 / 24 · 600` | Cards and list titles |
| Body | `16 / 24–25 · 400` | Primary reading and form content |
| Metadata | `13 / 18–19 · 400–500` | Time, source, and supporting copy |

## Layout, shape, and motion

| Token | Value | Rule |
| --- | --- | --- |
| Spacing | `4 / 8 / 12 / 16 / 24 / 32 / 48 / 64` | All padding, gaps, and section spacing. |
| Accessibility | `4.5:1 · 44 × 44` | Normal-text contrast and minimum touch target. |
| Focus | `3px visible ring` | Keyboard focus never relies on color alone. |
| Radius | `12 / 14 / 16 / 24` | Text actions, controls, cards, dialogs and sheets. |
| Elevation | `Border first` | Ordinary surfaces stay flat; floating layers establish depth. |
| Motion | `100–280ms` | Transition transform, opacity, and color only. |

## Component rules

- Top app bar: zero elevation and a quiet surface after scrolling.
- Filled button: 52px high, 14px radius, brand-red fill with white text.
- Input: 16px padding, 14px radius, brand-red focus border.
- Card: 16px radius and 1px border; ordinary hierarchy does not rely on shadow.
- Dialog and sheet: 24px radius with focus returned to the invoking control.

## Product previews

### Sign in

[![Sign in](https://docs.guppycubed.com/en/img/guides/mobile/login.png)](https://docs.guppycubed.com/en/img/guides/mobile/login.png)

### Assistant

[![Assistant](https://docs.guppycubed.com/en/img/guides/mobile/assistant.png)](https://docs.guppycubed.com/en/img/guides/mobile/assistant.png)

### Knowledge

[![Knowledge](https://docs.guppycubed.com/en/img/guides/mobile/knowledge.png)](https://docs.guppycubed.com/en/img/guides/mobile/knowledge.png)

### Collaboration

[![Collaboration](https://docs.guppycubed.com/en/img/guides/mobile/collaboration.png)](https://docs.guppycubed.com/en/img/guides/mobile/collaboration.png)

### Dark mode

[![Dark mode](https://docs.guppycubed.com/en/img/design-language/captures/mobile-native-my-dark.png)](https://docs.guppycubed.com/en/img/design-language/captures/mobile-native-my-dark.png)


## Do's

- Choose colors by semantic role, not by screen location.
- Keep every primary action at least 44 by 44px.
- Use the same hierarchy and state names in light and dark themes.

## Don'ts

- Do not use brand red as a large page background.
- Do not replace borders and surface hierarchy with shadows.
- Do not communicate errors, completion, or selection with color alone.

---

_Generated from the current GuppyCubed public design-language reference._

Reviewed the current interface on 2026-09-16. Organization workspaces use five entries:

Assistant
Knowledge
Recording
Collaboration
Me

Recording is the central bottom action. Chat, tasks, and contacts are integrated into Collaboration. A personal identity enters the Impact Center instead of using the same tabs.

The brand name is GuppyCubed, and interface copy follows the app language. Primary color, dark mode, forms, keyboards, large text, and bottom sheets follow the current app interface and acceptance states.

The complete set of 115 Mobile captures, categories, dates, and dimensions is available under Implementation captures and acceptance sources.