Styleguide
Every swatch, size, button, card and bar on this page is the token or component the site itself uses. Change one in the code and it changes here and on every page at once.
Crystal theme onyx-edge · Urbanist 400–700 · values are read from your browser at this width.
01 Colour
Site roles in globals.css, each drawn from an onyx-edge Crystal token. The accent is the theme's cool cyan, not its near-black primary, which would disappear on this surface.
--bg…--bg-2…--bg-3…--crystal-brand-deep…--fg…--fg-2…--fg-3…--line…--line-strong…--accent…--accent-hover…--warm…--crystal-color-crystal-status-error…--radius…--ease…--mono…--arrive-gap…--arrive-dur…02 Type
One family, Urbanist, for everything but the eyebrows and references, which use the system mono. Sizes are fluid; the numbers under each line are what your browser is drawing right now.
Display.display
A studio that ships.
…H1.h1
…H2.h2
…Work name.work-name
…H3.h3
…Lead.lead
These are Artasce Creative's own ventures — designed, built and run by the studio.
…Tagline.work-tag
French-inspired fashion, run by a staffed AI team.
…Bodyp
A full rebuild is never a requirement. Sometimes the right move is one page, one flow or one integration.
…Eyebrow.eyebrow
01 Fashion e-commerce
…Mono.mono
AC-M1Q7ZK
…Caption.note
No mailing list, no automated sequence.
…Split headline.h1 + .dim
03 Buttons & links
Hover and focus columns are the site's own :hover and :focus-visible rules, applied on purpose. Every control is also live; point at it or tab to it.
.btn-primary.btn-ghost.btn-primary .btn-sm.btn-primary .btn-lgIn running text
No mailing list, no automated sequence. See how your details are handled.
See it in Mademoiselle and Modolla.
In the studio modolla.app
04 Forms
Crystal UI Input, Textarea and Select, styled by the site's .form rules, exactly as on Contact. Error copy is the copy the inquiry endpoint returns.
Enter an email we can reply to.
A sentence or two about what you need, please.
Error state (the live form never rejects a budget; shown for completeness).
We could not reach the studio. Check your connection and try again.
After a successful send
Your reference is AC-M1Q7ZK. A person reads every inquiry and replies from the studio. Nothing has been booked or charged.
05 Cards & rows
The venture row from Work, live and in-studio, and the field-note card from the Journal, fed by the same WordPress query.
Work row, live
01 Fashion · E-commerce
The edit is everything.
A curated online boutique for young women who dress with intention — high fashion mixed with street style, written with an editor's confidence.
Work row, in the studio
05 Photography · Booking
Golden hour portrait sessions.
Cinematic lifestyle photography and video portraits — from the live session to a curated, physical print. The identity is finished; the booking site is being built.
Field-note card
06 Header
Crystal CrystalNav through the site's SiteNav: sticky, transparent over the hero until scrolled, then solid with blur and a hairline, condensing 80 to 64 px. Under 900 px it becomes a drawer.
At rest
Header specimen
A studio that ships.
Scroll inside this frame. The header goes from transparent to solid with a hairline and condenses from 80 to 64 pixels.
The live header at the top of this page does the same thing against the page scroll.
Built by Artasce Creative.
Scrolled
Header specimen
A studio that ships.
Scroll inside this frame. The header goes from transparent to solid with a hairline and condenses from 80 to 64 pixels.
The live header at the top of this page does the same thing against the page scroll.
Built by Artasce Creative.
07 Footer
SiteFooter, the same component that closes this page and every other one.
08 Mark & icons
The AC ligature takes currentColor, with the c in the accent. Icons are inline SVG in components/icons.tsx, sized in em; no icon font, no emoji glyphs.
