Overview
Use a native iOS marketing language: white space, system type, a blue product object, cropped phone mockups, and simple support diagrams.
Schema
Schema is a powerful pocket-sized Postgres and MySQL database client. Designed for clarity, with human-readable formatting that makes sense at a glance — or a pinch.
5.0
6
Visits
Categories
Sections
Available Pages
Version History
Workflow Collections
Design Analysis
Schema Home design analysis
Use a native iOS marketing language: white space, system type, a blue product object, cropped phone mockups, and simple support diagrams.
Colors
Use white as the default canvas. Use blue for the app CTA and product-screen fields. Use yellow only for support or learning headers. Use iOS gray for panels and device UI.
Typography
Use system UI fonts. Titles sit around 44px with medium weight; body copy can be 24px for marketing explanations and 17px for support content.
Layout
Prefer split sections: quiet copy on one side and an oversized phone or diagram on the other. Keep navigation and footer links small and low-contrast.
Design.md
System Overview
Core identity and authoring metadata from the refto.one design model.
Pocket Database Blueprint
A minimal iOS utility design language with white space, system typography, App Store blue CTAs, oversized phone mockups, blueprint grids, and support diagrams.
Native, precise, calm, and pocket-sized, with one loud product-blue visual anchor.
Primary mode: lightmobile developer utilityui-rich
Theme
Fields outside the primary renderer remain visible here as structured fallback content.
Visual atmosphere
Summary
Native, precise, calm, and pocket-sized, with one loud product-blue visual anchor.
Density
3
Variance
3
Motion
2
Signals
iOS system type · huge cropped phone mockup · blue grid screen · yellow support grid · large black outline icons
Colors
Primitive palettes and resolved token colors for the active preview mode.
Palette colors
System White
#FFFFFF
App Blue
#007AFF
Support Yellow
#FFCC00
Ink
#000000
iOS Gray
#F2F2F7
Secondary Label
rgba(60, 60, 67, 0.60)
Usage rules
Keep most pages white and sparse.
Use blue as the product object and main CTA, not as a page tint.
Use yellow for support/documentation moments.
Token Spacing
Spacing scales rendered as tokens with a simple length specimen.
page_margin
68px
section_gap
120px
split_gap
72px
button_padding
10px 18px
panel_padding
48px
Token Radii
Corner radii tokens with a live surface sample.
button
999px
panel
24px
phone
96px
icon_panel
20px
Typography Families
Font families from the current design YAML, including fallback stacks and usage character.
Display
System UI
native, neutral, and clear
Body
System UI
legible iOS app-marketing copy
Mono
System mono
optional for database values
Typography Scale
Top-level typography scale rendered as live text specimens.
Title
44px/1.15
Title
Body large
24px/1.35
Body large
Body
17px/1.45
Body
Control
17px/1.1
Control
Footer
13px/—
Footer
Typography Line Heights
Top-level typography line-height values from the design YAML.
| Property | Value |
|---|---|
title | 1.15 |
body_large | 1.35 |
body | 1.45 |
control | 1.1 |
Typography Weights
Top-level typography weights from the design YAML.
| Property | Value |
|---|---|
title | 500 |
body | 400 |
control | 550 |
Typography Rules
Fields outside the primary renderer remain visible here as structured fallback content.
Rules
Use native system type and modest weight. · Let product mockups create scale instead of extreme headline sizing.
Borders
Border tokens with resolved values.
Subtle
1px solid rgba(60, 60, 67, 0.16)
Shadows
Shadow tokens with resolved values and shadow samples where applicable.
None
none
Borders
Resolved border token values.
| Property | Value |
|---|---|
subtle | 1px solid rgba(60, 60, 67, 0.16) |
Shadows
Resolved shadow token values.
| Property | Value |
|---|---|
none | none |
Layout Principles
Use a split hero: quiet copy on the left, oversized cropped product on the right.
Keep footer and secondary links low-contrast.
Use grid backdrops only inside product/support visuals.
Component Preview
Low-complexity component tokens rendered as design-system specimens.
Buttons app store
Base Attributes
Background
#007AFF
Text
#FFFFFF
Border
0
Radius
{tokens.radii.button}->999px
Padding
{tokens.spacing.button_padding}->10px 18px
Min height
48px
Typography
control
Cards phone stage
Feature Card
Component preview content
Base Attributes
Background
#007AFF
Text
#FFFFFF
Border
0
Radius
{tokens.radii.phone}->96px
Padding
64px
Shadow
none
Grid
rgba(255, 255, 255, 0.12)
Cards support panel
Feature Card
Component preview content
Base Attributes
Background
#F2F2F7
Text
#000000
Border
0
Radius
{tokens.radii.panel}->24px
Padding
{tokens.spacing.panel_padding}->48px
Shadow
none
Navigation minimal
OverviewFeaturesDocs
Base Attributes
Background
transparent
Text
#000000
Height
72px
Item text
rgba(60, 60, 67, 0.60)
Anti Patterns
Compact list of patterns the design system explicitly avoids.
- -No busy dashboard chrome.
- -No marketing gradients.
- -No heavy card shadows.
- -No non-native novelty type.