Official Brand Guidelines

Skinmap™
Brand Guide

Resources, rules, and assets for anyone creating content on behalf of Skinmap — including team members, partners, and AI agents.

Last Updated: August 2026 · v1.2 · A Triangulate Labs Product

01 — Identity

Mission & Voice

Skinmap is a total body photography platform by Triangulate Labs, using computer vision and 3D modeling to help dermatologists and patients track, detect, and monitor skin conditions over time.

Mission Statement

"To improve the world through deep computer understanding from vision." Skinmap applies Triangulate Labs' core mission specifically to dermatology — empowering clinicians with 3D body mapping to detect skin changes earlier and more accurately.

Who We Are

Skinmap is a product of Triangulate Labs, Inc. — a computer vision and machine learning company that creates 3D models to measure, detect, identify, and classify what is seen by the human eye, only quicker and more efficiently.

Brand Voice

Speak with clinical precision and technological confidence — but remain approachable and human. We're addressing serious health concerns (skin cancer detection) so the tone should be reassuring, not alarming. Lead with science and innovation.

Core Values

Precision in detection. Innovation through computer vision and AI. Patient-first design. Clinical credibility. Accessibility of advanced imaging technology. Collaboration between technology and dermatology.

Total Body Photography

Official Tagline — Always include when space allows

Tone: We Sound Like This

Clinically Precise Innovative Reassuring Evidence-Based Professional Approachable

Not Like This

Fear-Mongering Overly Casual Hyperbolic / Salesy Vague / Non-Technical Making Diagnostic Claims

02 — Logo

Logo Usage

The Skinmap logo features a 3D wireframe torso with green mapping dots, enclosed in a circular arrow that transitions from navy blue to green — representing the continuous cycle of monitoring and detection. The wordmark uses Futura in dark navy, with "Total Body Photography" set beneath as an integrated tagline.

Primary — Color

Full color logo — use in all marketing materials (printed and digital)

On White Background

Logo on white background — use on lighter marketing materials

Icon Only

Icon-only for small spaces (favicons, app icons)

On Dark Background

Colour logo for dark backgrounds — the icon keeps its colour. Preferred on dark brand surfaces; use the white/reversed logo over photography.

Monochrome — Black

Single-color black — for black-and-white printing or one-color use

Monochrome — Blue

Single-color navy — for one-color use where full color isn't available

✓ Do

Use the full-color (blue) logo in all marketing materials — printed and digital
Maintain clear space around the logo equal to the height of the "S" in Skinmap
Use the full logo lockup — the "Total Body Photography" line is part of the wordmark; don't add it as separate text
Use the icon-only version for favicons, app icons, and small spaces
Use the colour-on-dark logo on dark brand surfaces; the white (reversed) logo over photography or where a single colour is required
Scale proportionally — never stretch or compress

✕ Don't

Alter the logo colors outside of approved variations
Use the black-and-white logo when color printing is available
Place the logo on busy or low-contrast backgrounds
Add drop shadows, outlines, or effects to the logo
Rotate, skew, or distort the logo in any way
Use the logo smaller than 40px in height on digital or 0.5" in print

03 — Color

Color Palette

The Skinmap palette is anchored by a deep navy that conveys medical authority, accented with greens that represent detection, health, and the mapping technology. The blue-to-green gradient is a signature element of the circular arrow in the logo.

Dark Navy

#000033 · RGB 0, 0, 51

Logo wordmark, headers, email signatures, primary text

Brand Blue

#1B2A6E · RGB 27, 42, 110

Circular arrow start, secondary headings

Mid Blue

#2E5FA1 · RGB 46, 95, 161

Gradient midpoint, links, interactive elements

Teal

#3B8686 · RGB 59, 134, 134

Gradient transition, secondary accents

Map Green

#3CB54A · RGB 60, 181, 74

Mapping dots, arrow, marketing CTA buttons, success states

Light Green

#7BC67E · RGB 123, 198, 126

Mapping dot glow, hover states, highlights

Dark Gray

#202020 · RGB 32, 32, 32

Marketing body copy (non-headers), website copy

Ice Green

#EAF6EA · RGB 234, 246, 234

Light backgrounds, cards, pills, subtle highlights

Color Proportions

Dark Navy 35% · White 25% · Mid Blue / Teal 20% · Green 15% · Dark Gray (body text) 5%

04 — Typography

Fonts & Type Scale

Our type system pairs Futura's clean geometric precision for headlines with Century Gothic's readability for body text. These are commercial fonts — use Arial or Helvetica Neue as email fallbacks.

Display / Header Font

Skinmap™ Total Body Photography

