Fixora

01Colors

• Warm stone#F3F3F1Background · 92.5% · WhiteApp canvas and sidebar share this tone, split only by a vertical hairline. Inset tiles inside cards are a lighter #F6F6F4.
• Card white#FFFFFFSurface · WhiteCards, search and date pills, icon buttons, tooltip, nav count badges, icon tiles in card headers.
• Graphite#1D1D1FText · 0.8% · BlackAll primary text and numbers (renders about #18181A). The same near-black fills the "Create work order" CTA, the active Dashboard pill, the logo tile and the Opened series markers.
• Muted gray#6B6A6DMuted text · 0.6% · GraySubhead, KPI labels, legend labels, location lines and sidebar icons. A lighter #87878A is used for stat labels, axis ticks, placeholders and activity meta.
• Signal blue#2C74C6Accent · 0.7% · BlueResolved series dots, New status block and dot, blue hex cells and the filled AI tile. Deeper #1B508A sets blue text on #E7EFFB (the "3 new" pill, the "Predicted failure · Ferncliff Court" line).
• Apricot#E9A568Chart · 0.7% · OrangeIn progress status, the orange hatch around the hovered day, at-risk dots, orange hex cells and the logo dot. A lighter peach #F4D2AF fills some hex cells, and the at-risk pill is #FBEFE3 with #A35C1F text.
• Sky#AACBEDChart · 0.8% · BlueScheduled status: block-bar segment, legend dot and activity status dot.
• Cool gray#B4B3B8Chart · 3.9% · GrayCompleted status segment, the gray hatch lines of the backlog band and the gray hex cells. Empty hex cells are #EEEEEC.
• Alert red#DD4438Status · RedUrgent dot, notification dot on the bell, the filled up-chevron circle and "+3 this week". Red chips use a #FBE9E7 tint with #A8271E text ("23 urgent", "+6.4% vs prior", "Urgent").
• Health green#2D9E68Status · GreenFilled up-chevron circle and "+3 pts" on the health score. The SLA pill is #E5F4ED with #1A6944 text ("94% within SLA").

A warm-neutral base: #F3F3F1 canvas, white cards, #F6F6F4 inset tiles, #EEEEEC neutral pills and #E7E7E5 hairlines. Near-black #1D1D1F is effectively the brand color: active nav, primary CTA, logo tile and every number. Data uses a four-hue status set (signal blue, apricot, sky, cool gray) that repeats identically across the range chart, block bar, hex map, legend dots and activity statuses, so a color means the same status everywhere. Red and green are reserved for urgency and deltas. Every chip is a tint plus a dark text pair in its own hue (red #FBE9E7/#A8271E, green #E5F4ED/#1A6944, blue #E7EFFB/#1B508A, apricot #FBEFE3/#A35C1F). Red follows meaning, not direction: a cost increase of +6.4% is red because higher costs are bad. The orange dot in the logo echoes the apricot data color. Saturation is low and contrast comes from black type on near-white rather than from color. The flat #D9D9D7 bezel around the app is presentation, not UI.

02Typography

Specimens use a stand-in face of the same class and weight.

Pairing

