SplitStay · Design System · v2.0
One reference for every touchpoint — website, app, pitch deck, social, print. Dark first. Orange is reserved. Whitespace builds trust.
01 — Color System
Six colors: a core duo (Orange + near-black) plus a supporting blue family (Cool Steel, Alice Blue, Bright Sky) and a secondary background tone. At the center of the system: Orange is energy, action, and emphasis. Bright Sky is trust, coordination, and connection. They alternate through every user journey — neither is decoration; both carry meaning.
Tint / Shade Ramps
Calculated via flat HSL-lightness shift for mathematical consistency — not eyeballed. Every ramp uses the same logic so each color scales predictably.
| Token | Hover / Light | Base | Active / Pressed | Disabled-adj. |
|---|---|---|---|---|
| --color-orange | #FFB626 | #FCA700 | #C98500 | #966300 |
| --color-bright-sky | #5CBCE1 | #3AAEDB | #2393BF | #1B7294 |
| --color-cool-steel | #A5B9C9 | #8CA5BA | #6C8CA7 | #54728C |
| --color-alice-blue | — (near-white, no lighter) | #EEF8FC | #C3E6F4 | #97D4ED |
Color Duo — Orange × Bright Sky
These two colors form SplitStay's visual backbone. They're not interchangeable — each carries distinct meaning. Use them in alternation to create rhythm through multi-step flows. Never treat Sky as merely "a secondary version of orange."
State / Functional Colors
Utilitarian only — not part of brand identity. These exist so error/success states never misuse orange. They appear in product UI only, never in marketing or brand contexts.
Dark Mode vs. Light Mode — Semantic Tokens
Dark mode is canonical. Light mode uses the same role relationships but different values — shifted to the active/pressed shades already defined in the ramp, not invented new colors.
02 — Typography
Two fonts. One role each. Headlines: Bebas Neue. Body: Inter. Bebas Neue carries authority and presence — it's the brand voice made visible. Inter handles everything that needs to be read, not just seen.
Type Scale
03 — Spacing
"Whitespace Builds Trust" — this is the token system behind that rule. 4px base, consistent multipliers. Never use arbitrary pixel values outside this scale.
04 — Effects
Shadows anchor depth. Glows are orange or sky — never just gray. The orange-core / Bright-Sky-ambient glow effect is dark-mode only; light mode uses flat fills and borders.
Border Tokens
05 — Components
Every component below has copyable code — but "copy" means two different things depending on what you're doing with it.
Buttons
One primary CTA per view. Orange is the action color — never used for more than one button on the same surface. Secondary is a Bright Sky outline that fills solid on hover. Ghost for tertiary actions.
| Variant | Live Preview | Background | Text | Use |
|---|---|---|---|---|
| Primary | --color-orange (#FCA700) | #050505 (near-black on orange) | Main CTA, one per view | |
| Secondary | Transparent, fills solid on hover | --accent-secondary (Bright Sky) | Secondary actions | |
| Ghost | Transparent | --text-secondary | Tertiary / low-emphasis | |
| Disabled | --color-cool-steel at low opacity | --text-secondary | Disabled state |
Button Sizes
Secondary — Orange Override
Same interaction pattern as the default Secondary: outline at rest, solid fill with glow on hover. Swap to this variant when the surface calls for the orange accent instead of Bright Sky, e.g. the B2B navigation bar.
Glow Modifier
Add .btn-glow to a Primary button for a persistent halo, reserved for hero-level CTAs that need extra pull. Dark mode only, it is switched off automatically in light mode since the same glow reads as a muddy smudge on a white background.
Header
Logo and nav links are grouped into one left-aligned cluster; actions (CTA, theme toggle) sit on the right, a plain two-group flex row with justify-content: space-between. On the live site it is also position: sticky with the translucent, blurred background shown here so it reads correctly over a hero image; sticky positioning is intentionally left out of this demo so it doesn't compete with this document's own sticky header. It collapses to a stacked, centered layout below 768px.
B2C header: default Secondary (Bright Sky) CTA.
B2B header: same component, CTA swapped to the Secondary — Orange Override variant so it doesn't clash with the orange-forward B2B palette.
Footer
The logo sits on its own line above a second row holding the tagline, nav links, and social icons together, so they read as one aligned line rather than the nav drifting up to the logo's baseline while the tagline sits alone underneath. Copyright is centered on its own row at the bottom. Link lists differ slightly by page (B2B adds a Partner with us link) and both always end with Privacy policy and Terms last.
Cards
Cards use the secondary BG (#161F27 dark / Alice Blue light). Border radius is 16–20px. Orange borders are reserved for emphasized/featured cards. Hover lifts the card 3px.
Badges
Icons
Outline style, monoline, consistent 1.5px stroke. Accent color orange (or Bright Sky for secondary context). Never filled, multi-color, or cartoon. Recommended libraries: Lucide or Phosphor.
Icon Circles
A recurring motif from SplitStay's product and pitch assets. Circular frames with a branded border and matching icon — orange for action/energy, sky for trust/coordination. Used heavily in journey flows, feature lists, and profile moments.
Form Inputs
FAQ Accordion
Native <details>/<summary> elements, no custom JS required for the open/close mechanic itself. On the live site, a small script keeps only one item open per list at a time; that behavior is app logic, not a styling concern, so it is not reproduced in this static reference. First item defaults open per list.
Verified travelers matched to your event, dates, and preferences. Every profile is reviewed before it is shown to you.
No. Matching for a shared neighborhood or hotel is just as valid as matching for a shared room. You choose your comfort level.
You can request a new match at any time before you commit. There is no obligation once a conversation starts.
Contact Form Card
Used for the B2B lead-capture form. The card sits one elevation step above its section (--bg-card-hover) so it reads as its own component rather than blending into the background. Border color carries the same meaning it does everywhere else in the system: orange in dark mode, Bright Sky in light mode. In light mode, the submit button matches the card's own Bright Sky border rather than defaulting to Orange, so the card reads as one cohesive blue-accented unit. This is a scoped exception: Orange stays the one action color everywhere else in the system.
06 — Accessibility
All text/icon color uses are WCAG AA minimum. Brand colors at base value fail on white — this is expected; light mode substitutes the pressed/active shade which passes. Contrast ratios below were calculated using the WCAG 2.1 relative luminance formula.
#7A7A7A for small body text on #050505 — borderline at small sizes. Use --text-secondary (#B5B5B5) instead for any muted text that needs to stay reliably readable.#FCA700, #3AAEDB, #8CA5BA) are only permitted as fill surfaces in light mode. Their pressed-shade equivalents carry the contrast requirement for text/icon roles.--accent-primary outline with 3px offset on focus-visible. Never remove focus indicators without a visible alternative. Glow effects in dark mode reinforce, not replace, the outline.07 — Brand Voice
Brand voice is constant. Tone adapts based on context.
7.1 — Core Brand Voice
SplitStay should always feel — regardless of context, channel, or audience:
7.2 — Tone Adapts by Context
Same core personality, different surface tone depending on who's being addressed. Tone adapts along three axes: event type · user type (attendee vs. organizer) · stage in the journey.
7.3 — Using This in Practice
Before writing copy for a new context, check which of the three axes apply — event type, user type, and journey stage — and calibrate tone accordingly, while keeping the five core traits constant underneath.
A more detailed voice/tone playbook with do's, don'ts, and sample copy belongs here once there's more real product copy to generalize from.
08 — Image Style
Ready-to-use prompts for any AI image generation tool. They define lighting, color grading, and mood only — not subject matter. What's being photographed (event, website hero, onboarding screen) is determined by context each time. Copy-paste and add your scene.
Color Vocabulary
| Name used in prompts | Hex | Swatch |
|---|---|---|
| SplitStay Orange | #FCA700 | |
| Cool Steel | #8CA5BA | |
| Bright Sky | #3AAEDB | |
| near-black | #050505 | |
| deep charcoal-blue | #161F27 | |
| Alice Blue | #EEF8FC |
With Cool Steel, Alice Blue, and Bright Sky in the system, an all-warm photo treatment will fight the palette. These prompts are subject-agnostic — the lighting and grading logic is what stays constant. Orange as a sparing accent. Cool blue present at similar frequency. Never an all-warm frame.
09 — Implementation Notes
Two notes for anyone building with this system — areas where the right call is context-dependent and worth spelling out in advance.
Referencing a partner's name or event in marketing is fine once a partnership exists. Third-party logos, banners, or franchise-character IP are a separate matter and are not covered by a partnership alone — confirm legal clearance before using them in any partner-facing asset.
If no logo SVG (icon + wordmark) exists yet for a given use case, treat the wordmark as text set in Bebas Neue, SplitStay Orange, until a finalized logo asset is available.