Free shipping over $150. 30-day returns, no questions. Drop 07: Heavyweight — Friday 10:00 PT. Made in small runs. Restocks are rare.

RAWCUT

Rawcut design system · v1.0

Styleguide

Every token, type style and component in the kit, rendered live from app/globals.css and components/ui. No radius, 2px ink lines, hard offset shadows, one acid accent.

RAWCUT
ThemePaper (light) · Ink (dark)
01

Colors

Twelve tokens, defined on :root (paper) and .dark (ink). Use them as Tailwind colors: bg-ink, text-muted, border-line-soft. The big swatch shows the current theme.

  • paper

    Page background

    Light
    L #f3f2ee
    Dark
    D #0b0b0b
    --r-paper

  • paper-2

    Image wells, hover rows, raised areas

    Light
    L #e7e6e0
    Dark
    D #161616
    --r-paper-2

  • card

    Cards, fields, menus, modals

    Light
    L #ffffff
    Dark
    D #121212
    --r-card

  • ink

    Text, 2px borders, hard shadows, inverted bands

    Light
    L #0a0a0a
    Dark
    D #f3f2ee
    --r-ink

  • muted

    Secondary text, meta

    Light
    L #5c5c58
    Dark
    D #a6a5a0
    --r-muted

  • subtle

    Placeholders, disabled sizes

    Light
    L #9a9993
    Dark
    D #6b6a66
    --r-subtle

  • line

    Rules (same as ink), grid-rules gaps

    Light
    L #0a0a0a
    Dark
    D #f3f2ee
    --r-line

  • line-soft

    Hairlines inside menus and lists

    Light
    L #cfcec8
    Dark
    D #2c2c2a
    --r-line-soft

  • accent

    The one acid accent: CTAs, highlights, hover

    Light
    L #d2ff1f
    Dark
    D #d2ff1f
    --r-accent

  • accent-fg

    Text on accent (always ink)

    Light
    L #0a0a0a
    Dark
    D #0a0a0a
    --r-accent-fg

  • sale

    Sale prices, discounts, errors

    Light
    L #ff3d12
    Dark
    D #ff5a33
    --r-sale

  • sale-fg

    Text on sale

    Light
    L #0a0a0a
    Dark
    D #0a0a0a
    --r-sale-fg

Component aliases

@theme inline

canvas
→ paper
surface / solid
→ card
raised / sunken
→ paper-2
fg
→ ink
line-strong
→ line
accent-hover
→ ink
accent-soft
→ paper-2
danger
→ sale
success
→ #1f9d55 (fixed)
warning
→ #b26a00 (fixed)

Pairings

Text on fill

Paper on ink

Ink on accent

Ink on sale

Muted on paper-2

02

Type

Archivo (variable width) for everything you read, Geist Mono for labels and numbers. Display styles are condensed, heavy and uppercase; sizes clamp between phone and desktop.

  • .text-mega

    Page titles, manifesto lines

    Font
    Archivo
    Weight
    900
    Width
    62%
    Size
    clamp(3.5rem, 12.5vw, 14rem)
    Range
    56–224px
    Leading
    0.8
    Tracking
    -0.02em
    Case
    Uppercase

    Uniforms

  • .text-hero

    Page heroes

    Font
    Archivo
    Weight
    850
    Width
    65%
    Size
    clamp(3rem, 11vw, 10rem)
    Range
    48–160px
    Leading
    0.84
    Tracking
    -0.015em
    Case
    Uppercase

    Shipping

  • .text-display

    Section titles (SectionHead)

    Font
    Archivo
    Weight
    850
    Width
    68%
    Size
    clamp(2.5rem, 6.5vw, 6rem)
    Range
    40–96px
    Leading
    0.88
    Tracking
    -0.01em
    Case
    Uppercase

    Most worn

  • .text-headline

    Card titles, values

    Font
    Archivo
    Weight
    800
    Width
    72%
    Size
    clamp(1.875rem, 3.6vw, 3.25rem)
    Range
    30–52px
    Leading
    0.92
    Tracking
    0
    Case
    Uppercase

    Repair for life

  • .text-title

    Panel titles, totals

    Font
    Archivo
    Weight
    750
    Width
    80%
    Size
    1.5rem
    Range
    24px
    Leading
    1
    Tracking
    0
    Case
    Uppercase

    Order summary

  • .text-heading

    Item names, small heads

    Font
    Archivo
    Weight
    700
    Width
    90%
    Size
    1.125rem
    Range
    18px
    Leading
    1.15
    Tracking
    0
    Case
    Uppercase

    Heavyweight Box Tee

  • .text-lede

    Intros, quotes

    Font
    Archivo
    Weight
    500
    Width
    100%
    Size
    clamp(1.125rem, 1.6vw, 1.375rem)
    Range
    18–22px
    Leading
    1.35
    Tracking
    -0.01em
    Case
    As written

    Heavyweight basics, built in small runs in Portugal.

  • .body

    Default body copy

    Font
    Archivo
    Weight
    400
    Width
    100%
    Size
    15px
    Range
    15px
    Leading
    22px
    Tracking
    0
    Case
    As written

    Dense 300 gram cotton that holds its shape and a collar that won't wave after ten washes.

  • .text-label

    All small meta, buttons, chips

    Font
    Geist Mono
    Weight
    500
    Width
    —
    Size
    0.6875rem
    Range
    11px
    Leading
    1rem (16px)
    Tracking
    0.04em
    Case
    Uppercase

    Free shipping over $150

  • .text-data

    Prices, counts, codes

    Font
    Geist Mono
    Weight
    inherit
    Width
    —
    Size
    inherit
    Range
    inherit
    Leading
    inherit
    Tracking
    inherit · tabular-nums
    Case
    As written

    $128.00 · 0042 · 4.8

  • .wordmark

    Logo, footer mark

    Font
    Archivo
    Weight
    900
    Width
    125%
    Size
    set per use
    Range
    —
    Leading
    —
    Tracking
    -0.04em
    Case
    Uppercase
    RAWCUT