Futura Medium Use: Logo, website headers, marketing headers Color: #000033 (Dark Navy)

Body Font

Skinmap uses advanced computer vision and 3D body mapping to help dermatologists track moles and skin lesions over time, enabling earlier detection and more accurate monitoring of changes.

Century Gothic Use: Website body, email signatures, marketing body copy Color: #202020 (Dark Gray)

Email / Fallback Font

Arial or Helvetica Neue — used for email body text where Century Gothic may not be available.

Arial / Helvetica Neue Use: Email body text Color: #000000 (Black)

Monospace / Technical

#Skinmap · #TotalBodyPhotography · v1.0

JetBrains Mono Use: Labels, specs, code, hashtags

Hero

Skinmap

Section Heading

Subsection Title

Body

Regular paragraph text used for descriptions and long-form content.

Caption

Photo captions, footnotes, and secondary information.

Label

Section Labels · Tags · Specs

05 — Photography & Imagery

Image Guidelines

Skinmap imagery should convey precision, innovation, and clinical trust. The 3D wireframe aesthetic and green mapping dots are signature visual elements.

✓ What to Use

Clean, well-lit clinical environments. Technology in use — screens showing 3D body maps. Dermatologists interacting with the platform. Abstract 3D wireframe/mesh visuals. Close-ups of the mapping interface. Patient-friendly, non-intimidating settings.

clinical precision technology forward 3D wireframe clean / modern

✕ What to Avoid

Graphic clinical photos of skin conditions. Stock photos that feel generic or overly staged. Dark, sterile, intimidating medical imagery. Anything that could cause anxiety about skin health. Low-resolution or poorly lit images.

graphic medical photos generic stock fear-inducing

Photo Treatment

Images may be given a slight cool-blue tone to align with the navy brand palette. For marketing materials, the navy-to-green gradient can be used as an overlay or accent. Maintain clean, high-contrast visuals.

Graphic Elements

The circular arrow (blue-to-green gradient) is a signature motif representing continuous monitoring. The 3D wireframe mesh and green mapping dots are core visual elements. Use these consistently but sparingly — they should enhance, not overwhelm.

07 — Downloads

Brand Assets

Download approved logo files, templates, and resources for use by authorized Skinmap and Triangulate Labs contributors and partners.

🖼

Logo Package

Skinmap logos — icon-only, horizontal wordmark, and full lockup in multiple sizes, plus animated spinner GIFs (64 / 128 / 256 px).

Download

🎨

Social Templates

Templates for LinkedIn, Instagram, and Facebook posts and graphics.

Coming Soon

📄

Brand Kit

Complete brand kit with color codes, font files, and usage examples.

Coming Soon

08 — In-Product Design

In-Product Design

The design layer for the Skinmap iOS app — a distinct system from the corporate / marketing identity above. The app uses Apple's system font and a WCAG-checked token set, so it feels native and stays accessible. It ships two appearances — Atlas (light) and Midnight (dark) — and follows the iOS system setting.

Source: the AuthPrototypes SwiftUI package (AuthTheme.swift), sign-in / sign-up redesign, August 2026. This section documents what ships. Contrast ratios are measured text-on-ground; where a ground is a gradient the figure given is the worst case — the lightest point the text can sit over. The in-app target is Apple's HIG contrast guidance: most tokens clear 4.5:1 comfortably, and the two called out in Known trade-offs below sit in the 3:1 band at the extreme end of the Atlas gradient. Appearances are light / dark, not tiers — Skinmap does not charge for UI colors.

Typeface

System Font — SF Pro

Aa Bb Cc

SF Pro is the iOS system font — no custom face to load or license. It maps to Apple's text styles, so Dynamic Type scales the app automatically. Marketing and brand surfaces keep Futura + Century Gothic; SF Pro is app-only.

Large titleSF Pro Display · Bold · 34/41 pt — screen titles

Body / inputsSF Pro Text · Regular · 17/22 pt — input text

ButtonSF Pro Text · Semibold · 17/22 pt

Subhead / linksSF Pro Text · Semibold · 15/20 pt

FootnoteSF Pro Text · Regular · 13/18 pt

CaptionSF Pro Text · Regular · 12/16 pt — terms & version line

Appearances

The app maps the iOS system setting straight onto the pair — light → Atlas, dark → Midnight — and switches live without losing entered text. There is no third appearance and no manual override; the system setting is the only input.

Ships · Light

Atlas

The marketing site's look brought in-app — the Brand Blue → Mid Blue gradient as the ground, white as the action. The app's light appearance.

Ground · Brand Blue → Mid Blue#1B2A6E→#2E5FA1

Field · white glass, input #20202016.3:1

