Crit Beat
Design system
1. Color
Ten colors. Every one has a job. If a screen needs a color that is not here, the screen is wrong, not the palette.
Surface
Where things sit
Paper #F5F0E6
Sidebar and page frame. The rail everything hangs off.
White #FFFFFF
The main field, cards, inputs, the team read panel. Where the work sits.
Ash #E6E1D6
Empty beat cells, borders, dividers. The absence of a submission.
Mist #F4F4F4
Resting fill for form fields. Added in code; not in the Figma palette.
Ink
What you read and press
Ink #111111
All primary text, primary buttons, filled beat cells, the wordmark.
Grey #666666
Secondary text: dates, helper copy, breadcrumb trail, column labels.
Signal
The three colors that mean something
Pink #FF4D9D
The lead’s read and flags. The one accent that says look here. Never decorative.
Yellow #FFD60A
Selected nav, highlights, member-side warmth. Means this is where you are.
Red #FC262E
Something is wrong. Text only, never a fill. If it shows up more than once, the screen is shouting.
Green #1A9E4A
It worked: saved, sent, connected. Text only. Added in code; not in the Figma palette.
How the palette reads in a beat row
Ash is a beat that was submitted. Ink is the low one worth reading first. A dash is no submission yet. Pink appears once, on the flag, and nowhere else in the row.
2. Type
Figtree, two weights. Bold carries structure, Light carries reading. If you need a third weight, you need a different layout.
Display
Figtree Bold 48/62
Page title, once per screen
AI Product Studio
Heading 1
Figtree Bold 32/42
Panel titles, the team read
Check-in 6 of 14
Heading 2
Figtree Bold 24/31
Section titles inside a screen
Overview
Heading 3
Figtree Bold 18/23
Question prompts, card titles
What did you make this week?
Body
Figtree Light 16/21
Members’ answers, leads’ notes, all reading text
Rebuilt the onboarding flow in Figma after Tuesday’s review. Started a mood board for a brand refresh.
Label
Figtree Bold 13/17
Eyebrows, column headers, chips. Sentence case, never all caps
Team Nova · Week 6
Caption
Figtree Light 13/17
Metadata, timestamps, helper text
Submitted by Priya for the team · 2 days late
Rules
- Sentence case everywhere, including labels and buttons.
- Line height is 130% across the scale. Do not tighten display.
- Grey is for metadata only. If a member has to read it to answer, it is Ink.
- No italics. Emphasis comes from weight or from a chip, not from slanting.
3. Spacing and layout
8px base. One content width. A sidebar that never moves.
Spacing scale
xs
4px
sm
8px
md
12px
lg
16px
xl
24px
2xl
32px
3xl
40px
4xl
48px
5xl
64px
lg (16) inside components, xl (24) between components, 4xl (48) between sections. Anything else needs a reason in the layer name.
Layout
Content 1024
Everything reads here. Tables scroll inside it, never past it.
Canvas
1440 wide, 128 top bar with the logo, sidebar 200 below it, main 1240
Content width
1024, centered in main with 56 side margin
Columns
3 equal columns inside content, 24 gutter. Split to 2 or 1 as needed
Cards
White on white, 12 radius, 1px Ash border, xl (24) padding
4. Components
Nine components. Each one is on a real screen today. States shown only where the state changes what a person does next.
Button
Primary for the one action on a screen. Secondary for the way out. Never two primaries side by side.
Input
Label above, helper below. Error copy says what to do, not what went wrong.
Confidence 1 to 5
One tap per person, private. The number never shows on the member side after submit.
Upload
Drop zone with the file types spelled out. No icon needed.
Beat cell
One beat per team per week. Ash means submitted, Ink means the low one to read first, a dash means nothing yet. Yellow is the column you are looking at. Red dash means the deadline passed with nothing.
Movement chip
Per team, against their own last week. Never a rank. Only one is pink and it is the one that asks for the lead’s time.
Evidence tag
The reasons behind a flag, in plain words. Grey on Ash so they read as facts, not alarms.
Nav item
Sidebar only. Yellow is where you are, and it runs flush to the main field on the right. Nothing else in the sidebar is colored.
Breadcrumb
Grey trail, Ink current page. Reads Dashboard, then the project, then deeper.
Card
White on white, 12 radius, 1px Ash border, xl (24) padding.
What did you make this week?
Rebuilt the onboarding flow in Figma after Tuesday’s review.
5. Voice
Crit Beat talks like a good project lead. Direct, specific, on your side. It never sounds like a report card.
Rules
- Sentence case, always
- Buttons, labels, chips, column headers, error copy. If it is text on the screen, it is sentence case.
- Name the move, not the mood
- Say what happened and what to do next. Scope drift, no test since W3, late 2 days. Never at risk, never struggling.
- Members never see a score
- Beat numbers, flags and movement live on the lead’s side. The member side confirms, thanks, and says what happens next.
- Asking for feedback is not a signal
- A team requesting help is doing the assignment. The system flags submission, completeness and quality only.
- Short beats complete
- One line where one line will do. Helper copy is a sentence, not a paragraph.
How we name states
Movement is against a team’s own last week. Chart vocabulary, never a leaderboard.
Climbing
Beat went up from last week
Holding steady
Same beat as last week
New entry
First submission from this team
Needs a listen
Beat dropped, or two signals stacked. Read this one first
Three pairs
Flag on the lead’s read
Don’t
Team Nova is at risk and falling behind.
Do
Team Nova · needs a listen. Scope drift, no test since W3.
Confirmation after a member submits
Don’t
Your submission has been received. Score: 3/5.
Do
Thanks, Team Nova. Check-in 6 is in. The leads read it before Tuesday.
Empty state, no submission yet
Don’t
No data available.
Do
Nothing from Team Kora yet. Due Friday 5pm.
6. Logo
A monogram and a wordmark. The C listens, the B answers. Both in Figtree Bold, both in Ink or White, nothing else.
On paper
Default. Ink lockup on the app background.
On ink
Dark surfaces, splash, app icon background.
On yellow
Marketing only. Never inside the product.
Clear space
Keep the height of the B clear on every side. Nothing inside the dashed line but the logo.
Minimum size
Monogram alone at 24px and below, for favicons and app icons. Full lockup never under 120px wide.
Product header
Stacked lockup at 96px tall, left end of the 128px top bar, Ink on Paper. The only lockup used inside the app.
What not to do
- Do not recolor it. Ink or White. Pink, Yellow and Red are for the interface, not the mark.
- Do not set the wordmark in any other weight or font. Figtree Bold, as drawn.
- Do not stretch, rotate or add a shadow. If it needs help standing out, change the background, not the mark.
- Do not put the monogram inside a circle or a badge. The rings already are the shape.