hioii.v1.0
Brand Guidelines

The Attention Economy Resistance

Hioii is not a to-do list. It is a time sovereignty system for knowledge workers, squads, and anyone exhausted by infinite feeds, reactive calendars, and productivity theater.

01 — Foundation

Brand Essence

Core promise

Reclaim your attention. Defend your time. Prove your rest.

01

Time Sovereignty

You decide where attention goes, not notifications.

02

Proof of Rest

Rest is not laziness; it is a measurable, protectable asset.

03

Interrupt Penalties

Interruptions have a cost, and Hioii makes that cost visible.

Voice

Direct, calm, slightly rebellious, tech-literate.

Tone

Never corporate-jargon. Never toxic hustle. Always pro-human.

Metaphors

Armor, time-blocks, gates, gardens, signal vs. noise.

02 — Direction

Moodboard & Art Direction

The visual base for photography, film and key visuals — plus the refinements that pull it closer to the Hioii system.

Light as the story

Single hard source: warm tungsten for the chaos side, cyan/violet for the sovereign side. Never flat ambient light.

Split-world framing

The diagonal split — paper clutter vs. obsidian calm — is the core device. Keep it asymmetric, never a 50/50 mirror.

Time-blocks as objects

Blocks render as physical, extruded slabs with edge glow. They are things you place, not rows in a list.

Base moodboard

reference · v1

Hioii moodboard: warm paper clutter transitioning into dark obsidian interface, with palette swatches

The base board establishes the thesis: analogue overload on one side, an engineered dark system on the other. Keep the diagonal transition, the physical time-blocks and the three-colour palette — Electric Obsidian, Action Cyan, Core Purple.

How to improve it

Deepen the blacks to hsl(240 7% 2%) so glows read as emission, not haze.

Grey-blue washes and lens flare stacks that flatten the contrast.

Limit accent to one hue per frame; let violet OR cyan lead, the other only edges.

Full violet→cyan gradients on photography — reserve the gradient for the brand layer.

Real hands, real desks, real skin texture. Documentary, not stock-smile.

Composited people in neon rooms, AI-glossy faces, floating UI in mid-air.

Set typography in Inter, tight tracking, always aligned to the frame edge or optical centre.

Centered all-caps captions with drop shadows sitting on top of a busy image.

Film storyboard · 10s

reference · v1

Hioii 10-second film storyboard with five shots from paper chaos to the Hioii end card
  • 01 · 0:00–0:02LIFE ISN'T A LIST.Warm clutter, shallow depth, eyes lit by the phone.
  • 02 · 0:02–0:04Noise arrives.Cut to obsidian. Cyan rim light only. Silence.
  • 03 · 0:04–0:07Blocks land.Time-blocks extrude into the grid, edge glow on impact.
  • 04 · 0:07–0:09DESIGN YOUR 360°.Daylight, movement, wrist glance. Earned calm.
  • 05 · 0:09–0:10Hioii · hioii.comBlack card, gradient wordmark. Whisper: stop listing, start boxing.
03 — Visual Identity

Color System

Hioii is a dark-first application. The palette is designed for long sessions, low eye strain, and high contrast.

Background--backgroundhsl(240 7% 2%)Primary canvas
Surface--cardhsl(240 7% 7.5%)Cards, panels, sheets
Muted--mutedhsl(240 5% 16%)Secondary surfaces
Primary--primaryhsl(271 81% 53%)CTAs, active states, links
Accent--accenthsl(183 100% 50%)Highlights, time lines, success
Foreground--foreground#ffffffPrimary text
Muted Foreground--muted-foregroundhsl(240 4% 66%)Secondary text

Gradient signature

--gradient-primary: linear-gradient(
  135deg,
  hsl(271, 81%, 53%) 0%,
  hsl(183, 100%, 50%) 100%
);

Use it sparingly

  • Hero titles
  • Primary buttons
  • Focus rings
  • Brand moments
  • Full-page backgrounds
04 — Visual Identity

Typography

Headings

SF Pro Display / Inter

Clean, geometric, Swiss-influenced.

Body

Inter

Highly legible at small sizes.

Monospace

JetBrains Mono

Time codes, durations, technical data.

H132–48px / 700

Reclaim your attention

H224–32px / 700

Defend your time

H318–20px / 600

Prove your rest

Body14–16px / 400

Hioii is a time sovereignty system for knowledge workers and squads.

Mono12–13px / 400

02:45:00 · FOCUS BLOCK · +1 INTERRUPT

Need to test real copy? Open the interactive specimen to adjust sample text, scale and line height.

Open typography specimen
05 — Visual Identity

Spacing & Shapes

Radius

--radius: 0.75rem (12px)

Glows, not shadows

--glow-primary · --glow-cyan

Glass

Floating panels, modals, bottom sheets.

Density

Compact by default. Mobile-first.

07 — Behaviour

Motion & Interaction

Motion playground

Preview each pattern with adjustable duration and easing. Keep production motion inside the 0.20–0.40s brand range.

Pattern

Duration

0.30s

Brand range: 0.20–0.40s

Easing

Live block

01:12:04

Deep work · Squad Aurora

animation: fade-in 0.30s cubic-bezier(0.22, 1, 0.36, 1) both;

GPU-first

Animate opacity and transform only. Avoid layout-triggering motion.

Calm

Durations 0.2–0.4s. No bouncy or aggressive easings.

Purposeful

Every motion guides attention or confirms an action.

fade-inPage transitions, content reveal
slide-upBottom sheets, modals, cards
pulse-glowActive focus sessions, live states
time-pulseCountdowns, timers, running blocks
00:24:59pulse-glow · time-pulse

