Log InRequest a Demo

Phunware / Brand Frame / v1

The system
behind the brand.

01

Color

Two families — Primary and Accent — plus White and Neutral

Primary
#101F2E

Foreground
Headings · dark panels

Accent
#E99E2F

Fill only
Buttons · links · highlights

White
#FFFFFF

Surface
Cards · panels

Neutral
#010100

Structural
Body copy · rules

Base
#F7F3EA

Off-white background
Sections · cards

Color scale

Primary and Accent are the only two color families in this brand. Both run the full six-step ramp, ultra-light through ultra-dark.

ultra-light
light
semi-light
semi-dark
dark
ultra-dark
--accent
Gold
(default)
--primary
Navy
(default)
--base
Warm neutral
(default)
--neutral
Grayscale
(default)
Gradients
Gold Gradient Light

--gold-gradient-light · --accent 0% → --accent-light 51% → --accent 100% · Hero/eyebrow display text

Gold Gradient Dark

--gold-gradient-dark · --accent-dark 0% → --accent-semi-dark 50% → --accent-dark 100% · Final CTA headline

Gradient text

.gradient-text switches with the background: dark by default, light on .bg--ultra-dark. Force either with .gradient-text--light / --dark.

the front desk.

.gradient-text on .bg--ultra-dark → light

See what your property
has been missing.

.gradient-text → dark (default)
The rule the palette enforces

Primary and White carry the copy. Accent is fill-only — buttons, tags, badges — never a paragraph color.

PairingRatioBody textUse
Primary on White

16.8

AAA · Pass
Headings and body copy on white surfaces
White on Primary

16.8

AAA · Pass
Dark section headings and nav on Primary backgrounds
Accent on Primary

7.5

AAA · Pass
Gold pill button borders and labels on navy
Accent-dark on White

7.9

AAA · Pass
Eyebrow labels and small caps on white surfaces
Accent-dark on Base

7.1

AAA · Pass
Category tags and labels on off-white section backgrounds
Base-dark on White

11.3

AAA · Pass
Secondary body copy alternative to Neutral
Base-semi-dark on White

6.0

AA · Pass
Muted captions and metadata — large text only
Accent on White

2.2

Fail
Why Accent is fill-only — never a text color on light backgrounds
Accent-dark on Primary

2.1

Fail
Too dark on navy — use plain Accent instead on Primary
02

Typography

Two families carried from the Figma

Body · UI · Headings

Instrument
Sans

400 · 500 · 600 · 700. Body, UI, eyebrows, buttons, and most headings.

Bold + Italic display accent

Inria Serif

Inria Serif

700 Bold for stat numbers · 400 Italic for headline accents — paired inline with Instrument Sans.

Heading scale

display-h1 + h1–h6, ratio 1.25 from a 22px base (--h4).

--display-h1
400 Regular · Hero headline

Lorem ipsum dolor sit amet.

--h1
700 Bold · Section headline

Lorem ipsum.

--h2
500 Medium · Feature/vertical titles

Dolor sit consectetur.

--h3
500 Medium · Not yet used

Adipiscing elit sed do eiusmod.

--h4
600 SemiBold · Card titles

Lorem ipsum dolor sit amet consectetur adipiscing elit sed

--h5
500 Medium · Not yet used
Tempor incididunt ut labore.
--h6
500 Medium · Not yet used
Ut labore et dolore magna.
Text scale

text-xxl – text-xs, ratio 1.333 from a 15px base (--text-m).

--text-xxl
400 Regular · Not yet used

Lorem ipsum dolor sit amet consectetur.

--text-xl
400 Regular · Not yet used

Adipiscing elit sed do eiusmod tempor.

--text-l
400 Regular · Lead/subhead paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit — sed do eiusmod.

--text-m
500 Medium (eyebrow) / 400 Regular (body) · Eyebrow labels, body copy

Lorem Ipsum Dolor Sit

