One system synthesized from Crasher's best surfaces: top-lit matte cards, 135° accent gradients, glass chrome over imagery, and generous white space. Every element carries a subtle physicality — nothing flat, nothing loud.
Three materials with strict roles: matte plastic for content surfaces, frosted glass for floating chrome (nav, overlays on photos), pressed wells for anything you type into. If you know the material, you know how it behaves.
Elevation is meaning: e1 rests, e2 is interactive, e3 floats, e4 is modal. Color gradients (135°) are reserved for state and identity — booking states, space types, the brand — never for filler.
A 4px spatial scale with big steps between sections. One primary action per view, warm accent used at most once per screen. Guests and hosts each get an obvious "home" in the nav.
Bunkio Blue leans violet so it never reads as stock Bootstrap. Ink neutrals are blue-tinted for cohesion. Sunrise is the single warm accent for hospitality moments (CTAs like "Become a host", deals).
Inter, tight tracking on display sizes. Weight carries hierarchy; size steps stay modest.
Top-lit 180° gradient + 1px bevel highlight + ambient shadow. The default surface for cards, tiles, panels.
Blur 16px + saturation boost. For chrome that floats over content: nav, price tiles on photos, dropdowns, sticky bars.
Inset shadow, sunken tone. Anything that receives input: text fields, calendar day cells, segmented tracks.
A finish, not a fourth material: faint 135° brand-tinted hairline stripes (.pinstripe, ink token --pinstripe-ink) laid over matte. It marks a surface whose content is not settled fact — the stripes whisper "provisional" the way a blueprint does.
Planned surfaces — the feature isn't live yet. Always pair with the ◇ roadmap badge (apps may alias this as .is-planned).
AI-authored content — advice, drafts, and messages the system wrote. Pair with the AI mark / speech alert so the source is explicit.
Projections — forecasts and estimates that haven't happened yet. The stripes come off the moment numbers become actuals.
Rules. Stripe ink stays ≤ ~5% opacity in the app's brand hue; the period is 9px/18px at 135° — the angle already reserved for state & identity gradients. The badge that explains why the surface is striped is mandatory: the finish is a cue, never the whole message. Never stripe settled records, forms, or anything the user must read closely for long stretches.
Dual-layer, blue-tinted shadows. Each step has a role — don't mix roles.
Full component sheet — every input, state, and modal — on the Components page.
Top level: Explore · Stays · Messages · Saved. "Stays" (dashboard + reservations) is promoted out of the profile dropdown — where someone lives is their home base, not a settings item. The word is deliberate: Bunkio is for living affordably (students, nomads, fresh starts, the frugal), not vacationing — so no "Trips", no "Travel".
Profile dropdown keeps only identity things: Profile, Account settings, Waitlists, Help, Sign out.
A single mode pill in the nav ("Stays / Host") swaps context instead of hiding host links in a crowd. Host top level: Today · Calendar · Listings · Inbox · Earnings.
Non-hosts see the warm accent "Become a host" in the same slot — one obvious path in.
See it live in the Home mock nav bar.