Back to homeSugar Shark · Brand System · v1.0

2026-05-02

Sugar Shark

The brand system

01 — Foundation

Foundation

Posture, audience, anti-patterns. The promise that everything else laddered up to.

The promise

Your guardian against hidden sugar.

Sharp enough to warn

Soft enough to live with

Calm · useful · no panic

Posture

Friendly guardian. Sharp enough to warn, soft enough to live with. Quieter over louder. Less over more. White space over decoration.

The shark is a posture, not a mascot. It lives in the wordmark and in the moments where the system says “you probably want to skip this one.”

Audience

People with diabetes and metabolic conditions — managing a chronic condition, not browsing for the next supplement. The voice respects that.

What we’re not

Not Temu-y. No saturation cranking, no gradient mesh, no abstract blob shapes.

Not supplement-aisle. No green-good / red-bad coding, no clinical cold-blue.

Not cold-Tesla. Geometry without warmth lands as instrument-cold; we want instrument-warm.

Not MyFitnessPal-clinical. No bar-chart sea, no calorie shame.

02 — Logos

Logos

Concept A is the selected direction. The shark silhouette and custom logotype are the brand’s two identity units; everything below — sizing, lockups, knockouts, clearspace — applies to them universally.

Set

Logomark · logotype · lockup

Direction · Concept A locked

Logotype · custom-drawn

Lockups · 2 variants

Concepts · selection complete

The chosen direction. The standalone mark plus custom logotype shown across every panel below. Click through for the full presentation — applications, variants, clearspace, mockups.

Concept B · alternate

archived deck →

Logomark

Logotype

The alternate direction explored and set aside. Kept on record for context. Click through to see the original presentation.

Logotype · the constant

Concept A · custom-drawnProportions lockedOne unit · never restyled

Logomark · the standalone glyph

120 / hero

64 / standard

40 / nav

24 / favicon floor

Lockups · horizontal + stacked

Horizontal · default

Stacked · for tight spaces

Color variants · for every surface

Ink · default

Surface · knockout

Accent · sparingly

Clearspace · half the mark height on every side

Reserve a margin equal to half the mark’s height on every side. Nothing — type, UI, photography — enters this zone.

Don’ts

Don’t recolor

Outside ink / surface / accent.

Don’t stretch

Keep the proportions locked.

Don’t anthropomorphize

No eyes, no smile. The shark is a posture.

03 — Color

Color

Paper-whites, fogs, slates. Neutral ink. A deep slate-blue carries the brand-accent role. Zero vivids — the system never has a panic color.

Palette

Cool Stone

8 tokens · slate-blue accent

AA / AAA documented

No vivids · no warn-color

--paper

paper

#F4F5F7

oklch(96.4% 0.004 250)

App background. Default canvas.

--surface

surface

#FFFFFF

oklch(100% 0 0)

Cards, inputs, sheets.

--fog

fog

#E4E7EB

oklch(91.2% 0.006 250)

Dividers, hairlines, subtle fills. No text.

--stone

stone

#C8CDD3

oklch(81.8% 0.010 250)

Mute fills, disabled states, chips.

--slate

slate

#6B7480

oklch(53% 0.018 250)

Secondary ink. Captions, labels, metadata.

--ink

ink

#161616

oklch(17.6% 0 0)

Primary ink. Default text. Carries warn semantic via 2px rule.

--accent

accent

#0885E5

oklch(60% 0.18 245)

Brand accent. Primary buttons, key emphasis. Sparing — never as a background.

--accent-soft

accent-soft

#E0F2FE

oklch(96% 0.024 235)

Accent surface. Focus states, key callouts. Not for warnings.

Contrast pairs · documented

ink on surface

16.5 : 1 AAA

ink on paper

15.7 : 1 AAA

slate on surface

4.6 : 1 AA

slate on paper

4.4 : 1 AA

accent on surface

8.0 : 1 AAA

accent on paper

7.7 : 1 AAA

accent on accent-soft

5.7 : 1 AA

ink on accent-soft

14.0 : 1 AAA