Consectetur adipiscing elit sed do eiusmod tempor incididunt.

--text-s
700 Bold · Button/CTA labels

Lorem Ipsum Dolor

--text-xs
400 Regular · Captions, footer links

Lorem ipsum dolor sit amet consectetur elit.

03

Buttons

Button component — Style: Outline / Arrow / Solid · Color: Primary / Accent · optional arrow icon

Variants
Learn More Explore the Platform Read Request a Demo
Hover states — outline fills solid, text/icon inverts
Explore the Platform
On Primary
Log InSee the PlatformRead the full story
See the Platform

Every pill button on the homepage is an outline — a 1.5px keyline in the pairing color, never a solid fill. Radius-s throughout. Card footers also use a bare text + arrow-icon link, with no outline or fill at all.

There is no filled/solid pill-button variant on this site. The outline pill is the CTA/nav pattern; the naked text + icon link is used for lighter-weight in-card actions (e.g. "Read →").

Accent/gold only ever appears on Primary (dark navy) backgrounds — nav, hero, verticals, footer. It never appears as an outline or text color on White or Neutral surfaces.

04

Geometry & Space

Radius, spacing, elevation and layout are live ACSS tokens — values below read from the stylesheet.

Radius and spacing

Radius
--radius-none
--radius-xs
--radius-s
--radius-m
--radius-l
--radius-xl
--radius-xxl
--radius-circle
Elevation
--box-shadow-1
Card
--box-shadow-2
Float
Spacing scale
--space-xs
--space-s
--space-m
--space-l
--space-xl
--space-xxl

Drawn at actual size. --gutter and --content-width govern the page grid.

Layout
--content-width
--gutter
--content-gapvar(--space-m) ·
--container-gapvar(--space-xl) ·
--grid-gapvar(--space-m) ·
05

Patterns

Decorative backgrounds — built as Automatic.css Surfaces, each asset a CSS repeating gradient

Lines Dark

Horizontal hairlines stacked behind hero headlines on dark panels. 90 rows, 9px gap, full section width.

bg var(--primary) · line var(--primary-semi-dark) · 1px stroke · 25% mix

Class: .surface-lines-dark

background-color: var(--primary);
background-image: repeating-linear-gradient(
  to bottom,
  color-mix(in oklab, var(--primary-semi-dark) 25%, var(--primary)) 0px,
  color-mix(in oklab, var(--primary-semi-dark) 25%, var(--primary)) 1px,
  transparent 1px, transparent 10px
);
Lines Light

Same hairlines on the base cream panel — used behind Final CTA sections instead of the dark hero.

bg var(--base) · line var(--accent-semi-light) · 1px stroke · 25% mix

Class: .surface-lines-light

background-color: var(--base);
background-image: repeating-linear-gradient(
  to bottom,
  color-mix(in oklab, var(--accent-semi-light) 25%, transparent) 0px,
  color-mix(in oklab, var(--accent-semi-light) 25%, transparent) 1px,
  transparent 1px, transparent 10px
);
Checker

Grid of outlined squares behind logo strips and stat rows on white panels. 48px tiles, edge to edge.

bg var(--white) · line var(--base) · 1.44px stroke · 48px tile

Class: .surface-checker

background-color: var(--white);
background-image:
  repeating-linear-gradient(to right,
    var(--base) 0px, var(--base) 1.44px,
    transparent 1.44px, transparent 48px),
  repeating-linear-gradient(to bottom,
    var(--base) 0px, var(--base) 1.44px,
    transparent 1.44px, transparent 48px);
Rings

Concentric circles centered behind the homepage platform section header, on the base cream panel.

bg var(--base) · line var(--white) · 1px stroke · ~110px ring spacing

Class: .surface-rings

background-color: var(--base);
background-image: repeating-radial-gradient(
  circle,
  var(--white) 0px, var(--white) 1px,
  transparent 1px, transparent 110px
);