03

Borders & shadows

Radius is 0 everywhere. Structure comes from 2px ink lines, grid rules and hard offset shadows that move on press.

Hard line

2px

border-2 border-ink

Hairline

1px soft

border-b border-line-soft

Shadow

4px 4px 0 ink

shadow-hard

Shadow large

8px 8px 0 ink

shadow-hard-lg

Press

Hover + click

press shadow-hard · lift -2px / 6px shadow · sink +2px / 0 · 120ms snap

Grid rules

1px collapsed

XSSMLXLXXL
grid-rules grid grid-cols-3

Focus ring

Keyboard

Focused
:focus-visible · 2px ink outline + 4px accent halo

Radius

None

0px
Edges are hard. No rounded-* anywhere.
04

Buttons

Mono uppercase labels on 2px ink. Five variants, three sizes plus icon. Pass href to render a link, press for the lifting shadow.

primary

accent

secondary

ghost

danger

Press

press

With icon

[&_svg]:size-4

Disabled

disabled

As link

href

All products
05

Fields

48px controls on card with a 2px ink border. Focus adds the 4px hard shadow; aria-invalid turns the border sale-red.

We'll send the receipt here.

Five digits, numbers only

Field (label + htmlFor + hint) · Input · Select · Textarea from components/ui/field
06

Badges

Sold outtone="ink"
Newtone="accent"
-30%tone="sale"
Low stocktone="outline"
07

Controls

Interactive pieces. In the HTML edition they run on data-tabs, data-switch, data-menu and data-open hooks.

Tabs

Arrow keys move

300 gsm combed cotton jersey. Rib collar, 2.5 cm. Pre-shrunk and garment dyed.

Switch

role="switch"

Menu

Outside click / Esc

Click the trigger · Esc closes

Modal

<dialog>

Native <dialog> · Esc or backdrop closes

Remove from bag?

Heavyweight Box Tee, Black / L

Only 4 left in this size. Removing it means it won't be held for you.

08

Product card & price

ProductCard handles badges (new, restock, limited, sale %, low stock, sold out), the hover second photo and quick add. Price marks sale prices on red.

Price

Regular

$48<Price price={48} />

Price

Sale

$96Was $120compareAt={120}

Price

Large, cents

$128.50text-data · tabular-nums
09

Photos · 54