Title · white on ground6.4:1

Links · Light Green6.4→3.1:1

Primary button · Dark Navy label20.0:1

Ships · Dark

Midnight

Dark Navy → Brand Blue as the ground — both straight from the brand palette — with Glacier promoted to the action colour. The app's dark appearance.

Ground · Dark Navy → Brand Blue#000033→#1B2A6E

Field · Brand Blue glass @ 55%, input #FFFFFF13.1:1

Links & focus · Glacier7.3:1

Primary button · Dark Navy label11.2:1

In-App Colour Roles

The app draws from the master palette in section 03. Only the four tokens below are app-specific — three neutrals Apple supplies and one sanctioned teal. Nothing else may be invented at the app layer.

Glacier

#58D5C8

App-only AA sibling of brand Teal #3B8686 (which fails contrast on dark navy). Midnight's links, focus rings, and primary button. Marketing keeps #3B8686.

Placeholder — light grounds

#8A8A8E

iOS placeholder gray, inside Atlas's white glass fields. Placeholders are hints only — never the field's only label.

Secondary — dark grounds

#EBEBF5

iOS secondary label, used at 55–62% for placeholders and sub-titles on Midnight. 5.2:1 at 62%.

Ink

#202020

Brand Dark Gray, unchanged — every input value typed on a light field, and sub-titles at 65%.

Material — Liquid Glass

Liquid Glass changes what a colour token is. On a glass surface a brand colour is not a rendered colour — it is a tint over a live, blurred backdrop. What the eye receives is the tint composited over whatever sits behind it, plus the material's own refraction and specular edge. So glass surfaces are specified as recipes, never as a single hex.

✓ The layer rule — where brand stops and Apple starts

Content layer — brand owns it. The gradient ground, the logo lockup, the wordmark, imagery. Always opaque. This is where Skinmap looks like Skinmap.
Control layer — Apple owns it. Fields, buttons, switchers. Liquid Glass, system shapes, system behaviours. Brand enters only as a tint and the action colour.
Never glass on glass. Controls float directly over the content layer — never over a glass card, sheet, or another glass control.
One prominent glass control per screen. The single primary action uses prominent glass; everything else is plain or a text link.
Group related controls in one glass container so the material merges and refracts as a unit, instead of scattering separate effects that fight each other.

Recipes

Atlas field — regular glass, white tint @ 90%, 12 pt rect. Flattens to ≈ #E9EDF3.
Midnight field — regular glass, Brand Blue tint @ 55%, 12 pt rect. Flattens to ≈ #0F1753.
The flattened values are the composited equivalents — use them when specifying a static mock, an App Store screenshot, or any surface that can't render live glass.
Primary button — prominent glass, tinted with the appearance's action colour, 14 pt rounded rect.
Use regular glass. Clear glass is for media-rich backdrops only — never for a form.

✕ Tint opacity is a legibility floor, not a taste knob

The percentages above are doing accessibility work. Atlas's input text holds 13.9:1 at a 90% tint but drops below AA once the tint falls under roughly 40%.
Do not "make it glassier" without re-measuring both the text-on-fill ratio and the fill-vs-ground ratio.
Two ratios govern every glass control: text on fill, and fill vs the ground behind it. Text-on-fill clears 4.5:1 on both appearances (13.9:1 Atlas, 13.1:1 Midnight).
Fill-vs-ground is 5.6–10.9:1 on Atlas. On Midnight it is ~1.0–1.2:1 by construction — the field tints with Brand Blue and the ground gradient ends on Brand Blue, so the fill and the ground converge. The field is delineated by the material's specular edge and the focus ring rather than by fill contrast. Deliberate; noted so it isn't mistaken for the 1.1:1 defect the redesign fixed, where there was no edge treatment at all.

Accessibility settings

Dynamic Type — honoured. The 52 pt field scales with the body text style and the material follows the shape, so glass never clips growing text.
Reduce Transparency and Reduce Motion — the app takes iOS's default behaviour; it does not override the material or the step transition. Whatever opaque fill and reduced animation the system substitutes is what users of those settings get.
If we ever want the brand rather than the system to decide what glass degrades to, the flattened values above are the specification to adopt. Until then, treat system defaults as the documented behaviour.

Input Field

Height 52 pt Corner radius 12 pt Side padding 16 pt Text 17 pt Beats Apple's 44 pt min

Field states

Rest — placeholder in the appearance's secondary gray
Focused — 1.5 pt accent border + soft ring (accent contrasts with the field fill, not the screen ground)
Filled & secure — reveal (eye) toggle inside the field
Error — 13 pt message below the field in the appearance's error tint
Overflow — long values scroll while editing, tail-truncate at rest; never wraps or shrinks the font