Bottom sheets

Swipe-to-dismiss on mobile.

Haptics

On completion, focus start, invite sent.

Bottom action bar

Preferred over floating buttons where possible.

08 — System

UI Components

Buttons

  • primary — gradient background, rounded-xl
  • secondary — muted surface
  • ghost — transparent, subtle hover

Extended FAB (mobile)

Pill-shaped with icon plus label. Avoid mystery-meat icons.

Live block

01:12:04

Deep work · Squad Aurora

Proof of rest

7h 40m

Interrupt penalty

−23 min

4 interruptions today

07.1 — Usage

Real UI usage examples

Each variant shown in the situation it was designed for, with the rule for when to reach for it and when not to.

Buttons in context

One primary action per screen. Everything else steps down in weight so the eye lands on the thing that protects time.

hero — primary commitment

01:30:00

Deep work · no interruptions

  • Use when the screen has exactly one decisive action: start a block, defend the calendar, confirm rest.
  • Avoid two hero buttons side by side, or using it for navigation.

secondary + ghost — supporting actions

Block ends in 12 minutes.

  • Use when the action is useful but reversible: reschedule, snooze, view detail.
  • Avoid ghost buttons for destructive or irreversible actions.

destructive + outline — confirmations

Cancelling drops today's proof of rest streak.

  • Use when confirming data loss: cancel a block, remove a squad member, delete rest proof.
  • Avoid destructive as the resting state of a normal row action.

fab — mobile primary

  • Use when on mobile, the primary action must stay reachable while the list scrolls.
  • Avoid icon-only FABs; always pair icon with a label.

link — inline navigation

Interrupt penalties are calculated from your calendar.

  • Use when the action lives inside a sentence or a dense settings row.
  • Avoid stacking link buttons where a real button is expected.

disabled + loading

  • Use when the action is unavailable until a precondition is met, or a request is in flight.
  • Avoid hiding the button entirely — users lose the affordance.

Card patterns

Cards carry one idea each. Metric cards lead with the number; action cards lead with the verb; state cards lead with the status.

Active state card

00:42:18

Deep work · Squad Aurora

Glow + pulse only while something is genuinely live. Never decorative.

Metric card

7h 40m

Number first, label second, gradient reserved for the progress fill.

Action card

Plan tomorrow's blocks

Three protected hours are still unclaimed.

One action per card, full width at the bottom edge.

Warning card

−23 min

4 interruptions today

Destructive tint on the border and number only — never the whole surface.

List card

Spec review

09:00 — 10:30

Focus

Rest window

13:00 — 13:45

Rest

Squad sync

16:00 — 16:30

Shared

Rows use mono for time codes, sans for names. No per-row shadows.

Inputs and form states

Labels always visible, helper text under the field, errors in words rather than colour alone.

Text field — default

Shown to your squad in the timeline.

  • Use when the value is short, named, and typed by hand.
  • Avoid placeholder-only fields with no label.

Search field — icon affordance

  • Use when the field filters a list already on screen.
  • Avoid a submit button next to it; filter as the user types.

Invalid + disabled

Enter a full email address.

  • Use when validation fails, or the field depends on an earlier choice.
  • Avoid red borders with no message explaining the fix.

Mono input — time codes

  • Use when the value is a duration, timestamp or code.
  • Avoid sans-serif for anything that reads as a number sequence.

Switch row — settings

Auto-decline meetings during focus blocks.

  • Use when a boolean takes effect immediately, with no save button.
  • Avoid switches for anything that needs confirmation.

Glass panels

Glass is for layers that float above content — headers, sheets, toasts, overlays. Never for a full page background or for a card sitting in normal flow.

Hioii00:24:59

End block early?

24 minutes remain on Deep work.

Rest proven · 7h 40m

Streak 12 days

Toast: glass over live content, auto-dismiss, one line of detail.

Glass rules

  • Only over content it overlaps — headers, sheets, toasts, modals.
  • Always add a 1px border so the edge reads on dark backgrounds.
  • Keep text on glass at full foreground weight; never muted-on-muted.
  • Full-page glass backgrounds or nested glass on glass.
09 — Accessibility

Contrast Checker

Test any text/background pair from the brand tokens (or a custom hex) against WCAG 2.1 thresholds before shipping it.

Text
Background

01 — preview

Reclaim your attention

Body copy at 16px. Defend your time, prove your rest, and keep every focus block honest.

Caption / metadata at 12px

01:28:00

Contrast ratio

7.64:1

AAA
AA · body text (4.5:1)Pass
AA · large text 18pt+ (3:1)Pass
AAA · body text (7:1)Pass
AA · UI & graphics (3:1)Pass

Brand rule: pair --muted-foreground only with --background or --card. Violet primary needs white text; cyan accent needs the near-black --accent-foreground.

10 — Resources

Brand Kit Download

One zip with every logo file, the gradient swatches and the full CSS/JSON token export. Everything you need to build on-brand without guessing values.

hioii-brand-kit.zip

v1.0 · logos · gradients · tokens

Download brand kit
Logos
  • hioii-logo.png — primary key visual
  • hioii-wordmark.svg — gradient wordmark
  • hioii-mark.svg — lotus mark
  • favicon.png — 64px square icon
Gradient swatches
  • gradient-primary.svg / .png — 135° violet→cyan
  • gradient-surface.svg / .png — 160° card surface
CSS token export
  • hioii-tokens.css — colors, spacing, radii, glows, motion
  • hioii-tokens.json — same tokens for design tools

Individual files

hioii-tokens.cssCSS hioii-tokens.jsonJSON gradient-primary.svgSVG gradient-surface.svgSVG