Every image is a CC0 photo picked by name with <Photo name=… />. The box sets the crop; replace the files in public/images with your own using the same names.

  • Black backpack held by its handle next to cuffed jeans against a brick wall
    backpack-black
  • Brown leather duffel bag on a forest floor
    bag-duffel-leather
  • Cognac leather tote carried on the shoulder over a cream knit and lace top
    bag-leather-carry
  • Distressed brown leather messenger bag resting on a granite block
    bag-messenger-brown
  • Cream cable-knit beanie with a pom-pom on a grey surface
    beanie-cream
  • Single well-worn brown leather lace-up boot on a wooden plank
    boot-worn-leather
  • Tan leather moc-toe boots with cuffed jeans, seen from above on weathered wood
    boots-brown-worn-in
  • Black-and-white shot of hands lacing black leather boots
    boots-lacing-mono
  • Pair of worn wheat nubuck work boots on a wooden ledge under a wide pale sky, with room for copy
    boots-tan-ledge
  • Pink wool coat with notch lapels on a dark wooden hanger
    coat-pink-hanger
  • Macro of brown flecked tweed with four horn buttons on a cuff
    coat-tweed-buttons
  • Close-up of a grey check wool coat with a pocket flap and horn button
    coat-wool-detail
  • White woven straw hat with a black band, lit against a dark background
    hat-white-dark
  • Woman in a grey-blue hoodie sitting on a wall by a lake, seen from behind
    hoodie-blue-lake
  • Person in a grey hoodie seen from behind, looking out over a misty city skyline
    hoodie-grey-window
  • Close-up of raw indigo denim with a copper button and gold stitching
    jeans-button-detail
  • Stacks of folded light-wash jeans by a shop window next to a potted plant
    jeans-folded-stack
  • Close-up of mid-wash jeans showing the front pocket, belt loop and zip fly
    jeans-front-pocket
  • Macro detail of a chunky grey wool knit
    knit-grey-detail
  • Cream open-knit fringed poncho on a wooden hanger against a white wall
    knit-poncho-hanger
  • Flat lay of a white cable-knit cardigan, dark jeans and glasses on a white surface
    knit-white-flatlay
  • Close-up of a worn black leather jacket with brass zips
    leather-jacket-detail
  • Row of quilted leather jackets in black, grey and oxblood on a rail
    leather-jackets-row
  • Person in a grey beanie and mustard corduroy hooded jacket, seen from behind against fog
    model-beanie-coat
  • Woman in a grey knit, long skirt and hat standing on mossy rocks facing the sea
    model-coast
  • Grey wool coat and rust knit scarf, hands holding a takeaway cup, face out of frame
    model-coat-scarf
  • Ivory wrap coat with a tan belt over an embroidered dress, cropped at the shoulders
    model-coat-white
  • Woman in a denim jacket crossing her arms in front of her face
    model-denim-crossed
  • Woman in a black leather biker jacket and cream knit holding a cup of tea, face out of frame
    model-leather-jacket
  • Monochrome profile of a person in a black parka and grey beanie, facing away, on white
    model-parka-studio
  • Man buttoning a crisp white shirt against a light grey studio wall, face out of frame
    model-shirt-white
  • Polished brown leather chukka boots on a warm wooden floor
    shoes-brown-floor
  • Pair of white canvas low-top sneakers with a crystal-embellished upper on a dark table
    sneaker-white-studio
  • Pair of light grey quilted low-top sneakers on sand beside footprints
    sneakers-white-sand
  • Pair of grey and cream striped wool socks on a sunlit wooden floor
    socks-wool-stripe
  • Boutique interior with clothing on rope-hung rails, pendant lamps and a mirror
    store-interior
  • Neutral-toned clothes on wooden hangers along a branch rail against a white wall
    store-rack-minimal
  • Rail of knitwear and neutral tops seen through a shop window under warm lights
    store-rack-warm
  • Black clothes rack of white shirts beside a potted plant in a sunlit room
    store-white-shirts
  • Black sunglasses and a smartwatch with a black strap on concrete
    sunglasses-watch
  • Cream cable-knit sweater worn with light-wash jeans and a dark watch
    sweater-cream-denim
  • Cream knit sweater lying on a wooden deck in warm low sunlight
    sweater-cream-wood
  • Folded navy and grey striped chunky-knit sweater on a pale grey background
    sweater-stripe-folded
  • Cropped studio shot of a cream crew-neck sweatshirt layered over a white shirt with black trousers
    sweatshirt-cream-studio
  • Close-up of tee shoulders in red, olive, black, navy, grey and white on wooden hangers
    tee-hangers-close
  • Plain white tee at the front of a row of colored tees on wooden hangers
    tee-hangers-front
  • Row of plain tees hanging from a dark rail on a grey wall
    tee-rail-minimal
  • Seven plain tees on wooden hangers along a black steel rail against a white wall
    tee-rail-white-wall
  • Stack of folded crew-neck tees in grey, black, navy, red, olive and white
    tee-stack-colors
  • Back view of a model in a plain white tee against a light grey studio wall
    tee-white-back
  • Close-up of a red canvas tote with tan leather handles on a beach
    tote-red
  • Seated man in khaki trousers, a denim shirt and burgundy leather boots on a wooden stool
    trousers-khaki-seated
  • Two people in cuffed navy trousers and brown leather shoes on a city pavement
    trousers-navy-street
  • Two wooden watches with tan leather straps on grey stone and slate
    watches-wood
10

Marquee

Two identical children inside .marquee loop seamlessly (30s, or 60s with .marquee-slow). Pauses on hover and stops for reduced motion.

.marquee · .marquee-slow · overflow-hidden parentSee it on the home page