Hard rules

No vivids

The system ships zero vivid colors. accent is deep and restrained; accent-soft is a near-neutral tinted surface. There is no orange, no red, no green.

No pure black

Ink is #161616, never #000.

Accent is sparing

Use on primary CTA, the wordmark when colored, and key emphasis in marketing. Never as a background. Never on more than one element per view.

Warn carries no color

The warn pattern is: 2px ink rule on the leading edge + mono SKIP tag (ink-on-paper, fog border) + ink body text. No warn-red, no warn-tinted surface.

Accent-soft is not warn

It signals focus, key callout, or accent-tinted area. Never use it for skip / warn.

AA minimum

Every color carrying text meets at least AA contrast on its intended surface. Documented above.

The warn pattern · canonical

Live pattern

Skip

You probably want to skip this one.
GI 78 · Glazed donut · ~3× your morning target.

Anatomy

[border-left: 2px solid var(--ink)]
[padding]
  [Skip tag — mono, ink on paper, fog border]
  [Body — ink, optional --slate dim line]

No dot, no icon, no hue. The hairline rule and the tag do all the semantic work.

04 — Type

Type

Geometric, modern, screen-first. The system inverts the hierarchy: display sizes go Light, smaller text gets heavier — the eye reads weight as importance once size stops doing the work. Tabular numerals required.

Typeface

Geist

OFL · open-source

Vercel + Basement Studio

5 weights · 300 / 400 / 500 / 600 / 700

Display sample · Geist Semibold · −0.04em tracking

Sugar Shark

Scale

Display

64px · 4rem
Light 300
Leading 1.05
Tracking −0.034em

Doesn’t shout.

48px · 3rem
Light 300
Leading 1.10
Tracking −0.028em

Your guardian against hidden sugar.

32px · 2rem
Regular 400
Leading 1.18
Tracking −0.020em

GI 78 — you probably want to skip this one.

24px · 1.5rem
Medium 500
Leading 1.25
Tracking −0.014em

Watching: rice bowls

20px · 1.25rem
Medium 500
Leading 1.30
Tracking −0.010em

Today’s snapshot

17px · 1.0625rem
Semibold 600
Leading 1.40
Tracking −0.006em

Pattern check · last seven days

13px · 0.8125rem
Bold 700
Leading 1.45
Tracking +0.10em

Why we built it

Lead

20px · 1.25rem
Regular 400
Leading 1.45
Tracking 0

A calm, useful read on what’s in front of you, without the panic of an alarm.

Body

16px · 1rem
Regular 400
Leading 1.60
Tracking 0

Default text. Long-form prose. The body face is unconstrained and reads quietly across the system.

14px · 0.875rem
Medium 500
Leading 1.50
Tracking 0

Save log entry

Caption

13px · 0.8125rem
Regular 400
Leading 1.50
Tracking 0

Last logged 12:48 pm · slate ink

Mono / Tag

11px · 0.6875rem
Regular 400
Leading 1.40
Tracking +0.14em

GI · 78 · SKIP

Weights · five live · inverted hierarchy

Light 300

Display + H1. Levity at large sizes — the airier the size, the lighter the line.

Regular 400

H2, body, lead, captions. The reading weight.

Medium 500

H3, H4, UI controls, table values, GI numbers.

Semibold 600

H5, wordmark in tight conditions. The hierarchy weight at small sizes.

Bold 700

H6 only. All caps, +0.10em tracking. The deliberate label register.

Tabular numerals · non-negotiable

GI scores · time data must align column-to-column

Greek yogurt, plain

log

Sourdough toast, 1 slice

log

Glazed donut

skip

Brown rice bowl, 1 cup

log

Sports drink, 16 oz

skip

05 — Iconography

Iconography

Tabler is the foundation library — utility glyphs come from there. The fourteen brand verbs are drawn in-house as paired line/filled sets. One CSS rule reconciles both: 1.5px stroke, round caps, round joins, on a 24×24 grid in currentColor.

Library + custom

Tabler · plus 14 brand verbs