One family, two weights. Regular sets everything that is content or data (greeting, numbers, body, labels); medium sets the things that name a container or can be acted on (card titles, buttons, pills, list titles). Three text tones (#1D1D1F, #6B6A6D, #87878A) handle the rest. It works because big regular numerals look calm and editorial instead of shouting, while the medium titles still anchor each card.

Hierarchy

From largest down: greeting and KPI numerals (about 36–40px, 400), stat strip numbers (about 30px), legend counts (about 24px), card titles (about 18px, 500), body and nav (about 15–16px), then labels and axis ticks (about 14px, gray). Size carries the data hierarchy and weight carries the structure. Lines are short; the longest is the AI insight at about 55 characters per line.

03Layout

Two tight, zoomed crops of one wide dashboard sit inside a flat #D9D9D7 rounded bezel. The app canvas is warm #F3F3F1 with a large outer radius. The sidebar shares the canvas color and is split off by one vertical hairline, with no panel of its own. The main area opens with a header row (greeting and date summary left, toolbar right) and a borderless row of four big KPIs. Below is a 3-column card grid. Row 1 holds Maintenance overview (2 columns) and Work order status (1). Row 2 holds Property overview, Fixora AI insights and Recent activity. Every card has the same header strip (icon tile, title, one action) above a full-width hairline.

Alignment

left

Density

airy

Width

framed

Corners

pill

Depth

layered

Grid

The sidebar is about 17% of the width; the main column has 4 equal KPI columns with no containers, then a 3-column card grid where Maintenance overview spans 2. Inside the cards: a 4-up stat strip, a 7-day x-axis (Oct 12 to Oct 18), a 2×2 legend, a 3-up row of mini stat tiles, and stacked activity rows.

Spacing

Generous. The sidebar has about 24px of padding and rows of about 48px. Header, KPI row and card grid are separated by about 32–40px, and cards by about 20px. Card headers are about 64px tall with a hairline below, and card bodies have about 24px of padding. Pills and buttons are fully rounded, cards about 24px, inset tiles and the tooltip about 16px. Depth comes from three surface tiers (stone canvas, white card, stone inset) plus hairlines. The only real shadow is under the chart tooltip.

04Sections 12

1. 01
   Sidebar: brand and workspace

   Black "F." logo tile, "Fixora" and "Brackwater Homes", with a sidebar-collapse icon on the right.

2. 02
   Sidebar: Operations group

   Dashboard (active: full-width black pill, white icon and label), Properties, Work orders (badge 137), Maintenance, Vendors.

3. 03
   Sidebar: Analytics group

   Reports and Insights (badge 3). Gray outline icons with ink labels.

4. 04
   Sidebar footer card

   White rounded card pinned near the bottom with a peach tile holding an orange home icon. It is cropped, so its content is unknown (likely a property switcher or plan card).

5. 05
   Page header

   "Good morning, Nizam" in large regular type, with the gray line "Sunday, 18 October · 23 urgent work orders need attention" below.

6. 06
   Top bar

   Inline with the greeting on the right: "Search properties or orders" pill with a "/" key hint, a "Sep 19 to Oct 18" date-range pill, a circular bell with a red dot, and the black "Create work order" pill.

7. 07
   KPI row

   Four borderless stats on the canvas, each a gray label, a big number and an annotation pill: Total properties 48 (1,236 units), Open work orders 137 (23 urgent), Maintenance costs $84,260 (+6.4% vs prior), Resolved requests 452 (94% within SLA).

8. 08
   Chart panel: Maintenance overview

   Wide card. Header: wrench tile, title, legend (Opened, Resolved, Backlog gap) and a "Weekly" dropdown. Stat strip: Requests opened 134, Resolved 97, Repair costs $19,430, Avg. resolution 2.6 days. Below is the hatched range chart with an Oct 15 hover tooltip.

9. 09
   Chart panel: Work order status

   Clipboard tile, title and arrow-out button. An "Overdue work orders: 9" pill with "+3 this week" in red, a hatched proportional block bar, and a 2×2 legend: New 38, In progress 54, Scheduled 45, Completed 97.

10. 10
    Chart panel: Property overview

    Building tile, title and arrow-out button. "Portfolio health score" 86 /100 with a green "+3 pts" and a peach "3 properties at risk" pill, above a hexagon tile map that is cropped at the bottom.

11. 11
    AI insights panel

    Blue sparkles tile, "Fixora AI insights" and a "3 new" pill. One insight: "Predicted failure · Ferncliff Court" with an alert icon, a two-line explanation, and three inset tiles: 87% Failure risk, $6,400 If it fails, $1,150 Service now.

12. 12
    Recent activity

    Clock tile, title and "View all >". Rows: Boiler pressure loss (Ferncliff Court, Plant room · Tomas Brandt · 12 min ago · Urgent · In progress) and Leaking kitchen tap (Saltworks Lofts, Unit 4B · Ines Okafor · 38 min ago · Medium · Scheduled). The list continues below the crop.

05Components 28

• App frame

  A flat #D9D9D7 bezel with large rounded corners wraps the app like a display without hardware details. The app canvas has its own large radius inside it.

• Brand block

  About 56px black rounded-square tile with a white F and an apricot dot, the medium wordmark, the workspace name in gray, and a sidebar-collapse icon.

• Sidebar group label

  "Operations" and "Analytics" in sentence-case gray, with no dividers.

• Nav item

  About 22px gray outline icon with a regular ink label and no background.

• Active nav pill

  Full-width #1D1D1F pill with a white icon and label. It is the heaviest shape in the sidebar and visually rhymes with the CTA.

• Nav count badge

  White pill or circle with a hairline border and gray numerals ("137", "3").

• Search pill

  White, hairline border, fully rounded, gray placeholder "Search properties or orders", and a circular stone "/" keyboard hint on the right.

• Date range pill

  White pill with a calendar-dots icon, medium "Sep 19 to Oct 18" and a gray chevron.

• Icon button

  White circle with a hairline and an ink bell, plus a red notification dot overlapping the top-right edge.

• Primary CTA

  Black #1D1D1F pill with a white plus and a medium "Create work order" label. Flat, no shadow.

• KPI stat

  No container: a gray label above a big regular number, with an annotation pill on the baseline to its right.

• Annotation pills

  Fully rounded tint plus dark text: neutral #EEEEEC ("1,236 units"), red with a dot ("23 urgent"), red delta ("+6.4% vs prior"), green ("94% within SLA"), blue ("3 new"), apricot with a dot ("3 properties at risk").

• Card

  White with a 1px #E7E7E5 border and about 24px radius, no shadow. A header strip and a full-width hairline sit above the body.

• Card header icon tile

  About 40px white rounded square (about 12px radius) with a hairline and an ink outline icon (wrench, clipboard, building, clock). The AI card uses a filled blue tile with white sparkles instead.

• Card header actions

  One per card: an inline legend with a "Weekly" dropdown (sliders icon and chevron), a circular arrow-up-right button, a "3 new" pill, or a "View all >" text link.

• Chart legend

  Black dot "Opened", blue dot "Resolved" and a tiny hatched square "Backlog gap", all with gray labels.

• Stat strip

  Four label and number pairs in a row inside the chart card, with gray labels and numbers at about 30px.

• Chart tooltip

  White card, about 16px radius, with a large soft shadow. A gray date header ("Thu, Oct 15, 2026") over rows of swatch or icon, label and right-aligned value: black square Opened 26, blue square Resolved 18, dollar-circle Repair cost $3,640.

• Hover markers

  On the hovered day the dots grow into rounded squares, a dashed vertical crosshair drops to the axis, and the axis label turns ink.

• Overdue alert pill

  Wide #F6F6F4 pill with a hairline: gray "Overdue work orders:", a big "9", a red filled circle with a white up-chevron and red "+3 this week".

• Delta indicator

  Small filled circle with a white chevron-up, followed by colored text: green "+3 pts", red "+3 this week".

• Status legend grid

  2×2 grid of a colored dot, a gray label and a large ink number aligned right in each cell.

• Inset stat tiles

  Three #F6F6F4 rounded tiles (about 16px radius), each a medium number over a gray label: "87% Failure risk", "$6,400 If it fails", "$1,150 Service now".

• Insight headline

  Blue rounded alert-triangle icon followed by medium blue "Predicted failure · Ferncliff Court".

• Activity row

  Stone rounded icon tile (thermometer, droplet), a medium title, a gray location and a lighter "person · time" meta line. On the right, a priority pill sits above a status dot and label. Hairline dividers between rows.

• Priority pill

  "Urgent" in dark red on a red tint; "Medium" in ink on neutral #EEEEEC.

• Status dot label

  Colored dot and gray label: apricot "In progress", sky "Scheduled".

• Sidebar footer card

  White rounded card with a hairline and a peach #FBEFE3 tile holding an apricot home icon (cropped).

06Graphics 5/14

• Dashboard / product UI

  Yes. One home dashboard for a property-maintenance product, shown as two zoomed crops: sidebar, greeting header with toolbar, KPI row, Maintenance overview chart, Work order status, Property overview, AI insights and Recent activity.

• Charts & data viz

  Three custom charts. (1) Maintenance overview is a range or band chart between an Opened series (black dots) and a Resolved series (blue dots) across Oct 12–18. The gap between them is filled with thin gray diagonal hatching that turns orange around the hovered day. It has no y-axis and no gridlines, only a dashed vertical crosshair, enlarged rounded-square markers and a floating tooltip. (2) Work order status is a proportional block bar: four tall rounded rectangles whose widths match the counts (38, 54, 45, 97), each a flat color with faint white diagonal hatching. (3) Property overview is a hexagon tile map (hex waffle) with empty #EEEEEC cells and filled cells in gray, blue, peach and apricot. It is cropped at the bottom, so no legend is visible.

• Icons

  Outline icons with rounded caps and about a 1.5px stroke, very likely Hugeicons Stroke Rounded (the pentagon home and the sparkles are tells). The set: dashboard grid, building, clipboard, wrench, user group, chart-in-square, bulb with sparkle, sidebar toggle, calendar with dots, bell, sliders, clock, thermometer, droplet, alert triangle, dollar circle, arrow up-right, chevrons and plus. Gray in the sidebar, ink inside white bordered tiles on card headers and stone tiles in list rows, white on the black active pill and the blue AI tile, and apricot on the peach sidebar tile.

• Grid lines / patterns

  Diagonal hatching is the signature pattern. Thin gray lines fill the backlog band of the range chart, orange lines mark the hovered segment, faint white lines stripe every status block, and a tiny hatched square serves as the "Backlog gap" legend key. The honeycomb of the hex map is a second geometric pattern.

• Device or browser frames

  A flat warm-gray (#D9D9D7) rounded bezel surrounds the app like a tablet or monitor with no camera or buttons, and the app canvas sits inside with its own large radius. No browser chrome or window dots.

Not usedPhotography · Illustration · 3D renders · Logo cloud · Avatars / people · Gradients · Texture, grain or pixel · Cursors / pointers · Maps

07Motion

SubtleFrom stills; motion is inferred from cues

• implied
  Chart hover scrub

  Oct 15 is caught mid-hover: a dashed crosshair, dots morphing into larger rounded squares, the hatch around that day recolored orange, the axis label turned ink, and a tooltip card with that day’s values.

• implied
  Sidebar collapse

  The toggle icon beside the brand implies an animated collapse to an icon rail.

• implied
  Dropdown popovers

  The date range pill and the "Weekly" control both have chevrons, which implies popovers that open in place.

• implied
  Notification badge

  The red dot on the bell implies live updates and possibly a pulse when new events arrive.

• implied
  Keyboard focus

  The "/" hint in the search pill implies a shortcut that moves focus into search.

• implied
  Card navigation

  The circular arrow-up-right buttons and "View all >" imply hover states and transitions to detail pages.

08Copy

Good morning, Nizam

Sunday, 18 October · 23 urgent work orders need attention

Tone

Warm and plain: a first-name greeting, then concrete counts and consequences. The AI copy is specific and quantified ("likely to fail within 21 days, based on 4 pressure drops since Oct 2"), and the cost tiles frame a decision ("$6,400 If it fails" against "$1,150 Service now").

09Style

A calm, premium operations cockpit: warm stone neutrals, a black pill CTA and print-like hatched charts make a maintenance backlog feel under control.

Accessibility

Primary text is near-black on near-white (about 15:1), and the large numerals are very legible. The secondary gray #6B6A6D passes (about 4.8:1 on the canvas, 5.3:1 on white). The lighter #87878A used for stat labels, axis ticks, placeholders and activity meta does not (about 3.6:1 on white, 3.2:1 on the canvas). The green "+3 pts" (about 3.4:1) and red "+3 this week" (about 4.0:1) are borderline; tinted chips use dark text and pass. Status dots always carry a text label and the block bar has a numbered legend, but the hex tile map is color-only with no legend in view, and blue serves both the Resolved series and the New status. Hatching adds a non-color cue to the chart areas. No focus states are shown; the "/" search hint suggests keyboard support.

10Takeaways