Beach to the
streets —
this is Arthouse.
A living style reference distilled from the Arthouse Desktop Home — the colors, type, marks, and components that make up the brand system.
Color Palette
The Arthouse palette leads with high-contrast neutrals and is punctuated by two ownable accents: Brand Orange (#FC4600) for emotional moments and brand identity, and Accent Yellow (#FFE802) for primary calls to action.
Brand & Accent
Neutrals
Surfaces & Hairlines
Overlays
Typography
Three families work together: Universal Sans Display carries the brand voice across display, body, and UI; TradeGothic LT handles condensed chips and stepper numerals; DM Sans appears as a small-caps location label on artist cards.
Primary Family
Universal Sans Display — Black, Bold, SemiBold, Regular
Condensed / Chip
TradeGothic LT — Bold, CondEighteen Bold
Accent
DM Sans — Bold (small all-caps location labels)
Logo & Brand Marks
The Arthouse mark is a house symbol — a square framed by a 4px Black Tea border, holding a centered glyph. Below are the two primary lockups and the rules that govern how the mark appears in the wild.
1:151–1:152), not an SVG. The marks above are placeholder reconstructions of the bordered-house lockup. To use the real artwork, export node 1:150 (the 123×123 wrapper) from Figma as SVG/PNG and drop it in here in place of the inline SVGs.
Clear space
Maintain padding equal to ¼ of the mark's height on all sides. Never crowd with copy or other graphics.
Minimum size
Do not render the framed mark below 32px tall on screen — the 4px border will visually collapse.
Color usage
Use Ink (#0A0A0A) on light surfaces. Use White (#FFFFFF) reversed on Ink, Brand Orange, or photographic backgrounds with sufficient contrast.
Don't
Don't recolor the mark in Accent Yellow, don't drop the border frame, and don't apply effects (drop shadow, gradient, outline).
Components
A working set of the interactive components used throughout the home page. Specs are pulled directly from the Figma file — heights, radii, borders, and type sizes match what's in the comp.
Primary CTAs use Accent Yellow with Ink text. Secondary actions are outline buttons in white. Hero buttons drop to a 44px height with a tighter 5px radius for a more compact look against imagery.
Each major section is anchored by a black 50×50 badge in Universal Sans Display Black 30px and a 1px Ink hairline that runs full-width with an eyebrow + "All →" link.
LTD chips appear on artist cards over photographic backgrounds — the slight transparency and 0.75px border let them sit cleanly on top of imagery without becoming heavy.
Used in "How it Works" and submission flows. Active step is filled in Accent Yellow; inactive steps sit on Hairline grey with Muted text.
Both controls use translucent dark backgrounds with backdrop blur so they read against either light or photographic content. Active dot is white and 24px wide; inactive dots are 10px and 45% white.
Product cards combine an off-white image well with a footer row carrying avatar, title, sublabel, and a love count. The submission card uses a dashed Accent Yellow border to call out a contributor action.