Tabler · MIT · 5,800+ glyphs

14 brand verbs · in-house

1.5px stroke · round caps

Stroke

1.5px

Overrides Tabler's 2px default. Matches Geist Medium visual mass.

Caps + joins

round + round

Softer terminals, warmer register. Calm preserved at the geometry level.

Grid

24 × 24

Master canvas. 16/20/32 are downscaled renders of the same paths.

Color

currentColor

Stroke and fill both inherit from text color. No baked-in hex.

The rule, applied everywhere

/* Sugar Shark — icon system · global rule */ /* Loads alongside @tabler/icons; applies to all glyphs in the system. */ .ic, .ic-pair > svg, [class*="tabler-icon"] { stroke-width: 1.5; /* override Tabler's 2px default */ stroke-linecap: round; stroke-linejoin: round; color: currentColor; /* stroke + fill inherit from text */ }

Tabler utility set · the long tail

Anything not a brand verb comes from Tabler — chevrons, calendar, clock, share, copy, the rest. Imported per-icon, never as a bulk bundle. The same global rule applies, so they read in the same register as our own glyphs.

chevron-left

chevron-right

chevron-down

chevron-up

arrow-left

arrow-right

plus

minus

dots

calendar

clock

copy

download

external-link

trash

edit

settings

user

heart

star

bookmark

filter

eye

mail

phone

lock

info

refresh

upload

Browse the full librarytabler.io/icons github.com/tabler/tabler-icons

The 14 brand-verb pairs

Each glyph has a line resting state and a filled active state. Filled geometry shares its silhouette with the line counterpart — the two states cross-fade at 180ms with a 0.97 → 1.0 scale-in.

scan-camera

restactive

scan-barcode

restactive

inspect

restactive

swap

restactive

skip

restlogged

watch

restwatching

spot

restspotted

log

restactive tab

restfocused

profile

restactive tab

settings

restactive tab

check

restconfirmed

restdestructive

alert

restwarn

Optical sizes

16px

20px

24px

32px

In context · interactive

Filter chips · selection state

Tap to select

trigger: user click · meaning: this filter is now active

Bottom nav · active tab

Tap a tab

trigger: route change · meaning: this surface is now in focus

Warn banner · mount

Trigger the warning

trigger: GI threshold breached · meaning: the moment we said something

Confirmation · check on success

Log a food

trigger: action complete · meaning: the system received it

awaiting

06 — Motion

Motion

If motion can't be expressed as a tween between two static states, it's not in the system. No keyframes. No bounce. No overshoot. Honor prefers-reduced-motion. Each card below is interactive — tap to feel the timing.

Principles

Tween-only · decel-only

180 / 240ms · two durations

cubic-bezier(0.2, 0, 0, 1)

No bounce · no overshoot

Tokens · tap to play

--t-quick180ms

Tap to replay

Icon state changes, chip toggles, focus rings.

0 plays

--t-considered240ms

Tap to replay

Panel mounts, modal mounts, tab content switches.

0 plays

--ease-settledecel

Tap to replay

cubic-bezier(0.2, 0, 0, 1). Decel only — no bounce, no overshoot, no spring.

0 plays

Why decel-only · the curve choice, visualized

Curve comparison · 600ms

Linear

Ease-out (decel)

Ease-in-out

Decel-only matches the "settling in" feeling — the system commits to a state and lands. Linear feels mechanical. Ease-in-out adds anticipation we don't want.

07 — Voice

Voice

Sugar Shark doesn't shout. The hairline rule and the SKIP tag do all the semantic work — the voice does the rest.

Tone

Calm · useful · no panic

Plain English · short sentences

Verbs over adjectives

No exclamation points

We say

You probably want to skip this one.
GI 78 — about 3× your morning target.
Logged · 12:48 pm
Watching: rice bowls
A calm read on what's in front of you.

We don’t

DANGER! HIGH SUGAR DETECTED
🔥 Crush your goals — unlock your best self
Empower your wellness journey
You’ve been bad — here’s your streak
Revolutionize your blood sugar today