✓ The gradient rule

Both shipping appearances use a gradient ground, so a single contrast figure is meaningless — text drifts across it.
Always quote the ratio at the gradient's lightest point, not its darkest. Measuring at the dark end is how a link that reads 6.4:1 on paper renders at 3.1:1 two-thirds of the way down the screen. Every figure in this section follows that rule.
Applies to titles, links, error copy, and any icon carrying meaning.

Layout & keyboard

Form column max 400 pt, centered; fields never stretch edge to edge (iPad / large widths, both orientations)
On keyboard, the column shifts up so the focused field sits just above it — fields never resize
Logo / wordmark scroll off the top if space runs out; the primary button stays reachable and Return becomes "Go"
Tapping outside a field dismisses the keyboard

Wordmark & logo in-app

Splash / launch: the full Futura lockup + Total Body Photography tagline, sized so the tagline stays legible
Auth & chrome: icon mark + "SKINMAP" in letter-spaced SF Pro caps (the lockup's built-in tagline would render ~7–8 px here — illegible)
Background rule per section 02: both shipping appearances have dark grounds, so both use the colour icon + white wordmark lockup. The full-colour lockup is for light grounds and does not appear in the app's auth flow. Clear space ≈ the height of the "S".
App-only exception; all marketing surfaces still use the official Futura logo asset

Semantic Colours

Both shipping appearances sit on dark grounds, so the app carries one error tint. iOS system red #FF3B30 is retired — it measures 3.55:1 on white and fails AA.

Error

#FF9A91

Atlas and Midnight. 9.8:1 on Dark Navy, 6.4:1 on Brand Blue, 3.2:1 at the lightest point of the Atlas gradient — see Known trade-offs.

Success

#3CB54A

Brand Map Green, reconciled from iOS #34C759. Success states and the password-strength meter — never a button fill.

Resolved Decisions

Palette

No new brand colours. Both shipping grounds are built from section 03 only — Dark Navy, Brand Blue, Mid Blue. The bespoke app navies #262B59, #14163A, and #363B6D from v1.1 are retired.
The app teal family narrows to Glacier #58D5C8, Midnight's action colour. #0C7268 and #6FDCD0 are retired — nothing in the app uses them.
App navy standardized to Dark Navy #000033 / Brand Blue #1B2A6E; Midnight's gradient is a background, never an action.

Actions

Map Green is a marketing CTA colour, not an in-app one. In-app primary buttons follow Apple's filled convention with the maximum-contrast label per appearance (20.0 / 20.0 / 11.2:1).
Rationale is semantic, not just contrast: in a clinical product green reads as "result: clear." Reserving it for success states and the strength meter keeps that signal unambiguous. (White-on-Map-Green does fail at 2.7:1, but Dark-Navy-on-Map-Green passes at 7.5:1 — contrast alone would not have forced this.)
Appearance model: exactly two — Atlas = light, Midnight = dark — selected from the iOS system setting. Earlier explorations (Clinical Light, Company Teal) are retired; the app has no third scheme and no in-app theme picker. No tiering — appearances are never premium or paid.

Known Trade-offs

Recorded so they stay deliberate. Both concern the same thing: two Atlas text tints hold well over most of the gradient and thin out at its lightest corner.

Atlas links — Light Green `#7BC67E`

6.4:1 at the top of the gradient · 4.4:1 mid-screen · 3.1:1 at the bottom-right corner.
Set in 15 pt Semibold. The 3:1 allowance in both Apple's and WCAG's tables applies to large text — 18 pt+ regular or 14 pt+ bold — so this token is measured against 4.5:1 and clears it over roughly the upper two-thirds of the screen only.
Accepted for now: green links are the marketing site's language, and the affected content sits high on the form in practice. Revisit if the gradient is ever re-tuned lighter.

Error copy on dark grounds — `#FF9A91`

9.8:1 on Dark Navy · 6.4:1 on Brand Blue · 3.2:1 at the lightest point of the Atlas gradient.
Set in 13 pt Regular, so 4.5:1 is the applicable threshold throughout.
Mitigated in use: validation copy renders directly beneath its field, in the upper half of the form, where the ground is still dark. A lighter tint (#FFD5D0, 4.8:1 worst case) is the drop-in fix if this is ever revisited.

Contrast — Before the Redesign

The pre-redesign sign-in failed WCAG on the essentials — what the token set above fixes:

✕ Input text on field

white @ 77% on white @ 8% over teal → 1.6:1 (fails)

✕ Field vs background

white @ 8% → 1.1:1, nearly invisible (fails)

09 — For AI Agents

Machine-Readable Brand Context

If you're an AI assistant creating content for Skinmap, reference the structured data below. This ensures brand-consistent outputs for social posts, graphics, emails, and more.

brand-context.json

{
  "organization": "Skinmap",
  "trademark": "Skinmap™",
  "parent_company": "Triangulate Labs, Inc.",
  "type": "MedTech / Total Body Photography Platform",
  "tagline": "Skinmap™ Total Body Photography",
  "mission": "To improve the world through deep computer understanding from vision",
  "website": "TriangulateLabs.com",

  "colors": {
    "dark_navy": "#000033",
    "brand_blue": "#1B2A6E",
    "mid_blue": "#2E5FA1",
    "teal": "#3B8686",
    "map_green": "#3CB54A",
    "light_green": "#7BC67E",
    "dark_gray": "#202020",
    "ice_green": "#EAF6EA"
  },

  "fonts": {
    "display": "Futura Medium (headers, logo)",
    "body": "Century Gothic (body copy, email signatures)",
    "fallback": "Arial / Helvetica Neue (email body)",
    "mono": "JetBrains Mono (labels, specs)"
  },

  "voice": {
    "tone": ["clinically precise", "innovative", "reassuring", "evidence-based", "professional", "approachable"],
    "avoid": ["fear-mongering", "overly casual", "hyperbolic", "vague", "making diagnostic claims"]
  },

  "key_terms": ["computer vision", "machine learning", "3D body mapping",
    "total body photography", "detection", "classification",
    "neural network", "AI", "dermatology"],

  "hashtags": {
    "primary": ["#Skinmap", "#TotalBodyPhotography"],
    "secondary": ["#TriangulateLabs", "#ComputerVision", "#Dermatology", "#3DBodyMapping", "#MedTech"]
  },

  "logo_description": "3D wireframe torso with green mapping dots, enclosed in a circular arrow (navy-to-green gradient) representing continuous monitoring. Wordmark is SKINMAP in dark navy Futura with TOTAL BODY PHOTOGRAPHY set as an integrated tagline beneath.",

  "logo": {
    "description": "3D wireframe torso with green mapping dots, enclosed in a circular arrow (navy-to-green gradient) representing continuous monitoring. Wordmark is SKINMAP in dark navy Futura with TOTAL BODY PHOTOGRAPHY as an integrated tagline beneath.",
    "package_zip": "https://skinmap.com/wp-content/uploads/2026/06/Skinmap-Logo-Package.zip",
    "files": {
      "full_color_transparent_png": "https://skinmap.com/wp-content/uploads/2025/08/Logo_transparentBG_LARGE.png",
      "on_white_jpg": "https://skinmap.com/wp-content/uploads/2025/08/Logo-_whiteBG_MEDIUM.jpg",
      "icon_png": "https://skinmap.com/wp-content/uploads/2026/05/skinmap-logo-icon.png",
      "white_reversed_transparent_png": "https://skinmap.com/wp-content/uploads/2026/06/Logo_WHITE_transparentBG_LARGE.png",
      "on_dark_color_transparent_png": "https://skinmap.com/wp-content/uploads/2026/07/Logo_DARKMODE_color_transparentBG_LARGE.png",
      "monochrome_black_transparent_png": "https://skinmap.com/wp-content/uploads/2026/06/Logo_BLACK_transparentBG_LARGE.png",
      "monochrome_blue_transparent_png": "https://skinmap.com/wp-content/uploads/2026/06/Logo_BLUE_transparentBG_LARGE.png"
    }
  },

  "product_ui": {
    "_note": "In-product (iOS app) design layer. Distinct from the corporate/marketing identity above: the app uses the system font and a contrast-checked token set. Source: the AuthPrototypes SwiftUI package (AuthTheme.swift), sign-in/sign-up redesign, August 2026. This section DOCUMENTS WHAT SHIPS. Contrast ratios are measured text-on-ground; where the ground is a gradient the figure is the WORST case — the lightest point the text can sit over. The target is Apple's HIG contrast guidance: most tokens clear 4.5:1 comfortably; the two in known_tradeoffs sit in the 3:1 band at the extreme end of the Atlas gradient. Appearances are light/dark, not tiers — Skinmap does not charge for UI colors.",
    "known_tradeoffs": {
      "_note": "Recorded so they stay deliberate rather than accidental. Both concern Atlas text tints that hold over most of the gradient and thin out at its lightest corner.",
      "atlas_links": "light_green #7BC67E — 6.4:1 top, 4.4:1 mid, 3.1:1 at the bottom-right corner. Set in 15 pt Semibold; the 3:1 allowance in both Apple's and WCAG's tables applies to LARGE text (18 pt+ regular or 14 pt+ bold), so this is measured against 4.5:1 and clears it over roughly the upper two-thirds of the screen. Accepted: green links are the marketing site's language and the affected content sits high on the form. Revisit if the gradient is re-tuned lighter.",
      "error_on_dark_grounds": "#FF9A91 — 3.2:1 at the lightest point of the Atlas gradient, set in 13 pt Regular so 4.5:1 applies throughout. Mitigated in use: validation copy renders directly beneath its field in the upper half of the form, where the ground is still dark. Drop-in fix if revisited: #FFD5D0 (4.8:1 worst case).",
      "midnight_field_vs_ground": "~1.0-1.2:1 by construction — the field tints with brand_blue and the ground gradient ends on brand_blue, so fill and ground converge. Delineated by the material's specular edge and the focus ring rather than by fill contrast. Deliberate; not the same as the 1.1:1 pre-redesign defect, which had no edge treatment at all."
    },
    "fonts": {
      "system": "SF Pro (iOS system font — no custom face to load or license; maps to Apple text styles so Dynamic Type works)",
      "note": "Marketing/brand surfaces keep Futura + Century Gothic. SF Pro is app-only."
    },
    "wordmark": {
      "app_treatment": "In-app auth/chrome headers set 'SKINMAP' as letter-spaced SF Pro caps.",
      "exception_note": "Sanctioned app-only exception to the logo rules (Futura lockup with the Total Body Photography tagline, not re-typed). Native app chrome only; all marketing/brand surfaces still use the official Futura logo asset."
    },
    "lockup": {
      "splash_only": "The full Futura lockup (wordmark + Total Body Photography tagline) appears on the splash/launch screen only, sized large enough for the tagline to stay legible.",
      "auth_and_chrome": "Auth and in-app chrome use the icon mark + typed SF Pro caps wordmark. At header size the lockup's built-in tagline renders ~7–8 px — illegible — so the full lockup is not used there.",
      "icon_asset": "https://skinmap.com/wp-content/uploads/2026/05/skinmap-logo-icon.png"
    },
    "copy_conventions": {
      "case": "Screen and button copy use title case (e.g. 'Sign In', 'Create Account'), per Apple HIG.",
      "name": "Always 'Skinmap' / 'Skinmap™' in prose — never 'SkinMap'."
    },
    "type_scale": {
      "large_title": "SF Pro Display · Bold · 34/41 pt (screen titles)",
      "body_inputs": "SF Pro Text · Regular · 17/22 pt (input text)",
      "button": "SF Pro Text · Semibold · 17/22 pt",
      "subheadline_links": "SF Pro Text · Semibold · 15/20 pt",
      "footnote": "SF Pro Text · Regular · 13/18 pt",
      "caption": "SF Pro Text · Regular · 12/16 pt (terms line, version line)"
    },
    "app_only_colors": {
      "_note": "The app draws from the master palette in section 03. These four tokens are the ONLY app-specific additions; nothing else may be invented at the app layer.",
      "glacier": "#58D5C8",
      "glacier_note": "App-only AA sibling of brand teal #3B8686 (which fails contrast on dark navy). Midnight's links, focus rings, primary button. Marketing surfaces keep #3B8686.",
      "placeholder_light": "#8A8A8E",
      "placeholder_light_note": "iOS placeholder gray inside white / Ice Green fields. Placeholders are hints only — never a field's only label.",
      "secondary_dark": "#EBEBF5",
      "secondary_dark_note": "iOS secondary label, used at 55-62% for placeholders and subtitles on dark grounds (5.2:1 at 62%).",
      "ink": "#202020",
      "ink_note": "Brand Dark Gray, unchanged — input values on light fields, and subtitles at 65%."
    },
    "semantic_colors": {
      "error": "#FF9A91",
      "error_note": "One tint — both shipping appearances sit on dark grounds. 9.8:1 on dark_navy, 6.4:1 on brand_blue, 3.2:1 at the lightest point of the Atlas gradient — see known_tradeoffs.",
      "error_retired": "iOS system red #FF3B30 is RETIRED as the app error color — it measures 3.55:1 on white and fails AA.",
      "success": "#3CB54A",
      "success_note": "Brand map_green, reconciled from iOS #34C759. Success states and the password-strength meter only — never a button fill."
    },
    "material": {
      "system": "Liquid Glass (iOS 26). The app's deployment target is iOS 26.0, so no availability fallback exists or is needed.",
      "principle": "Liquid Glass changes what a color token IS. On a glass surface a brand color is not a rendered color — it is a TINT over a live, blurred backdrop. Glass surfaces are therefore specified as recipes (material + tint + opacity + shape + opaque fallback), never as a single hex.",
      "layer_rule": {
        "content_layer": "Brand owns it — the gradient ground, logo lockup, wordmark, imagery. Always opaque.",
        "control_layer": "Apple owns it — fields, buttons, switchers. Liquid Glass, system shapes, system behaviors. Brand enters only as a tint and the action color.",
        "never_glass_on_glass": "Controls float directly over the content layer, never over a glass card, sheet, or another glass control.",
        "one_prominent_control": "One prominent glass control per screen (the single primary action). Everything else is plain glass or a text link.",
        "group_in_one_container": "Related controls share ONE glass container so the material merges and refracts as a unit."
      },
      "recipes": {
        "atlas_field": {
          "material": "regular",
          "tint": "#FFFFFF",
          "tint_opacity": 0.9,
          "shape": "rect, 12 pt radius",
          "opaque_fallback": "#E9EDF3"
        },
        "midnight_field": {
          "material": "regular",
          "tint": "#1B2A6E",
          "tint_opacity": 0.55,
          "shape": "rect, 12 pt radius",
          "opaque_fallback": "#0F1753"
        },
        "primary_button": {
          "material": "prominent",
          "tint": "the appearance's action color",
          "shape": "rounded rect, 14 pt radius"
        },
        "clear_glass": "Reserved for media-rich backdrops. Never used for a form."
      },
      "flattened_values_note": "The opaque_fallback values are the composited equivalents of each recipe. Use them for static mocks, App Store screenshots, or any surface that cannot render live glass.",
      "tint_opacity_rule": "The tint opacities above are legibility floors, not taste knobs. Atlas's input text holds 13.9:1 at a 90% tint but drops below 4.5:1 once the tint falls under roughly 40%. Never reduce a tint without re-measuring both ratios below.",
      "two_governing_ratios": {
        "text_on_fill": "Clears 4.5:1 on all three appearances (13.9 / 13.1 / 16.1:1).",
        "fill_vs_ground": "5.6-10.9:1 on Atlas. ~1.0-1.2:1 on Midnight by construction — see known_tradeoffs.midnight_field_vs_ground."
      },
      "accessibility_settings": {
        "dynamic_type": "Honoured. The 52 pt field scales with the body text style; the material follows the shape, so glass never clips growing text.",
        "reduce_transparency": "The app takes iOS's DEFAULT behavior; it does not override the material. Whatever opaque fill the system substitutes is what those users get.",
        "reduce_motion": "The app takes iOS's DEFAULT behavior; the step transition is not overridden.",
        "if_adopted_later": "If the brand rather than the system should decide what glass degrades to, the opaque_fallback values above are the specification to adopt. Until then, system defaults ARE the documented behavior."
      }
    },
    "appearance_model": "EXACTLY TWO appearances: a light one (Atlas) and a dark one (Midnight), selected from the iOS system setting and switching live without losing entered text. There is no third scheme and no in-app theme picker.",
    "gradient_contrast_rule": "Both shipping appearances use a gradient ground, so a single contrast figure is meaningless — text drifts across it. Every text token must meet AA against the gradient's LIGHTEST point, not its darkest. Applies to titles, links, error copy, and any icon carrying meaning.",
    "field_spec": {
      "height_pt": 52,
      "corner_radius_pt": 12,
      "side_padding_pt": 16,
      "text_size_pt": 17,
      "tap_target_note": "Beats Apple's 44 pt minimum comfortably.",
      "states": {
        "rest": "Placeholder in the appearance's secondary gray",
        "focused": "1.5 pt accent border + soft ring; the accent contrasts with the FIELD FILL, not the screen ground",
        "filled_secure": "Reveal (eye) toggle inside the field",
        "error": "13 pt message below the field in the appearance's error tint",
        "overflow": "Long values scroll while editing and tail-truncate at rest; the field never wraps and never shrinks the font."
      }
    },
    "layout": {
      "ipad_and_large_widths": "Form column is width-constrained to max 400 pt and centered horizontally and vertically; the ground fills the screen. Fields never stretch edge to edge. Applies to both appearances in both orientations.",
      "keyboard": [
        "The form column shifts up so the focused field sits just above the keyboard — fields never resize.",
        "The logo and wordmark scroll off the top if space runs out; brand yields to input.",
        "The primary button stays reachable; the return key becomes 'Go' as an equivalent submit.",
        "Footer and version line may be covered — ambient info, not tasks.",
        "Tapping outside any field dismisses the keyboard."
      ]
    },
    "themes": {
      "atlas": {
        "label": "Atlas",
        "appearance": "light",
        "ships": true,
        "summary": "The marketing site's look brought in-app — the Brand Blue to Mid Blue gradient as the ground, white as the action.",
        "background": "#1B2A6E → #2E5FA1 (brand_blue → mid_blue, topLeading → bottomTrailing)",
        "field_fill": "white-tinted Liquid Glass @ 90%",
        "input_text": {
          "value": "#202020",
          "contrast": "16.3:1"
        },
        "title": {
          "value": "#FFFFFF",
          "contrast": "6.4:1 worst-case (13.1:1 at the dark end)"
        },
        "links": {
          "value": "#7BC67E",
          "contrast": "6.4:1 top / 4.4:1 mid / 3.1:1 at the lightest corner",
          "note": "Brand light_green. 15 pt Semibold, so 4.5:1 is the applicable threshold — see known_tradeoffs."
        },
        "primary_button": {
          "value": "#FFFFFF",
          "contrast": "20.0:1",
          "label_color": "#000033"
        }
      },
      "midnight": {
        "label": "Midnight",
        "appearance": "dark",
        "ships": true,
        "summary": "Dark Navy to Brand Blue as the ground — both straight from the brand palette — with Glacier promoted to the action color.",
        "background": "#000033 → #1B2A6E (dark_navy → brand_blue)",
        "field_fill": "#1B2A6E (brand_blue Liquid Glass @ 55%)",
        "input_text": {
          "value": "#FFFFFF",
          "contrast": "13.1:1 worst-case"
        },
        "links": {
          "value": "#58D5C8",
          "contrast": "7.3:1 worst-case (11.2:1 on dark_navy)"
        },
        "primary_button": {
          "value": "#58D5C8",
          "contrast": "11.2:1",
          "label_color": "#000033"
        }
      }
    },
    "today_for_comparison": {
      "input_text_on_field": "white @ 77% on white @ 8% over teal → 1.6:1 (fails)",
      "field_fill_vs_background": "white @ 8% → 1.1:1, nearly invisible (fails)",
      "note": "The redesign fixes these; every token above meets AA."
    },
    "resolved_decisions": {
      "no_new_brand_colors": "Both shipping grounds are built only from the section 03 palette (dark_navy, brand_blue, mid_blue). The v1.1 bespoke app navies #262B59, #14163A and #363B6D are RETIRED.",
      "app_teal_family": "Narrowed to glacier #58D5C8, Midnight's action color. The v1.1 siblings #0C7268 and #6FDCD0 are RETIRED — nothing in the app uses them. Marketing surfaces keep brand teal #3B8686.",
      "app_navy": "Standardized to dark_navy #000033 / brand_blue #1B2A6E. Midnight's gradient is a background, never an action.",
      "cta_color": "map_green #3CB54A is a MARKETING CTA color, not an in-app one. In-app primary buttons follow Apple's filled convention with the maximum-contrast label per appearance (20.0 / 20.0 / 11.2:1). The reason is semantic, not merely contrast: in a clinical product green reads as 'result: clear', so it is reserved for success states and the password-strength meter. (White-on-map_green does fail at 2.7:1, but dark_navy-on-map_green passes at 7.5:1 — contrast alone would not have forced this.)",
      "appearances": "EXACTLY TWO — Atlas = light, Midnight = dark, selected from the iOS system setting. Earlier explorations (Clinical Light, Company Teal) are retired; the app has no third scheme and no in-app theme picker. No tiering — appearances are never premium or paid.",
      "success_color": "Brand map_green #3CB54A (chosen over iOS #34C759).",
      "company_teal_retired": "The earlier 'Company Teal' theme was dropped; the app ships a light + dark pair."
    },
    "themes_note": "There are exactly two. Do not add a third without changing this file — earlier explorations (Clinical Light, Company Teal) are retired and must not be built against."
  }
}

Prompt Snippet for AI Agents

When creating content for Skinmap, follow these rules:

1. Use a clinically precise, innovative, and reassuring tone.
2. Never make diagnostic claims or suggest Skinmap replaces a dermatologist.
3. Reference "Total Body Photography" alongside the Skinmap name.
4. Use the primary color palette: dark navy (#000033), map green (#3CB54A).
5. Hashtags: always include #Skinmap and #TotalBodyPhotography.
6. Audience: dermatologists, clinicians, and health-conscious patients
   interested in advanced skin monitoring technology.
7. Skinmap is a product of Triangulate Labs, Inc.
8. Key differentiators: 3D body mapping, computer vision, AI-powered detection.
9. Always use the ™ symbol: Skinmap™

Questions about brand usage? Contact the Triangulate Labs team.

Skinmap™Brand Guide